@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

:root {
    --background-color-dark: #1A2232;
    --background-color-dark-always: #1A2232;
    --background-color-darker: #121824;
    --background-color-darker-always: #121824;
    --background-color-transparent: rgba(255, 255, 255, 0);
    --color-white: #ffffff;
    --color-white-darker: #cfcfcf;
    --color-faded-white: #ffffff46;
    --color-faded-black: #00000046;
    --color-green: #149b4c;
    --color-red: #ff3131;
    --lutor-blue: #414A80;
    --lutor-light-blue: #414A80;
    --lutor-lighter-blue:rgb(103, 119, 209);
    --lutor-orange: #FF8900;

    --always-white-fade: rgba(255, 255, 255, 0.637);
    --always-white: white;
}

::selection {
    background-color: var(--lutor-light-blue);
    color: var(--lutor-orange);
  }

  ::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track (the area behind the scrollbar) */
  ::-webkit-scrollbar-track {
    background: #f1f1f113; 
    border-radius: 5px;
  }
  
  /* Handle (the draggable part of the scrollbar) */
  ::-webkit-scrollbar-thumb {
    background: #5561a8; 
    border-radius: 5px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #414A80; 
  }


body, html {
    margin: 0;
    padding: 0;
    background-color: var(--background-color-dark);
    color: var(--color-white);
    position: relative;
    width: 100vw;
    overflow: auto;
    scroll-behavior: smooth;
    overflow-x: hidden;

    transition: all 0.3s ease;
}



a {
    text-decoration: none; /* Removes the underline */
    color: inherit; /* Inherits the text color from the parent element */
    outline: none; /* Removes any outline (focus outline) */
  }
h1{
    pointer-events: none;
    user-select: none; 
}

#dots-container {
    position: absolute;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.dot {
    position: absolute;
    width: calc(0.12vh + 0.12vw);
    height: calc(0.12vh + 0.12vw);
    border-radius: 50%;
    background-color: var(--color-white);
    opacity: 0.1;
    transition: opacity 0.2s, transform 0.2s;
}











.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(3.4vh + 3.4vw);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    backdrop-filter: blur(calc(0.4vh + 0.4vw));
    -webkit-backdrop-filter: blur(calc(0.4vh + 0.4vw));
    z-index: 9999;
}

.highlight {
    background-color: yellow !important;
  }
#toggle-btn{
    background-color: var(--background-color-transparent);
    outline: none;
    border: none;

    transition: transform 0.3s ease;
}

.menu-icon, #toggle-icon {
    width: calc(1vh + 1vw);
    height: calc(1vh + 1vw);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.white-icon{
    filter: brightness(1);
}

#toggle-btn:active img{
    transform: rotate(360deg);
}

.center-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(1vh + 1vw);
}

.center-content span{
    color: var(--color-white);
    opacity: 0.7;

    transition: opacity 0.2s ease;
}

.center-content span:hover{
    opacity: 1;
}

.center-content span:active{
    opacity: 1;
    color: var(--lutor-orange);
}

.options {
    display: flex;
    cursor: pointer;
    font-size: calc(0.8vh + 0.8vw);
    font-weight: 200;
    gap: calc(0.8vh + 0.8vw);
}

.logo {
    width: calc(2.4vh + 2.4vw);
    height: calc(2.4vh + 2.4vw);
}




#menu{
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    width: auto;

    padding: calc(3vh + 3vw) calc(2vh + 2vw);

    z-index: 99999;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;

    background-color: var(--color-faded-black);
    backdrop-filter: blur(calc(0.4vh + 0.4vw));
    -webkit-backdrop-filter: blur(calc(0.4vh + 0.4vw));


    gap: calc(2.2vh + 2.2vw);

    overflow-x: hidden;

    overflow-y: auto;

    transition: all 0.3s ease;
}

#menu h1{
    font-size: calc(3vh + 3vw);
    font-weight: 900;
}


.menu-options{

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    text-align: start;

    gap: calc(1.2vh + 1.2vw);
}

.menu-option{
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    text-align: start;

    width: 100%;
}

.menu-option div:first-of-type{
    position: inherit;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: start;

    gap: calc(1.6vh + 1.6vw);

    width: 100%;
}

.menu-option img{
    right: calc(-0.7vh - 0.7vw);
    height: calc(0.6vw + 0.6vh);
    width: calc(0.6vw + 0.6vh);

    cursor: pointer;
    opacity: 0.6;

    transition: all 0.1s ease;

    cursor: pointer;
}

.menu-option img:hover{
    transform: rotate(90deg);
    opacity: 1;
}

.menu-option h2{
    font-size: calc(1vh + 1vw);
    font-weight: 200;

    color: var(--color-white);

    transition: all 0.1s ease;
    
    cursor: pointer;
    scale: 1;
}

.menu-option h3{
    font-size: calc(0.8vh + 0.8vw);
    font-weight: 150;
    margin-top: calc(0.6vh + 0.6vw);
    
    color: var(--color-white);

    margin-left: calc(0.2vh + 0.2vw);
}

