/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */



@font-face { font-family: 'Inter'; src: url('/fonts/inter-v20-latin-100.woff2') format('woff2'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-v20-latin-200.woff2') format('woff2'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-v20-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-v20-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-v20-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-v20-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-v20-latin-800.woff2') format('woff2'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-v20-latin-900.woff2') format('woff2'); font-weight: 900; font-style: normal; }





*{
    margin: 0;
    padding: 0;
    animation: 300ms ease-in;
    transition-duration: 300ms;
}

body{

    display: flex;
    flex-direction: column;

    width: 100vw;


    background-image: url("../img/neoclassicalBedroomLandscape.png");
    background-size: cover;
    background-position-y: bottom;

    background-position: center bottom;
    background-repeat: none;

    position: relative;
    overflow-x: hidden;

    
}

header{
    width: 100vw;
    height: 50vh;
    background: linear-gradient(
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.738) 19%,
  hsla(0, 0%, 0%, 0.541) 34%,
  hsla(0, 0%, 0%, 0.382) 47%,
  hsla(0, 0%, 0%, 0.278) 56.5%,
  hsla(0, 0%, 0%, 0.194) 65%,
  hsla(0, 0%, 0%, 0.126) 73%,
  hsla(0, 0%, 0%, 0.075) 80.2%,
  hsla(0, 0%, 0%, 0.042) 86.1%,
  hsla(0, 0%, 0%, 0.021) 91%,
  hsla(0, 0%, 0%, 0.008) 95.2%,
  hsla(0, 0%, 0%, 0.002) 98.2%,
  hsla(0, 0%, 0%, 0) 100%
);
    display: flex;;
    flex-direction: row;
    z-index: 2;
    position: absolute;

    overflow: hidden;
    

}

header a{
    font-weight: 100;
}


footer{
    height: 50vh;
    width: 100vw;
    

    position: absolute;
    top: 50vh;
    background: linear-gradient(
      to top,
      hsl(0, 0%, 0%) 0%,
      hsla(0, 0%, 0%, 0.738) 19%,
      hsla(0, 0%, 0%, 0.541) 34%,
      hsla(0, 0%, 0%, 0.382) 47%,
      hsla(0, 0%, 0%, 0.278) 56.5%,
      hsla(0, 0%, 0%, 0.194) 65%,
      hsla(0, 0%, 0%, 0.126) 73%,
      hsla(0, 0%, 0%, 0.075) 80.2%,
      hsla(0, 0%, 0%, 0.042) 86.1%,
      hsla(0, 0%, 0%, 0.021) 91%,
      hsla(0, 0%, 0%, 0.008) 95.2%,
      hsla(0, 0%, 0%, 0.002) 98.2%,
      hsla(0, 0%, 0%, 0) 100%
    );
    display: flex;

    bottom: 0;

    align-items: center;
    flex-direction: column;
    

}


#screen{
    height: 100vh;
    width: 100vw;

    position: absolute;

    background-color: rgba(0,0,0,0.5);
    pointer-events: none


}


h1,h2,h3,h4,h5,h6,a,p{
    
    font-family: "Inter", sans-serif;
    text-decoration: none;
    
}

#landingPage{
    width: 100vw;
    height: 100vh;
    background-image: url("../img/neoclassicalBedroomLandscape.png");
    background-size: cover;
    background-position-y: bottom;

    background-position: center bottom;
    background-repeat: none;
}


.headerLink{
    transition-duration:300ms;
    z-index: 10;

}
.headerLink:hover{
    padding-bottom: 0.5rem;
}


@keyframes fadeInLeft{
    from{
        opacity: 0;
        transform: translateX(-40px);
    } 
    to{
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-in-left{
    opacity: 0;
    animation: fadeInLeft 1s ease forwards;
}

@keyframes fadeOutLeft{
    from{
        opacity: 1;
        transform: translateX(0);
    } 
    to{
        opacity: 0;
        transform: translateX(-40px);
    }
}

.animate-to-left{
    opacity: 1;
    animation: fadeOutLeft 1s ease forwards;
}

@keyframes fadeInBottom{
    from{
        opacity: 0;
        transform: translateY(40px);

    } 
    to{
        opacity: 1;
        transform: translateY(0px);

    }
}

.animate-in-bottom{
    opacity: 0;
    animation: fadeInBottom 1s ease forwards;
    transform: translateY(40px);
    contain: paint;
    backface-visibility: hidden;
    will-change: transform;
}

@keyframes fadeInTop{
    from{
        opacity: 0;
        transform: translateY(-40px);
    } 
    to{
        opacity: 1;
        transform: translate(0);
    }
}

.animate-in-top{
    opacity: 0;
    animation: fadeInTop 1s ease forwards;
}

@keyframes fadeInRight{
    from{
        opacity: 0;
        transform: translateX(40px);
    } 
    to{
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-in-right{
    opacity: 0;
    animation: fadeInRight 1s ease forwards;
}

@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.fadeIn{
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

.activePage{

    border-bottom: 1px solid white;
    
}

.menu-btn {
    background: transparent;
    /* border: 2px solid cyan; */
    height: 2rem;
    width: 2rem;

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

    padding: 0;
    border: none;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: clamp(2rem, 8vw, 5rem);

    color: rgba(255,255,255,0.6);
    z-index: 1001;
}

.icon {
    width: 100%;
    height: 100%;
    display: block;
}

#menu-bar{
    margin-right: auto;
    box-sizing: content-box;
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow: visible;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    margin-left: 2rem;
    z-index: 1001;
    margin: 0;

    
}

#menu-bar a{
    position: relative;
    color: rgb(255,255,255);
    text-decoration: none;
    font-size: 1.5rem;
    margin-top: 4rem;
    z-index: 1002;
    font-weight: 200;
    opacity: 0;
    width: fit-content;
    
}


#screen.activeScreen {
    background-color: rgba(0,0,0,0.9);
    z-index: 1000;
    pointer-events: none
}

.activeLink{
    pointer-events: none
}

#menu-bar{
    pointer-events: none;
}

#menu-bar.open{
    pointer-events: auto;

}

@media (orientation: landscape){
    #menu-bar{
        display: none;
    }

    .menu-btn{
        display: none;
    }
}

@media (orientation: portrait){
    #menu-bar{
        display: flex;
    }

    
.menu-btn{
        display: flex;
    }
}