@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,600;0,800;1,300&display=swap');
*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Kanit', sans-serif;
}
:root{
    --main-color: #3f3f3f;
    --text-color: #ffffff;
}
img{
    width: 100%;
}
body{
    color: var(--text-color);
}
*::selection{
    color:#fcc142;
    background: transparent;
}

html::-webkit-scrollbar{
    width: 0.5rem;
}
html::-webkit-scrollbar-track{
    background: transparent;
}
html::-webkit-scrollbar-thumb{
    background: var(--main-color);
    border-radius: 5rem;
}
header{
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #3D3D3D;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
    padding: 22px 14%;
    transition: 0.2s;
}
.logo{
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
}
.navbar{
    display: flex;
}
.navbar a{
    font-size: 1.5rem;
    padding: 10px 20px;
    color: var(--text-color);
    font-weight: 500;
    transition: 0.5s ease-in-out;
    background: #3D3D3D;
    border-radius: 20px;
    background-image: linear-gradient(0,#3D3D3D 25%,#403a5a 50%,#8e36e0 75%,#e43561 86%,#fea623 100%);
    background-repeat: no-repeat;
    background-size: 100% 400%;
    background-position-y: 100%;
}

.navbar a:hover{
    
    color: #2C2C2A;
    transition: 0.5s ease-in-out;
    background-position-y: 0%;
}

.navbar_Selected{
    font-size: 1.5rem;
    padding: 10px 20px;
    color: #2C2C2A;
    font-weight: 500;
    transition: 0.5s ease-in-out;
    background: #3D3D3D;
    border-radius: 20px;
    background-image: linear-gradient(0,#3D3D3D 25%,#403a5a 50%,#8e36e0 75%,#e43561 86%,#fea623 100%);
    background-repeat: no-repeat;
    background-size: 100% 400%;
    background-position-y: 0%;
}

/* CONTENT */

.Content_Box{
    position: fixed;
    overflow:hidden;
    background: #3D3D3D;
    z-index: -10;
    inset: -30px;
    border-radius: 20px;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
}

.Game_CapsuleBG{
    transform: translate(-5%,-5%);
    filter: blur(2px);
    top: -5%;
    width: 110%;
    transition: 0.2s ease-in-out;
}

.Home_Container{
    padding-top: 80px;
    display: flex;
    position: relative;
    justify-items: center;
    justify-content: center;
    margin: 80px 0 0 0;
}

.AboutMe_Container{
    margin: 60px;
    display: inline-flex;
    transform: scale(1);
    transition: 0.2s ease-in-out;

}
.AboutMe_Container:hover{
    transform: scale(1.05);
    transition: 0.2s ease-in-out;
}

.Introduction_Container{
    margin: 60px;
    display: inline-flex;
    transform: scale(1);
    transition: 0.2s ease-in-out;
    height: 600px;
    position: sticky;
    top: 220px;

}
.Introduction_Container:hover{
    transform: scale(1.05);
    transition: 0.2s ease-in-out;
}

.AboutMe_Intro{
    width: 450px;
    text-align: justify;
    transition: 0.2s ease-in-out;
}


.AboutMe_Text{
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-color);
    
}

.AboutMe_Separation {
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    margin: 25px 0;
    height: 2px;
    width: 100%;
}

.Activity_Label_Box{
    width: fit-content;
    height: 50px;
    transform-origin: center;
    overflow:hidden;
    background-color: #2C2C2A;
    background-image: linear-gradient(90deg,#fea623 0%,#e43561 50%,#8e36e0 100%);
    background-repeat: no-repeat;
    background-position-x: 0%;
    z-index: 5;
    transform: scale(1);
    border-radius: 10px;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
    transition: 0.2s  ease-in-out;
    display: flex;
    margin-bottom: 25px;
    margin-top: 25px;
}



.Activity_Label_Box:hover{
    transform: scale(1.1);
    transition: 0.2s  ease-in-out;
}

.Activity_Label_Box .Icon_Text{
    line-height: 0.9;
    letter-spacing:normal;
    color: #2C2C2A;
    align-self:center;
    font-size: 20px;
    font-weight: 600;
    text-wrap: nowrap;
    padding-left: 20px;
    padding-right: 20px;
    transition: 0.2s ease-in-out;
    
}

.Activity_Label_Box:hover .Icon_Text{
   
    color: #fff;
    transition: 0.2s ease-in-out;
    
}

.Activity_Label_Box .Icon{
    filter:brightness(0.17);
    transition: 0.2s  ease-in-out;
}

.Activity_Label_Box:hover .Icon{
    filter:brightness(1);
    transition: 0.2s  ease-in-out;
}



.AboutMe_ContactGrid{
    position: fixed;
    width: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    padding: 5px 10px;
    transition: 0.2s;
}

b{
    color: #e43561;
    font-size: 2.5rem;
    font-weight: 1000;
    animation: colorGradientSlide 5s linear infinite;
    text-shadow: 0px 5px 10px rgb(0, 0, 0,0.5);
}

h1{
    line-height: 1.3;
}

@keyframes colorGradientSlide{
    0%{
        color: #fea623;
        
    }
    25%{
        color: #ff5781;
    }
    50%{
        color: #a84bff;
    }
    75%{
        color: #ff5781;
    }
    100%{
        color: #fea623;
    }
  }


.Contact_Box{
    width: 50px;
    height: 50px;
    --hover-transition-duration: 100ms;
    transform-origin: center;
    overflow:hidden;
    background-color: #2C2C2A;
    background-image: linear-gradient(0,#2C2C2A 25%,#403a5a 50%,#8e36e0 75%,#e43561 86%,#fea623 100%);
    background-repeat: no-repeat;
    background-size: 100% 400%;
    background-position-y: 100%;
    z-index: 5;
    border-radius: 10px;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
    transition: 0.2s  ease-in-out;
    display: flex;
}

.Contact_Box:hover{
    cursor: pointer;
    width: 100px;
    height: 50px;
    background-position-y: 0%;
    transition: 0.2s  ease-in-out;
}

.Game_Box{
    width: 350px;
    height: 240px;
    transform: scale(1);
    transition: 0.2s;
}
.Game_Box:hover{
    transform: scale(1.1);
    transition: 0.2s;
}

.Game_Section{
    width: 350px;
    height: 40px;
    transform: scale(1);
}


.Game_Box:hover .Game_CapsuleBG{
    filter: blur(0px);
    transform: translate(-7%,-7%);
    width: 114%;
    transition: 0.2s ease-in-out;
}

.Game_Logo{
    position:absolute;
    transform-origin: 50% 50%;
    height: 100%;
    width: auto;
    top: 0;
    transform: translate(40%) scale(1.1);
    transition: 0.2s ease-in-out;
    filter: drop-shadow(0px 5px 4px rgba(0,0,0,0.7));
    z-index: 0;
}

.Prize_Logo{
    position:absolute;
    transform-origin: 50% 50%;
    height: 45%;
    width: auto;
    top: 0;
    transform: translate(240%, 150%) scale(1.1);
    transition: 0.2s ease-in-out;
    filter: drop-shadow(0px 2px 1.5px rgba(0,0,0,1));
    z-index: 0;
}

.Game_Box:hover .Game_Logo{
    transform: translate(40%) scale(1.3);
    transition: 0.2s ease-in-out;
    filter: drop-shadow(0px 5px 6px rgba(0,0,0,0.9));
}

.Game_CapsuleBackLight{
    position: relative;
    transform: translate(-5%,-5%);
    filter: blur(0px) saturate(1.8) brightness(1.2) opacity(0.1);
    top: -5%;
    z-index: -11;
    width: 110%;
    transition: 0.4s ease-in-out;
}
.Game_Box:hover .Game_CapsuleBackLight{
    filter: blur(60px) saturate(1.8) brightness(1.2) opacity(0.6);
    transition: 0.4s ease-in-out;
}

.Game_Grid{
    margin: 60px;
    margin-bottom: 140px;
    display:grid;
    gap: 120px;
    transform: scale(1);
    grid-template-columns: auto;
}

.Icon_List{
    position: fixed;
    display: grid;
    top: -10px;
    left: -10px;
    gap: 10px;

}

.Icon_Box{
    width: 50px;
    height: 50px;

    overflow:hidden;
    background: #2C2C2A;
    z-index: 5;
    border-radius: 10px;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
    transition: 0.2s  ease-in-out;
    display: flex;
    
}
.Icon_Box:hover{
    width: 150px;
    height: 50px;
    cursor: pointer;
    transition: 0.2s  ease-in-out;
}

.Highlight_Box{
    width: 50px;
    height: 50px;

    overflow:hidden;
    background-image: linear-gradient(90deg,#fea623 0%,#e43561 50%,#8e36e0 100%);
    z-index: 5;
    border-radius: 10px;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
    transition: 0.2s  ease-in-out;
    display: flex;
    
}
.Highlight_Box:hover{
    width: 150px;
    height: 50px;
    cursor: pointer;
    transition: 0.2s  ease-in-out;
}

.Icon{
    filter:brightness(1);
    width: 40px;
    height: 40px;
    z-index: 10;
    transform: translate(5px,5px);
    transition: 0.2s  ease-in-out;
}

.Icon_Box:hover .Icon{
    width: 40px;
    height: 40px;
    transform: translate(-50px,5px);
    transform-origin: center;
    transition: 0.2s ease-in-out;
}

.Contact_Box:hover .Icon{
  
    transform: translate(5px,50px);
    transition: 0.2s ease-in-out;
}



.Icon_Box .Icon_Text{
    line-height: 0.9;
    align-self:center;
    font-size: 21px;
    font-weight: 400;
    color: var(--text-color);
    text-wrap: nowrap;
    transform: translate(30px);
    transition: 0.2s ease-in-out;
    
}

.Icon_Box:hover .Icon_Text{
    transform: translate(-30px);
    transition: 0.2s ease-in-out;
}


.Highlight_Box .Icon{
    width: 40px;
    height: 40px;
    transform-origin: center;
    transition: 0.2s ease-in-out;
}


.Highlight_Box:hover .Icon{
    width: 40px;
    height: 40px;
    transform: translate(-50px,5px);
    transform-origin: center;
    transition: 0.2s ease-in-out;

}



.Highlight_Box .Icon_Text{
    line-height: 0.9;
    align-self:center;
    font-size: 21px;
    font-weight: 400;
    color: #ffffff;
    text-wrap: nowrap;
    transform: translate(30px);
    transition: 0.2s ease-in-out;
    
}

.Highlight_Box:hover .Icon_Text{
    transform: translate(-30px);
    transition: 0.2s ease-in-out;
}

.Contact_Box .Icon_Text{
    line-height: 0.9;
    letter-spacing:normal;
    color: #2C2C2A;
    align-self:center;
    font-size: 20px;
    font-weight: 600;
    text-wrap: nowrap;
    transform: translate(-30px, -50px);
    transition: 0.2s ease-in-out;
    
}

.Contact_Box:hover .Icon_Text{
    transform: translate(-30px);
    transition: 0.2s ease-in-out;
}



.Background{
    position: fixed;
    overflow: hidden;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -100;
    background: #2C2C2A;
   
}
.Scrolling_Grid {

    
    width: 100%;
    height: 100%;
    
    z-index: -90;
    background: url("img/GridCell.png") repeat;
    animation: slide 60s linear infinite;

  }

  @keyframes slide{
    0%{
        background-position: 0% 0%;
    }
    100%{
        background-position: 100% 100%;
    }
  }


  /* GAME PAGES */

  .Grid_Container{
    padding-top: 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
    justify-items: center;
    justify-content: center;
    margin: 80px 0 80px 0;
}


  .Game_ContentBox_Wide{
    width: 766px;
    height: 405px;
    text-align: justify;
    transition: 0.2s ease-in-out;
  }

  .Game_Content_MobileBox{
    width: 766px;
    height: 405px;
    text-align: justify;
    transition: 0.2s ease-in-out;
    flex-wrap: wrap;
  }

  .Game_ContentBox_Mobile{
    width: 228px;
    height: 405px;
    padding-left: 100px;
    text-align: justify;
    transition: 0.2s ease-in-out;
  }

  .Content_Box_Top{
    position: fixed;
    overflow:hidden;
    background: #3D3D3D;
    z-index: 10;
    inset: -30px;
    border-radius: 20px;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
}

  .Game_ContentBox_Small{
    width: 450px;
    height: 405px;
    text-align: justify;
    transition: 0.2s ease-in-out;
  }

  .Game_ContentBox_Lateral{
    width: 100%;
    text-align: justify;
    display: flex;
    align-content: space-between;
    flex-direction: row;
    transition: 0.2s ease-in-out;
  }

  .Game_Diorama{
    position:absolute;
    transform-origin: 50% 50%;
    height: 100%;
    width: auto;
    transform: scale(1.15);
    top: 0;
    transition: 0.2s ease-in-out;
    filter: drop-shadow(0px 5px 4px rgba(0,0,0,0.7));
    z-index: 0;
}

.Game_Image{
    position:absolute;
    transform-origin: 50% 50%;
    height: 100%;
    width: auto;
    transform: scale(1);
    top: 0;
    transition: 0.2s ease-in-out;
    filter: drop-shadow(0px 5px 4px rgba(0,0,0,0.7));
    z-index: 0;
}

.Activity_Box{
    width: fit-content;
    height: 50px;
    --hover-transition-duration: 100ms;
    transform-origin: center;
    overflow:hidden;
    background-color: #2C2C2A;
    background-image: linear-gradient(0,#2C2C2A 25%,#403a5a 50%,#8e36e0 75%,#e43561 86%,#fea623 100%);
    background-repeat: no-repeat;
    background-size: 100% 400%;
    background-position-y: 100%;
    z-index: 5;
    border-radius: 10px;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
    transition: 0.2s  ease-in-out;
    display: flex;
    margin-top: 25px;
}

.Activity_Box:hover{
    background-position-y: 0%;
    transition: 0.2s  ease-in-out;
}

.Activity_Box .Icon_Text{
    line-height: 0.9;
    letter-spacing:normal;
    color: white;
    align-self:center;
    font-size: 20px;
    font-weight: 600;
    text-wrap: nowrap;
    padding-left: 20px;
    padding-right: 20px;
    transition: 0.2s ease-in-out;
    
}

.Activity_Box:hover .Icon_Text{

    color: #2C2C2A;
    transition: 0.2s ease-in-out;
}

.Part_Anchor{
    transform: translate(0,-200px);
}


.GamePart_Text{
    margin: 10px;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 300;
    color: var(--text-color);
    
}

.GameDescription{
    align-self: center;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 300;
    color: var(--text-color);
    
}

.TimeLine{
    width: 100%;
    text-align: justify;
    display: flex;
    align-content: center;
    justify-content: space-around;
    flex-direction: row;
  }

.GameTimelineBox{
    transform: translate(0,-10px);
    width: 200px;
    align-self:flex-start;
    text-align: center;
    align-content: center;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 300;
    color: var(--text-color);
}

.TimelinePoint{
    
    transform: translate(0,-21px);
    
    height: 17px;
    width: 17px;
    transform-origin: center;

}


.GamePart_Video{

    transform-origin: center;
    z-index: 30;
    width: 826px;
    height: 465px;
}


.Label_Box{
    width: 100%;
    height: 50px;
    transform-origin: center;
    overflow:hidden;
    background-color: #2C2C2A;
    z-index: 5;
    border-radius: 10px;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
    transition: 0.2s  ease-in-out;
    display: flex;
    margin-bottom: 25px;
}

.Label_Box .Icon_Text{
    line-height: 0.9;
    letter-spacing:normal;
    color: white;
    align-self:center;
    font-size: 20px;
    font-weight: 600;
    text-wrap: nowrap;
    padding-left: 20px;
    padding-right: 20px;
    transition: 0.2s ease-in-out;
    
}

.Interactive_Label_Box{
    width: 100%;
    height: 50px;
    transform-origin: center;
    overflow:hidden;
    background-color: #2C2C2A;
    background-image: linear-gradient(0,#2C2C2A 25%,#403a5a 50%,#8e36e0 75%,#e43561 86%,#fea623 100%);
    background-repeat: no-repeat;
    background-size: 100% 400%;
    background-position-y: 0%;
    z-index: 5;
    transform: scale(1);
    border-radius: 10px;
    box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
    transition: 0.2s  ease-in-out;
    display: flex;
    margin-bottom: 25px;
}

.Interactive_Label_Box:hover{
    transform: scale(1.1);
    transition: 0.2s  ease-in-out;
}

.Interactive_Label_Box .Icon_Text{
    line-height: 0.9;
    letter-spacing:normal;
    color: #2C2C2A;
    align-self:center;
    font-size: 20px;
    font-weight: 600;
    text-wrap: nowrap;
    padding-left: 20px;
    padding-right: 20px;
    transition: 0.2s ease-in-out;
    
}

.Interactive_Label_Box:hover .Icon_Text{
   
    color: #fff;
    transition: 0.2s ease-in-out;
    
}

.Interactive_Label_Box .Icon{
    filter:brightness(0.17);
    transition: 0.2s  ease-in-out;
}

.Interactive_Label_Box:hover .Icon{
    filter:brightness(1);
    transition: 0.2s  ease-in-out;
}

.Label_Separation {
    position: relative;
    margin: 0 25px;
    width: 2px;
}

.LabelLateral_Separation {
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    margin-bottom: 10px;
    height: 5px;
    width: 100%;
}

    /* CAROUSEL */

    .CarouselSlide{
        opacity: 0;
        position:absolute;
        transform-origin: 50% 50%;
        height: 100%;
        width: auto;
        transform: scale(1.15);
        transition: 0.2s opacity ease-in-out;
        transition-delay: 0.2s;
    }


    .CarouselSlide[data-active]{
        opacity: 1;
        transition: 0.2s opacity ease-in-out;
        transition-delay: 0s;
        z-index: 1;
    }

    .CarouselButton_next{
        width: 10%;
        align-self:flex-end;
        position: absolute;
        top:82%;
        left: 90%;
        transform-origin: center;
        opacity: 0.5;
        transform: scale(1);
        transition: 0.2s ease-in-out;
    }

    .CarouselButton_next:hover{
        opacity: 1;
        cursor: pointer;
        transform: scale(1.2);
        transition: 0.2s ease-in-out;
    }

    .CarouselButton_prev{
        width: 10%;
        align-self: center;
        position: absolute;
        top:82%;
        transform-origin: center;
        opacity: 0.5;
        transform: scale(1);
        transition: 0.2s ease-in-out;
    }

    .CarouselButton_prev:hover{
        opacity: 1;
        cursor: pointer;
        transform: scale(1.2);
        transition: 0.2s ease-in-out;
    }


  /* TRANSITION */

  .wrapper{
    width: 100%;
    height: 100%;
  }

  .transition{
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100vh;
    top:0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(0,#8e36e0 0%,#e43561 50%,#fea623 100%);
    background-blend-mode: add;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }

  .header-revealer{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .header-revealer:after{
    content: "";
    position: absolute;
    top: 120px;
    left: 0;
    width: 110%;
    height: 110%;
    background: black;
  }

    /* MOBILE SUPPORT */

  @media screen and (max-width: 900px){
    header{
        position: fixed;
        width: 100%;
        top: 0;
        right: 0;
        z-index: 2000;
        
        align-items: center;
        justify-content: space-between;
        background: #3D3D3D;
        box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
        padding: 50px 10% 22px;
        
    }
    .logo{
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-color);
    }
    .navbar{
        display: flex;
    }
    .navbar a{
        font-size: 0.8rem;
        padding: 10px 20px;
        color: var(--text-color);
        font-weight: 500;
        transition: 0.5s ease-in-out;
        background: #3D3D3D;
        border-radius: 20px;
        background-image: linear-gradient(0,#3D3D3D 25%,#403a5a 50%,#8e36e0 75%,#e43561 86%,#fea623 100%);
        background-repeat: no-repeat;
        background-size: 100% 400%;
        background-position-y: 100%;
    }

    .Game_ContentBox_Wide{
        width: 100%;
        height: fit-content;
        text-align: justify;
        transition: 0.2s ease-in-out;
      }

      .GameDescription{
        align-self: center;
        text-align: center;
        font-size: 1rem;
        line-height: 1.2;
        font-weight: 300;
        color: var(--text-color);
        
    }

    .Interactive_Label_Box{
        width: 100%;
        height: 40px;
        transform-origin: center;
        overflow:hidden;
        background-color: #2C2C2A;
        background-image: linear-gradient(0,#2C2C2A 25%,#403a5a 50%,#8e36e0 75%,#e43561 86%,#fea623 100%);
        background-repeat: no-repeat;
        background-size: 100% 400%;
        background-position-y: 0%;
        z-index: 5;
        transform: scale(1);
        border-radius: 10px;
        box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
        transition: 0.2s  ease-in-out;
        display: flex;
        margin-bottom: 25px;
    }

    .Interactive_Label_Box .Icon_Text{
        line-height: 0.9;
        letter-spacing:normal;
        color: #2C2C2A;
        align-self:center;
        font-size: 15px;
        font-weight: 600;
        text-wrap: nowrap;
        padding-left: 20px;
        padding-right: 20px;
        transition: 0.2s ease-in-out;
    }
    
    .Interactive_Label_Box:hover .Icon_Text{
        color: #fff;
        transition: 0.2s ease-in-out;
    }

    .Icon{
        width: 30px;
        height: 30px;
        transform: translate(5px,5px);
    }

    .Label_Box{
        width: 100%;
        height: 40px;
        transform-origin: center;
        overflow:hidden;
        background-color: #2C2C2A;
        z-index: 5;
        border-radius: 10px;
        box-shadow: 0px 10px 25px rgb(0, 0, 0,0.5);
        transition: 0.2s  ease-in-out;
        display: flex;
        margin-bottom: 25px;
    }
    
    .Label_Box .Icon_Text{
        line-height: 0.9;
        letter-spacing:normal;
        color: white;
        align-self:center;
        font-size: 15px;
        font-weight: 600;
        text-wrap: nowrap;
        padding-left: 20px;
        padding-right: 20px;
        transition: 0.2s ease-in-out;
        
    }

    .Label_Separation {
        margin: 15px ;
        width: 2px;
    }

    .Game_ContentBox_Lateral{
        width: 100%;
        text-align: justify;
        display: flex;
        align-content: space-between;
        flex-direction: column-reverse;
        transition: 0.2s ease-in-out;
      }

      .AboutMe_Container{
        margin: 30px;
        display: flex;
        width: 85%;
        justify-content: center;
        transform: scale(1);
        transition: 0.2s ease-in-out;
        height: 600px;
        position: fixed;
    }

    
    .Grid_Container{
        padding-top: 80px;
        display:grid;
        flex-wrap: wrap;
        align-items:center;
        position: relative;
        justify-items: center;
        justify-content: center;
        margin: 80px 0 80px 0;
    }

    .AboutMe_Container:hover{
        transform: scale(1);
        transition: 0.2s ease-in-out;
    }

    .Content_Box{
        inset: -20px;
    }
    .Content_Box_Top{
        inset: -20px;
    }

    .Game_ContentBox_Small{
        width: 100%;
        height: fit-content;
        transition: 0.2s ease-in-out;
      }

      .Game_ContentBox_Small[data-media]{
        width: 100%;
        height: 80vw;
        transition: 0.2s ease-in-out;
      }

      .Game_Diorama{
        position:absolute;
        transform-origin: 50% 50%;
        width: 100%;
        height: auto;
        top: 0;
    }

    .GameTimelineBox{
        transform: translate(0,-10px);
        width: 33%;
        align-self:flex-start;
        text-align: center;
        align-content: center;
        font-size: 0.8rem;
        line-height: 1.2;
        font-weight: 300;
        color: var(--text-color);
    }

    .Game_ContentBox_Wide[data-media]{
        width: 280px;
        height: 45vw;
        text-align: justify;
        transition: 0.2s ease-in-out;
    }

    .GamePart_Text{
        margin: 10px;
        font-size: 1rem;
        line-height: 1.2;
        font-weight: 300;
        color: var(--text-color);
        
    }

    .Activity_Box{
        
        height: 40px;
        
        margin-top: 15px;
    }

    h1{
        font-size: 1.3rem;
    }

    .AboutMe_Separation {
        position: relative;
        background: rgba(255, 255, 255, 0.5);
        margin: 10px 0;
        height: 2px;
        width: 100%;
    }

    .GamePart_Video{

        transform-origin: center;
        z-index: 30;
        width: 100%;
        height: 100%;
    }

    .Game_Grid{
        transform: scale(1);
        margin: 30px;
        gap: 70px;
        grid-template-columns: auto;
        margin-bottom: 150px;
    }

    .Home_Container{
        padding-top: 80px;
        display: flex;
        flex-direction: column;
        position: relative;
        justify-items: center;
        justify-content: center;
        margin: 80px 0 0 0;
    }

    .AboutMe_Intro{
        width: 100%;
        height: 380px;
    }

    .AboutMe_Text{
        font-size: 1rem;
        
    }

    .Activity_Label_Box{
        width: fit-content;
        height: 40px;
        margin-top: 15px;
    }

    .Activity_Label_Box .Icon_Text{
       
        font-size: 15px;
        
    }

    .Contact_Box{
        width: 40px;
        height: 40px;
        
    }

    .Game_Box{
        width: 100%;
        height: 60vw;
        transform: scale(1);
        transition: 0.2s;
    }
    .Game_Box:hover{
        transform: scale(1);
        transition: 0.2s;
    }

    .Game_CapsuleBackLight{
        opacity: 0;
    }
    .Game_Box:hover .Game_CapsuleBackLight{
        opacity: 0;
    }

    .Icon_Box{
        width: 40px;
        height: 40px;
    
        
        
    }

    .Icon_List{
        position: fixed;
        display: flex;
        top: -10px;
        left: -10px;
        flex-direction: row;
    }

    .Game_Logo{
        position:absolute;
        transform-origin: 50% 50%;
        height: 100%;
        width: auto;
        top: 0;
        transform: translate(20%,10%) scale(1.1);
        transition: 0.2s ease-in-out;
        filter: drop-shadow(0px 5px 4px rgba(0,0,0,0.7));
        z-index: 0;
    }
  }