.menu-option h4{

    font-size: calc(0.6vh + 0.6vw);
    font-weight: 100;

    margin-top: calc(0.2vh + 0.2vw);

    margin-left: calc(0.4vh + 0.4vw);

    color: var(--color-white-darker);
    transition: all 0.1s ease;

    cursor: pointer;
    scale: 1;
}

.menu-option h2:hover, .menu-option h4:hover{
    color: var(--lutor-orange);
}

.menu-option div:last-child{
    height: 0;

    overflow: hidden;
}

.menu-close{
    position: absolute;
    top: calc(1vw + 1vh);
    right: calc(1vw + 1vh);
    width: calc(1vw + 1vh);
    height: calc(1vw + 1vh);
    background-color: var(--background-color-transparent);

    transition: all 0.1s ease;
    
    cursor: pointer;
    scale: 1;
}

.menu-close:hover{
    scale: 1.1;
}


























#home {
    position: inherit;
    top: 0;
    width: 100vw;
    height: 100vh;
}

.subtitle {
    position: absolute;
    left: calc(-4vh - 4vw);
    top: 48vh;
    transform: rotate(90deg);
    letter-spacing: calc(0.1vh + 0.1vw);
    font-size: calc(0.7vh + 0.7vw);
    font-weight: 200;
    cursor:default;

}

.subtitle span{
    opacity: 0.3;
}

.subtitle span:hover{
    opacity: 1;
}

.button-container {
    position: absolute;
    right: 10px;
    top: 32vh;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button {
    background-color: var(--background-color-transparent);
    border: calc(0.1vh + 0.1vw) solid var(--color-white);
    border-radius: calc(0.3vh + 0.3vw);
    padding: calc(0.3vh + 0.3vw);
    margin: calc(0.3vh + 0.3vw);
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 1;

    transition: background-color 0.1s ease, padding 0.1s ease, border-radius 0.1s ease, scale 0.1s ease;
}


.button:hover {
    background-color: var(--background-color-dark);
    scale: 1.1;

    cursor: pointer;
}

.button:active{

    background-color: var(--lutor-orange);
    scale: 0.8;
}

.button img {
    width: calc(0.8vh + 0.8vw);
    height:  calc(0.8vh + 0.8vw);
}


#home-background{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    filter: drop-shadow(3px 5px 10px rgb(0 0 0 / 0.4));
    overflow: hidden;
}


#home h1{
    position: absolute;
    right: 50vw;
    top: calc(35vh + 5vw);
    transform: translate(50%,-50%);
    font-size: calc(7vh + 7vw);
    font-weight: 900;
    line-height: calc(6vh + 6vw);
}

































#about{
    position: inherit;
    padding-top: calc(3.4vh + 3.4vw);
    top: 0;
    width: 100vw;
    height: 100vh;
}

.about-content{
    position: absolute;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    gap: calc(3vh + 3vw);
}

.about-content h1{
    font-size: calc(3vh + 3vw);
    font-weight: 900;
    left: 50vw;
    top: calc(6vh + 6vw);
}

.about-content span{
    text-align: center;
    font-size: calc(0.7vh + 0.7vw);
    font-weight: 200;
    left: 50vw;
    top: 50vh;
    width: calc(30vh + 30vw);
}

.about-buttons{
    width: calc(37vh + 37vw);
    height: calc(3vh + 3vw);
    left: 50vw;
    bottom: calc(7vh + 8vw);

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    gap: calc(3vh + 3vw);
}

.about-buttons button{
    padding:  calc(0.28vh + 0.28vw) calc(1vh + 1vw);
    font-size: calc(0.8vh + 0.8vw);
    font-weight: 300;
    cursor: pointer;
    border-radius: calc(0.1vh + 0.1vw);
    border: 2px solid var(--color-white);
}

.about-buttons button:first-of-type{
    background: var(--lutor-orange);
    border-color: var(--lutor-orange);

    transition: all 0.3s ease;
}

.about-buttons button:last-of-type{
    background: none;
    color: var(--color-white);

    transition: all 0.3s ease;
}

.about-buttons button:hover{
    background: var(--background-color-dark);
    color: var(--lutor-orange);
    border-color: var(--lutor-orange);
    font-weight: 900;
    padding:  calc(0.25vh + 0.25vw) calc(0.5vh + 0.5vw);
}


.fading-line {
    position: absolute;
    width: calc(30vh + 30vw);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-faded-white), transparent);
}

.about-side{
    position: absolute;
    top: 50vh;
    color: var(--color-faded-white);

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    gap: 2vh;
    transform: translateY(-50%);
}
.about-side h2{
    font-size:  2.7vh;
    font-weight: 200;
    text-align: center;
}

.about-side div{
    width: 60vh;
    height: 1px;
    background-color: var(--color-faded-white);
}


.about-welovechallanges{
    position: absolute;
    right: 0;
    bottom: calc(1.2vh + 1.2vw);
    width: calc(15vh + 15vw);
    height: calc(0.4vh + 0.4vw);

    border-bottom: calc(2vh + 2vw) solid var(--lutor-orange);
    border-left: calc(2vh + 2vw) solid transparent;    
    
    text-align: center;
    line-height: calc(2vh + 2vw);

    padding-right: calc(0.4vh + 0.4vh);

    transition: width 0.3s ease-in-out;
}

