*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth; 
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0C1824; 
    display: grid;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#start {
    width: 400px;
    transition: transform 0.3s ease;
    animation: glow 2s infinite ease-in-out;
}

#start:hover {
    transform: scale(1.3);
}

#website {
    background-color: #000000;
}

.section {
    transform: translateX(-100%);
    opacity: 0;
    filter: blur(10px);
    transition: all 0.8s cubic-bezier(0.7, 0, 0.2, 1);
    will-change: transform, opacity;
}

.section.show {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
}

nav {
    text-align: center;
    padding: 10px;
}

nav a {
    font-family: ProximaNova-Regular;
    font-weight: bolder;
    font-size: 20px;
    text-decoration: none;
    color: #FF4655;
    padding: 5px;
}

p {
    font-family: Tungsten-Medium;
    text-align: center;
    margin-top: 30px;
    padding: 10px;
    font-size: 25px;
    color: #FFFFFF;
}

h2 {
    font-family: Valorant-Font;
    color: #FF4655;
    font-size: 35px;
}

figcaption {
    font-family: Arial-Regular;
    font-weight: bolder;
    font-size:25px;
    text-align: center;
    margin-top: 12px;
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(20px);

    animation: captionReveal linear;
    animation-timeline: view(inline);
    animation-range: entry 40% cover 60%
}


#agents, #guns {
    margin-top: 50px;
    padding: 10px;
    background-color: #0C1824;
}

footer p {
    font-family: ProximaNova-Regular;
    font-weight: bolder;
    font-size: 15px;
    margin-top: 20px;
}

#carousel {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #FF4655 #0C1824;
}

@keyframes glow {
  0%   { filter: drop-shadow(0 0 5px #fff); }
  50%  { filter: drop-shadow(0 0 20px #fff); }
  100% { filter: drop-shadow(0 0 5px #fff); }
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes slide {

    45%,
    100% {
        transform: scale(0.5);
        border-radius: 20px;
        filter: blur(6px) brightness(0.8);
    }

    50% {
        transform: scale(1);
        border-radius: 4px;
        filter: none;
    }
}

@keyframes captionReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer layout {
    #carousel {
        /* width: max(480px, 50vw); */
        width: 100%;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;

        #carousel-slide {
            flex-shrink: 0;
            width: calc(100% / 3);
            aspect-ratio: 0.8;
            scroll-snap-align: center;
            animation: slide;
            animation-timeline: view(inline);
            scroll-snap-align: c;

            img {
                width: 100%;
                border-radius: inherit;
            }
        }
    }
}


@font-face {
    font-family: Valorant-Font;
    src: url(../fonts/Valorant\ Font.ttf);
}

@font-face {
    font-family: ProximaNova-Regular;
    src: url(../fonts/proxima-nova/Proxima\ Nova\ Regular.ttf);
}

@font-face {
    font-family: Arial-Regular;
    src: url(../fonts/arial/ARIAL.TTF);
}

@font-face {
    font-family: Tungsten-Medium;
    src: url(../fonts/tungsten/Tungsten-Medium.otf);
}

@font-face {
    font-family: TungstenCompressed-Medium;
    src: url(../fonts/tungsten/TungstenCompressed-Medium.otf);
}