:root {
--background: #261E5A;
}
html {
scroll-behavior: smooth;
font-family: 'Mullish', sans-serif;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: var(--background);
padding: 32px;
padding-top: 128px;
}
.background {
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 0px;
margin: 4px;
gap: 8px;
max-height: 430px;
max-width: 388px;
transition: all 0.2s;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.card {
padding: 4px;
min-width: 380px;
min-height: 400px;
color: white;
display: flex;
border-radius: 8px;
font-size: 48px;
transition: all 0.2s;
scroll-snap-align: start;
}
.card figure {
margin: 0px;
border-radius: 8px;
cursor: move;
cursor: grab;
}
.card figure:active {
cursor: grabbing;
}
.card img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 16px;
}
.container::-webkit-scrollbar {
width: 8px;
}
.container::-webkit-scrollbar-track {
background: white;
border-radius: 6px;
}
.container::-webkit-scrollbar-thumb {
background: #FF9950;
border-radius: 5px;
}
.container::-webkit-scrollbar-thumb:hover {
background: #FF9950;
}