.about-welovechallanges h3{
    font-weight: 400;
    font-size: calc(0.75vh + 0.75vw);
    color: var(--always-white);

    pointer-events: none;
    transition: font-weight 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

.about-welovechallanges:hover{
    width: calc(15.6vh + 15.6vw);
}

.about-welovechallanges:hover h3 {
    font-weight: 900;
    font-size: calc(0.75vh + 0.75vw);
}




















#projects{
    position: inherit;
    top: 0;
    width: 100vw;
    height: 100vh;
    padding: calc(6vh + 6vw) 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;


}

.projects-title{
    position: inherit;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: calc(-2vh + -2vw);
    margin-bottom:calc(1vh + 1vw);

}
.projects-title h1{
    font-size: calc(2.5vh + 2.5vw);
    font-weight: 900;
    color: var(--color-white);
}
.projects-title h2{
    font-size: calc(0.65vh + 0.65vw);
    font-weight: 200;
    letter-spacing: calc(0.08vh + 0.08vw);
    color: var(--lutor-orange);
}

.projects{

    display: flex;

    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    position: inherit;

    gap: calc(0.4vh + 0.4vw);

}

.games, .assets{
    position: inherit;
    width: 100%;
    overflow: hidden;

    display: flex;
    align-items: flex-start; /* Align items to the top */

    gap: calc(0.3vh + 0.3vw);
}
.games h3, .assets h3{
    display: none;
}

.work, .more-work{
    position: inherit;

    width: calc(8.5vh + 8.5vw);
    height: calc(8vh + 8vw);

    overflow: hidden;    
    cursor: pointer;
}

.work-icon, .work-fade, .work-fade-static{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-fade-static{
    background-image: radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.568), rgba(5, 33, 66, 0.541), rgba(4, 54, 103, 0), rgba(4, 54, 103, 0));
}

.work-fade {
    background-image: radial-gradient(circle at bottom left, rgb(1, 20, 39), rgb(0, 11, 22));
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .work-fade:hover {
    opacity: 0.8;
  }


.work-text{
    position: absolute;
    
    left: calc(0.4vh + 0.4vw);
    bottom: calc(2vh + 2vw);

    height: calc(1.4vh + 1.4vw);
    transition: height 0.3s ease;

    overflow: hidden;

    pointer-events: none;
}

.work-fade:hover ~ .work-text { 
    height: calc(5vh + 5vw);
}

.work-text h1{
    font-size: calc(1vh + 1vw);
    color: var(--lutor-orange);
}
.work-text h2{
    font-size: calc(0.7vh + 0.7vw);
    font-weight: 200;
    color: var(--always-white);
}

.work-social{
    position: absolute;

    left: calc(0.4vh + 0.4vw);
    bottom: calc(0.4vh + 0.4vw);

    display: flex;

    gap: calc(0.4vh + 0.4vw);
}

.work-social button{
    background-color: var(--background-color-transparent);
    cursor: pointer;
    outline: none;
    border: none;
    scale: 1;

    transition: scale 0.2s ease;
}

.work-social button:hover{
    scale: 1.2;
}

.work-social img{
    width: calc(1.2vh + 1.2vw);
    height: calc(1.2vh + 1.2vw);
}




.more-work{
    position: inherit;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    outline: none;
    border: none;

    background-color: var(--lutor-orange);

    opacity: 0.8;

    transition: opacity 0.3s ease;
    
    cursor: pointer;

    overflow: hidden;
}

.more-work div{
    position: inherit;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.more-work .more-icon-rotate{
    position: absolute;
    left: 0;
    top: 0;

    width: 38%;
    margin: 7%;

    transform: rotate(0deg);

    transition: transform 1s ease;
}

.more-work .more-icon-move{
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;

    transition: top 0.3s ease-in;
}

.more-work:hover{
    opacity: 1;
}

.more-work:hover .more-icon-rotate{
    transform: rotate(360deg);
}


.more-work:hover .more-icon-move{
    top: calc(-0.4vh - 0.4vw);;
}

.more-work:hover .more-icon-background{
    animation: hoverEffect 1s ease-in-out forwards;
}


@keyframes hoverEffect {
    0% {
        opacity: 0.15;
        scale: 1;
    }
    50% {
        opacity: 0.3;
        scale: 1.1;
    }    
    100% {
        opacity: 0.15;
        scale: 1;
    }
}

.more-icon-background{
    position: absolute;
    width: 100%;
    opacity: 0.15;

    scale: 1;

    transition: scale 0.3s ease, opacity 0.3s ease; 
}

.more-icon{
    width: calc(4vh + 4vw);
}

.more-work h1{
    font-size: calc(2vh + 2vw);
    color: var(--always-white);

}

.more-work h2{
    font-size: calc(0.5vh + 0.5vw);
    font-weight: 200;
    margin-bottom: calc(-0.4vh - 0.4vw);
    color: var(--always-white-fade);
}

.assets .more-work{
    background-color: var(--lutor-lighter-blue);
}
















#team{
    position: inherit;
    top: 0;
    width: 100vw;
    height: 100vh;
    padding: calc(6vh + 6vw) 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.team-title{
    position: inherit;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: calc(-2vh + -2vw);
}

#team h1{
    font-size: calc(2.5vh + 2.5vw);
    font-weight: 900;
}

#team h2{
    font-size: calc(0.55vh + 0.55vw);
    font-weight: 250;

    color: var(--lutor-orange);

    letter-spacing: calc(0.12vh + 0.12vw);
}


