@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Bungee&family=Bytesized&family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Kumbh+Sans:wght,YOPQ@100..900,300&family=Lexend:wght@100..900&family=Notable&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: Minecraft;
    src: url('minecraft.ttf');
}
html::-webkit-scrollbar {
    display: none;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto; /* Reverts to instant scrolling if the user prefers reduced motion */
  }
}
::root {
    --1: #ff0a54;
    --2: #ff477e;
    --3: #ff5c8a;
    --4: #ff7096;
    --5: #ff85a1;
    --6: #ff99ac;
    --7: #fbb1bd;
    --8: #f9bec7;
    --9: #f7cad0;
    --10: #fae0e4;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
}

nav {
    background: #ff0a54;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.05);
    border-radius: 0 0 15px 15px;
    color: white;
    margin-bottom: -50px;
    z-index: 999;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    font-family: 'Bungee';
}
nav ul {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0a54;
    position: relative;
    list-style: none;
    gap: 30px;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05);
}
nav ul::after {
    border-radius: 0 0 15px 15px;
    content: '';
    position: absolute;
    z-index: -999;
    /* background: linear-gradient(to right, #099773, #43b692); */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.4;
    height: 110%;
    width: 100%;
    filter: blur(20px);
}

nav a {
    color: white;
    text-decoration: none;
}
nav li:first-child {
    transform: translateX(-30px);
    padding-left: 25px;
    padding-right: 500px;
    margin-right: 100px;
    border-radius: 25px;
    cursor: default;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 5px 0 5px rgba(255, 255, 255, 0.2);
    transition: all cubic-bezier(0.1, 1, 0.35, 1.2) 3s;
}
nav li:first-child:hover {
    cursor: pointer;
    padding-right: 262.5px;
    padding-left: 262.5px;
}

small {
    font-size: 1.125vw;
}
p {
    font-size: 1.25vw;
}
h6 {
    font-size: 1.5vw;
}
h5 {
    font-size: 2vw;
}
h4 {
    font-size: 3vw;
}
h3 {
    font-size: 4vw;
}
h2 {
    font-size: 5vw;
}
h1 {
    font-size: 7.5vw;
}
body {
    min-height: 100vh;
    margin: 0 auto;
    background-color: #fbb1bd;
    text-align: center;
}
.header-buttons {
    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 100px;
    justify-content: center;
    flex-direction: row;
    list-style: none;
}
.header-buttons-both{
    cursor: pointer;
    font-size: 25px;
    background-color: #ff477e;
    padding: 15px 120px;
    border-radius: 5000px;
    border: none;
    transition: all 0.3s;
}
header {
    padding-top: 150px;
    background-color: #fbb1bd;
    color: #fff;
}
#header-links {
    text-decoration: none;
    color: #fff;
}
.header-buttons-both:hover {
    padding: 15px 160px;
}
#header-buttons-1::after {
    z-index: -90;
    background: hsla(331, 78%, 69%, 1);
    background: linear-gradient(90deg, hsla(331, 78%, 69%, 1) 0%, hsla(238, 82%, 70%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(331, 78%, 69%, 1) 0%, hsla(238, 82%, 70%, 1) 100%);    
    background: -webkit-linear-gradient(90deg, hsla(331, 78%, 69%, 1) 0%, hsla(238, 82%, 70%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ED71AD", endColorstr="#7277F1", GradientType=1 );
}
#header-buttons-2::after {
    z-index: -90;
    background: hsla(350, 73%, 44%, 1);
    background: linear-gradient(90deg, hsla(350, 73%, 44%, 1) 0%, hsla(274, 65%, 12%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(350, 73%, 44%, 1) 0%, hsla(274, 65%, 12%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(350, 73%, 44%, 1) 0%, hsla(274, 65%, 12%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#C11E38", endColorstr="#220B34", GradientType=1 );
}
/* GAMES.HTML */

.game-left {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
    gap: 50px;
    background-color: #ff477e;
    padding: 15px;
    width: 80vw;
    border-radius: 0 45px 45px 0;
}
.game-left h2 {
    color: white;
    font-size: 40px;
}
.game-right {
    display: flex;
    align-items: center;
    justify-content: right;
    text-align: right;
    gap: 50px;
    background-color: #ff477e;
    padding: 15px;
    width: 80vw;
    margin-left: 20vw;
    border-radius: 45px 0 0 45px;
}
.game-right h2 {
    color: white;
    font-size: 40px;
}

.game-image {
    margin-left: 100px;
    margin-right: 100px;
}
.imageReveal {
    animation: imageReveal both;
    animation-timeline: view(50% 10%);
}
@keyframes imageReveal {
    from {
        filter: saturate(0)contrast(4)brightness(.1)blur(5px);
        opacity: 0;
        scale: .95;
        translate: 0 4rem;
    }
    to {
        filter: none;
        opacity: 1;
        scale: 1;
        translate: 0 0;
    }
}
.game-left {
    animation: gameDivAnimation both;
    animation-timeline: view(50% 10%);
}
@keyframes gameLeftAnimation {
    from {
        transform: translateX(-45px);
        opacity: 0;
    }
    to {
        transform: translateX(O);
        opacity: 1;
    }
}