.founders{
    position: inherit;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin-top: calc(3vh + 3vw);
    width: 100vw;
    gap: calc(4.8vh + 4.8vw);

    z-index: 20;
}

.founder{
    width: calc(8vh + 8vw);

    position: inherit;
}

.founder-content{    
    position: inherit;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    width: 100%;


    padding: calc(0.12vh + 0.12vw);
    background-color: var(--lutor-orange);
}

.founder-image{
    width: 100%;
}

.founder-socials{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    bottom: 0;
    left: 0;

    width: calc(1.8vh + 1.8vw);

    padding: calc(0.12vh + 0.12vw);

    gap: calc(0.1vh + 0.1vw);

    background-color: var(--lutor-orange);
}

.founder-social{
    width: 100%;
    height: 100%;
    background-color: var(--background-color-darker-always);

    border: none;
    outline: none;

    padding: calc(0.4vh + 0.4vw);

    transition: all 0.1s ease;

    cursor: pointer;
}

.founder-social:hover{
    background-color: var(--background-color-dark);
    padding: calc(0.3vh + 0.3vw);
}

.founder-social img{
    width: 100%;
    height: 100%;

    filter: brightness(0) invert(1);

    transition: all 0.1s ease;
}

.founder-social:hover img {
    filter: brightness(1);
}

.founder-info {
    position: inherit;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.founder-info h3{
    color: var(--lutor-orange);
    font-size: calc(1.2vh + 1.2vw);
    font-weight: 900;

    text-shadow: 
    calc(-0.1vh - 0.1vw) calc(-0.1vh - 0.1vw) 0 var(--background-color-dark),  
    calc(0.1vh + 0.1vw) calc(-0.1vh - 0.1vw) 0 var(--background-color-dark),
    calc(-0.1vh - 0.1vw) calc(0.1vh + 0.1vw) 0 var(--background-color-dark),
      calc(0.1vh + 0.1vw) calc(0.1vh + 0.1vw) 0 var(--background-color-dark);
}

.founder-info h4{
    color: var(--color-faded-white);
    font-size: calc(0.6vh + 0.6vw);
    font-weight: 300;
}
.team-career{
    
    background-color: var(--color-faded-black);
    outline: none;
    border: none;
    padding: calc(0.4vh + 0.4vw) calc(1vh + 1vw);
    margin-top: calc(2vh + 2vw);

    font-size: calc(0.8vh + 0.8vw);

    color: var(--color-white);

    border: calc(0.06vw + 0.06vw) solid var(--color-white);

    border-radius: calc(0.1vw + 0.1vw);

    font-weight: 400;

    cursor: pointer ;

    z-index: 999;

    transition: all 0.1s ease;

}

.team-career:hover{
    background-color: var(--background-color-darker);
    border: calc(0.06vw + 0.06vw) solid var(--lutor-orange);
    color: var(--lutor-orange);
    font-weight: 900;
}
#team h5{
    position: absolute;
    left: 50%;
    bottom: calc(8.5vh + 8.5vw);

    transform: translateX(-50%);

    font-size: calc(11vh + 11vw);
    font-weight: 900;

    letter-spacing: 3px;

    color: var(--background-color-dark);
    text-shadow: 
    calc(-0.08vh - 0.08vw) calc(-0.08vh - 0.08vw) 0 var(--color-white),  
    calc(0.08vh + 0.08vw) calc(-0.08vh - 0.08vw) 0 var(--color-white),  
    calc(-0.08vh - 0.08vw)  calc(0.08vh + 0.08vw) 0 var(--color-white),  
    calc(0.08vh + 0.08vw)  calc(0.08vh + 0.08vw) 0 var(--color-white);
    z-index: 10;

    opacity: 0.5;
}

























#contact{
    position: inherit;
    width: 100vw;
    height: 100vh;
    padding-top: calc(3.1vh + 3.1vw);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}



.contact-info{
    position: inherit;

    height: calc(17.9vh + 17.9vw);
    width: calc(19.9vh + 19.9vw);
}

.contact-info h2{
    font-size: calc(2.46vh + 2.46vw);
}

.contact-info div{
    position: absolute;
    transform: rotate(90deg);
    height: calc(0.08vh + 0.08vw);
    width: calc(12.8vh + 12.8vw);
    left: calc(-6vh - 6vw);;
    top: calc(9.6vh + 9.6vw);
    background-color: var(--lutor-orange);
}


.contact-info h3{
    margin-top: calc(1.5vh + 1.5vw);;
    font-size: calc(1.02vh + 1.02vw);
    color: var(--color-faded-white);
    margin-left: calc(1.1vh + 1.1vw);
}
.contact-info h4{
    font-size: calc(0.86vh + 0.86vw);
    margin-left: calc(1.1vh + 1.1vw);
    font-weight: 200;
}


.contact-title{
    display: none;
}









.contact-form{
    position: inherit;

    padding: calc(2vh + 2vw) calc(3vh + 3vw);
    width: auto;
    height: auto;

    

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: calc(1.5vh + 1.5vw);

    z-index: 999;
}

.contact-form-border-cube{
    position: absolute;
    width: calc(2.7vh + 2.7vw);
    height: calc(2.7vh + 2.7vw);

    border: 3px solid var(--lutor-orange);
    background-color: var(--background-color-dark);
}

.contact-form-body{
    position: absolute;
    width: 90%;
    height: 90%;
    background-color: var(--background-color-dark);

    border: 1px solid var(--color-faded-white);
    border-radius: calc(0.3vh + 0.3vw);
}


.contact-form h2{
    position: absolute;

    width: calc(10vh + 10vw);
    font-size: calc(1.4vh + 1.4vw);;

    top: 0;
    left: 50%;
    transform: translateX(-50%);

    background-color: var(--background-color-dark);
}

.contact-form-inputs{
    width: auto;
    transform: translate(0, 0);
}

.contact-form-inputs div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    opacity: 0.3;
    transition: all 0.1s ease;
}

.contact-form-inputs div:hover{
    opacity: 1;
}
.contact-form-inputs div:focus-within{
    opacity: 1;
}
.contact-form-inputs h3{
    font-size: calc(0.5vh + 0.5vw);
    font-weight: 400;
    color: var(--color-white);
    margin-top: calc(0.9vh + 0.9vw);
}

.contact-form-inputs input, textarea{
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-white);
    background-color: var(--background-color-transparent);
    color: var(--color-white);
    resize: none;
    font-size: calc(0.54vh + 0.54vw);
    width: calc(12vh + 12vw);

    transition: all 0.1s ease;
}

.contact-form-inputs textarea{
    font-size: calc(0.46vh + 0.46vw);
    height: calc(3.2vh + 3.2vw);
}

.contact-form-inputs input:hover, textarea:hover{
    outline: none;
    background-color: var(--background-color-darker);
}

.contact-form-inputs input:focus, textarea:focus{
    outline: none;
    background-color: var(--background-color-darker);
}

.contact-form button{
    transform: translateX(0);

    background-color:var(--lutor-orange);
    border: none;

    width: auto;

    color: var(--color-white);

    font-size: calc(0.86vh + 0.86vw);
    font-weight: 400;

    padding: calc(0.4vh + 0.4vw) calc(1.1vh + 1.1vw);

    border-radius: calc(0.1vh + 0.1vw);
    
    transition: all 0.3s ease;

    cursor: pointer;

}

.contact-form button:hover{
    border-radius: calc(0.2vh + 0.2vw);
    font-weight: 900;
    background-color: var(--background-color-darker);
    color: var(--color-white);
    transition: all 0.1s ease;
}

.contact-form button:active{
    font-weight: 100;
}
















#bottom{
    position: inherit;

        
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    align-items: flex-start;

    width: 100vw;
    height: auto;

    background-color:  var(--background-color-darker);
    
    filter: drop-shadow(3px 5px 10px rgb(0 0 0 / 0.4));
    
    padding:  calc(1.2vh + 1.2vw) calc(6.8vh + 6.8vw);
}




.bottom-left{
    height: 100%;

    position: inherit;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.bottom-logo{
    
    display: flex;
    flex-direction: row;
    justify-content: flex-start; 
    align-items: center;

}

.bottom-logo img{
    height: calc(3.3vh + 3.3vw);
}

.bottom-logo div{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items:start;

    
    margin-bottom: calc(0.5vh + 0.5vw);
}

.bottom-logo h1{
    font-weight: 900;
    font-size: calc(2vh + 2vw);
    color: var(--lutor-orange);

    margin-bottom: calc(-0.5vh - 0.5vw);;
}

.bottom-logo h2{
    font-weight: 200;
    font-size:calc(1vh + 1vw);
    letter-spacing: calc(0.4vh + 0.4vw);
    padding-left: calc(0.2vh + 0.2vw);
}

.bottom-contactinfo h2{
    font-weight: 250;
    font-size:  calc(0.6vh + 0.6vw);

    margin-top: calc(0.2vh + 0.2vw);
    scale: 1;

    cursor: pointer;

    transition: all 0.1s ease;
}

.bottom-contactinfo h2:hover{
    color: var(--lutor-orange) ;
    scale: 1.01;
}



.bottom-right{
    width: 100%;
    height: 100%;

    
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}


.bottom-lists{
    display: flex;
    flex-direction: row;
    justify-content: flex-start; 
    align-items: flex-start;

    
    gap: calc(1.4vh + 1.4vw);
}

.bottom-lists h1{
    font-weight: 600;
    font-size: calc(1vh + 1vw);
}

.bottom-lists h2{
    font-weight: 200;
    font-size: calc(0.5vh + 0.5vw);
    margin-top: calc(0.4vh + 0.4vw);

    transition: all 0.1s ease;

    scale: 1;

    cursor: pointer;
}

.bottom-lists h2:hover{
    color: var(--lutor-orange);
    scale: 1.1;
}





.social-lists{
    
    display: flex;
    flex-direction: row;
    justify-content: flex-start; 
    align-items: flex-start;

    gap: calc(0.7vh + 0.7vw);

}

.social-lists div{
    
    width: calc(7vh + 7vw);
}

.social-lists h1{
    font-size: calc(0.8vh + 0.8vw);

    font-weight: 400;

    margin-bottom: calc(0.4vh + 0.4vw);
}

.social-lists button{
    margin-top: calc(0.1vh + 0.1vw);
    margin-right: calc(0.1vh + 0.1vw);
    
    background-color: var(--background-color-transparent);
    outline: none;
    border: none;

    scale: 1;

    transition: all 0.1s ease;

    cursor: pointer;
}

.social-lists button:hover{
    scale: 1.1;
}

.social-lists img{
    width: calc(1.2vh + 1.2vw);
}














.contact-form-sent {
    position: fixed;
    top: calc(4vw + 4vh);
    right: calc(1vw + 1vh);

    background-color: var(--background-color-darker);
    border-radius: calc(0.4vh + 0.4vw);
    padding: calc(0.3vh + 0.3vw) calc(0.5vh + 0.5vw);
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;

    gap: calc(0.4vh + 0.4vw);

    z-index: 10000;
    opacity: 1;

    animation: slide-in 1s ease-out forwards;

    transition: all 1s ease;
}

.contact-form-sent.fade-out {
    animation: slide-out 1s ease-out forwards;
    transition: all 5s ease;
}

@keyframes slide-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.contact-form-sent.fade-out {
    opacity: 0;
}

.contact-form-sent h3 {
    font-size: calc(0.6vh + 0.6vw);
    font-weight: 600;
    color: var(--color-white);
    text-align: left;
    max-width: 20vw;
}
.contact-form-sent a{
    font-weight: 900;
    background-color: var(--background-color-transparent);

    transition: all 0.3s ease;
    
}

.contact-form-sent a:hover{
    color: var(--lutor-orange);
    background-color: var(--color-white);
}
.red {
    background: var(--color-red);
}

.green {
    background: var(--color-green);
}



#video-player-container {
    position: fixed; 
    top: 0;
    width: 100vw;
    height: 100vh;
    
    z-index: 999999; 

    background-color: var(--color-faded-black);
    backdrop-filter: blur(calc(1vh + 1vw));
    -webkit-backdrop-filter: blur(calc(1vh + 1vw));

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    overflow-y: auto;
    overflow-x: hidden;

    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

#video-player-container.active {
    opacity: 1;
    pointer-events: auto;
}

#video-player-container.fade-out {
    opacity: 0;
    pointer-events: none;
}

#video-player-container .close{
    position: absolute;
    top: calc(1vw + 1vw);
    right: calc(1vw + 1vh);

    height: calc(1.2vw + 1.2vh);
    width: calc(1.2vw + 1.2vh);
}

#video-player-container h1{
    font-size: calc(4vw + 4vh);
    font-weight: 900;
}

#video-player-container h2{
    font-size: calc(0.6vw + 0.6vh);
    font-weight: 400;

    width: calc(30vw + 30vh);
    max-width: 90%; 
    text-align: left;
}

#video-player-container div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;

    gap: calc(0.3vh + 0.3vw);
}

#video-player-container button{

    width: calc(2.5vw + 2.5vh);
    height: calc(2.5vw + 2.5vh);

    margin: calc(0.4vh + 0.4vw);

    background-color: var(--background-color-transparent);
    cursor: pointer;
    outline: none;
    border: none;
    scale: 1;

    transition: scale 0.2s ease;
}

#video-player-container button img{
    width: 100%;
    height: 100%;
}

#video-player-container button:hover{
    scale: 1.2;
}

#video-player-container h3{
    font-size: calc(0.6vh + 0.6vw);
    margin-bottom: calc(0.3vh + 0.3vw);
}

#youtube-player{
    width: calc(30vw + 30vh); 
    height: auto;
    max-width: 90%; 
    aspect-ratio: 16/9;

    margin: calc(1vw + 1vh);
}





@media (max-width: 1200px) {


    .dot {
        width: calc(0.16vh + 0.16vw);
        height: calc(0.16vh + 0.16vw);
    }


    .top-bar{
        padding-top: calc(1vh + 1vw);
    }
    .options{
        display: none;
    }
    
    .logo {
        width: calc(3vh + 3vw);
        height: calc(3vh + 3vw);
    }

    .menu-icon, #toggle-icon {
        width: calc(1.5vh + 1.5vw);
        height: calc(1.5vh + 1.5vw);
    }





    #menu{
        width: 100vw;

        background-color: var(--background-color-darker);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #menu h1{
        font-size: 15vw;
    }

    .menu-options{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .menu-option{
        width: auto;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .menu-option div:first-of-type{
        gap: 0;
        width: auto;
    }
    .menu-option img{
        position: absolute;
        right: calc(-1.8vh - 1.8vw);
        height: calc(1.2vw + 1.2vh);
        width: calc(1.2vw + 1.2vh);
    }

    .menu-option h2{
        font-size: 7vw;
        font-weight: 600;
    }
    
    .menu-option h3{
        font-size: 6vw;
        font-weight: 400;
        margin-top: 3vw;
    }
    
    .menu-option h4{
        font-size: 5vw;
        font-weight: 200;
        color: var(--color-white-darker);
        margin-top: 1vw;
    }

    .menu-close{
        position: absolute;
        top: calc(2vw + 2vh);
        right: calc(2vw + 2vh);
        width: calc(2vw + 2vh);
        height: calc(2vw + 2vh);
        background-color: var(--background-color-transparent);
    }





    
    #home h1{
        top: calc(18vh + 18vw);
        font-size: calc(5vh + 5vw);
        line-height: calc(5vh + 5vw);
    }

    .button-container {
        position: absolute;
        
        left: 50vw;
        top: calc(26vh + 26vw);
        transform: translate(-50%, -50%);

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        padding: 0 calc(1vh + 1vw);

        gap: calc(2vh + 2vw);
    }

    .button img {
        width: calc(1.9vh + 1.9vw);
        height:  calc(1.9vh + 1.9vw);
    }






    .about-content {
        width: calc(25vh + 25vw);
        max-width: 90vw;
    }

    .about-content h1{
        text-align: left;
        width: 100%;
        font-size: calc(3vh + 3vw);
        font-weight: 900;
        left: 50vw;
        top: calc(6vh + 6vw);
    }

    .about-content span{
        text-align: left;
        font-size: calc(1.2vh + 1.2vw);
        font-weight: 200;
        left: 50vw;
        top: 50vh;
        width: 100%;
    }

    .about-side{
        position: absolute;
        top: 50vh;
        color: var(--color-faded-white);
    
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    
        gap: 2vh;
        transform: translateY(-50%);
    }
    .about-side h2{
        font-size:  calc(1vh + 1vw);
        font-weight: 200;
        text-align: center;
    }
    
    .fading-line{
        display: none;
    }


    .about-buttons {
        width: 100%;
        height: calc(3vh + 3vw);
        left: 50vw;
        bottom: calc(7vh + 8vw);

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .about-buttons button{
        padding:  calc(0.28vh + 0.28vw) calc(1vh + 1vw);
        font-size: calc(1.3vh + 1.3vw);
        font-weight: 300;
        cursor: pointer;
        border-radius: calc(0.1vh + 0.1vw);
        border: 2px solid var(--color-white);
    }
    
    .about-buttons button:first-of-type{
        background: var(--lutor-orange);
        border-color: var(--lutor-orange);
    
        transition: all 0.3s ease;
    }
    
    .about-buttons button:last-of-type{
        background: none;
        color: var(--color-white);
    
        transition: all 0.3s ease;
    }



    











    #projects{
        position: inherit;
        top: 0;
        width: 100vw;
        height: auto;
        padding: calc(6vh + 6vw) 0;
    
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    
    .projects-title{
        position: inherit;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        margin-top: calc(-2vh + -2vw);
        margin-bottom:calc(1vh + 1vw);
    }
    .projects-title h1{
        font-size: calc(2.5vh + 2.5vw);
        font-weight: 900;
        color: var(--color-white);
    }
    .projects-title h2{
        font-size: calc(0.65vh + 0.65vw);
        font-weight: 200;
        letter-spacing: calc(0.08vh + 0.08vw);
        color: var(--lutor-orange);
    }
    
    .projects{
    
        display: flex;
    
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    
        position: inherit;

        width: 100%;
        
        padding: 0 calc(3vh + 3vw);
        gap: calc(1.2vh + 1.2vw);
    }




    
    .games, .assets{
        position: inherit;
        width: 100%;
        overflow: hidden;
    
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;;
    
        gap: calc(1.5vh + 1.5vw);
    }



    .games h3, .assets h3{
        display:inline-flex;
        font-size: calc(2vh + 2vw); 
        font-weight: 300;
        margin-bottom: 0;
    }
    


    .work, .more-work{
        position: inherit;
    
        width: 100%;
        height: 100%;
    
        overflow:visible;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;

        gap: calc(1vh + 1vw);
    }

    .work-fade, .work-fade-static{
        display: hidden;
    }

    .work-icon{
        position: inherit;
        left: 0;
        top: 0;
        width: calc(6vh + 6vw);
        object-fit: cover;
    }
    
    .work-fade-static{
        background-image: var(--background-color-transparent);
    }
    
    .work-fade {
        background-image: var(--background-color-transparent);
        opacity: 0;
      }
      
      .work-fade:hover {
        opacity: 0;
      }
    
    
    .work-text{
        position: inherit;
        
        left: 0;
        bottom: 0;

        padding-top: calc(0.4vh + 0.4vw);
        padding-right: calc(1.3vh + 1.3vw);
    
        height: 100%;
        width: 100%;
        transition: height 0.3s ease;
    
        overflow: hidden;
    
        pointer-events: none;

    }
    
    .work-fade:hover ~ .work-text { 
        height: 100%;
    }
    
    .work-text h1{
        font-size: calc(1.2vh + 1.2vw);
        color: var(--lutor-orange);
    }
    .work-text h2{
        font-size: calc(0.8vh + 0.8vw);
        font-weight: 200;
        color: var(--color-white);

        margin-top: calc(0.4vh + 0.4vw);
    }
    
    .work-social {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;

        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-end;

        gap: calc(1vh + 1vw);
        padding: calc(0.8vh + 0.8vw);

        border-top: 1px solid var(--color-faded-white);
    }
    
    .work-social button{
        background-color: var(--background-color-transparent);
        cursor: pointer;
        outline: none;
        border: none;
        scale: 1;
    
        transition: scale 0.2s ease;
    }
    
    .work-social button:hover{
        scale: 1.2;
    }
    
    .work-social img{
        width: calc(1.4vh + 1.4vw);
        height: calc(1.4vh + 1.4vw);
    }
    
    
    
    
    .more-work{
        position: inherit;
    
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        height: 100%;

        padding: calc(1vh + 1vw);
    
        background-color: var(--lutor-orange);
    
        opacity: 1;
    
        transition: opacity 0.3s ease;
        
        cursor: pointer;
        overflow: hidden;

    }

    .work{
        background-color: var(--color-faded-black);
    }

    .more-icon{
        width: calc(3vh + 3vw);
    }
    .more-work h2{
        display: none;
    }








    #team{
        position: inherit;
        height: auto;
    }

    .founders{
        flex-direction: column;
        align-items: flex-start;

        padding-left: calc(3vh + 3vw);
        padding-right: calc(6vh + 6vw);
    }
    .founder{
        display: flex;
        flex-direction: row;
        width: auto;

        gap: calc(1.5vh + 1.5vw);
    }
    .founder-content{    
        flex-direction: row;
        justify-content: flex-start;

        padding: 0;

        width: calc(12vh + 12vw);

        background-color: var(--background-color-transparent);
    }
    .founder-socials{
        left: auto;
        flex-direction: row;
        
        width: auto;
        height: calc(3.5vh + 3.5vw);
        right: calc(-1.5vh - 1.5vw);

        transform: translateX(100%);

        background-color: var(--background-color-darker);

        padding: calc(0.4vh + 0.4vw);
        gap: calc(0.6vh + 0.6vw);

        z-index: 1000;
    }

    .founder-social{
        background-color: var(--background-color-dark-always);
    }

    .founder-info{
        width: calc(15vh + 15vw);
    }
    .founder-info h3{
        font-size: calc(1.8vh + 1.8vw);
        font-weight: 600;
    }    
    .founder-info h4{
        font-size: calc(1.2vh + 1.2vw);
        font-weight: 300;
    }
    
    .team-career{
        font-size: 5vw;
        margin-top: calc(5vw + 5vh);
    }

    #team h5 {
        right: 0;
        left: auto;
        top: 0;
        bottom: auto;

        transform: translate(0, 0);

        font-size: calc(8vh + 8vw);
        writing-mode: vertical-lr;
        text-orientation: sideways;

        display: flex;
        align-items: center;
        justify-content: center;

        text-shadow: 
        calc(-0.04vh - 0.04vw) calc(-0.04vh - 0.04vw) 0 var(--color-white),  
        calc(0.04vh + 0.04vw) calc(-0.04vh - 0.04vw) 0 var(--color-white),  
        calc(-0.04vh - 0.04vw)  calc(0.04vh + 0.04vw) 0 var(--color-white),  
        calc(0.04vh + 0.04vw)  calc(0.04vh + 0.04vw) 0 var(--color-white);
        z-index: 10;
    }









    #contact{
        flex-direction: column;
        justify-content: flex-start;
        gap: calc(6vh + 6vw);

        padding: calc(6vh + 6vw) calc(3vh + 3vw);

        font-size: calc(2vh + 2vw);

        height: auto;
    }

    .contact-info{
        display: none;
    }

    .contact-title{
        display: flex;
        width: 100%;
    }

    .contact-form{
        padding: 11vw 11vw;
        gap: 6vw;
    }    
    
    .contact-form button{
        font-size: 5vw;
    }
    .contact-form h1{
        font-size: 6vw;
        width: 43vw;
    }

    .contact-form-body{
        position: absolute;
        width: 90%;
        height: 90%;

        border-radius: 2vw;
    }


    .contact-form-inputs{
        width: 62vw;
    }
    
    .contact-form-inputs h2{
        font-size: 3vw;
        margin-top: calc(0.9vh + 0.9vw);
    }
    
    .contact-form-inputs input, textarea{
        width: 100%;
        font-size: 4vw;
    }
    
    .contact-form-inputs textarea{
        font-size: 4vw;
        height: 32vw;
    }

    .contact-form-border-cube{
        width: 15vw;
        height: 15vw;
    
        border: 0.4vw solid var(--lutor-orange);
        background-color: var(--background-color-dark);
    }


    .contact-form-sent{
        top: calc(5vw + 5vh);
    }
    .contact-form-sent h3 {
        font-size: 4vw;
        max-width: 80vw;
    }

    #bottom {
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        gap: 10vw;
        padding: 5vw;


        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}