@import url('https://fonts.googleapis.com/css2?family=Alata&family=Climate+Crisis&display=swap');

:root {
    --darknavy: #282B3C;
    --darkblue: #2941C9;
    --darkblue1: #4b2acf;
    --lightviolet: #8A9BFF;
    --lighterviolet: #CED5FC;
    --lighttext: #8F8F8F;
    --darktext: #5B5B5B;
    --newwhite: #eeeeee;
    --beigeyellow: #FFF2CF;
    --coral: #ff7f7f;
    --check: rgb(0, 179, 111);
    --hugeheader: 150px;
    --largeheader: 90px;
    --biggerheader: 70px;
    --bigheader: 50px;
    --smallheader: 22px;
    --text: 18px;
    --textheight: 40px;
    --textheight1: 25px;
}

body {
    background: var(--darknavy);
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: opacity .5s;
}

/* width */
::-webkit-scrollbar {
    width: 4px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--newwhite);
    border-radius: 20px;

  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--lightviolet);
  }

.all {
    position: absolute;
    height: 95%;
    width: 98%;
    top: 2.5%;
    border-radius: 20px;
    z-index: -100;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}
#menu-links {
    display: flex;
    justify-content: center;
    align-items: center;
}
#menu-home, #menu-about, #menu-projects {
    font-family: "Climate Crisis";
    color: var(--darknavy);
    margin-left: 30px;
    margin-right: 30px;
    font-size: var(--smallheader);
    border-bottom: 4px solid transparent;
    transition: 0.2s;
}
#menu-home:hover, #menu-about:hover, #menu-projects:hover {
    color: var(--darkblue);
    cursor: pointer;
}


#menu-burger {
    display: none;
}

#overlay-menu {
    margin-top: -50px;
    opacity: 0;
    width: 800px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    position: fixed;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    background: var(--newwhite);
    transition: 0.2s;
}

@media only screen and (max-width: 1024px) {
    :root {
        --hugeheader: 130px;
        --largeheader: 100px;
        --biggerheader: 90px;
        --bigheader: 65px;
        --smallheader: 50px;
        --text: 40px;
        --textheight: 70px;
        --textheight1: 60px;
    }
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .all {
        height: 95%;
        width: 95%;
        left: 2.5%;
        overflow: hidden;
    }
    #menu {
        flex-direction: column;
        align-items: end;
        justify-content: start;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
    }
    #menu-burger {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        margin-right: 25px;
        margin-top: 50px;
        position: relative;
        transition: 0.2s;
        z-index: 1000;
    }
    #menu-burger-1, #menu-burger-2, #menu-burger-3 {
        width: 120px;
        height: 20px;
        border-radius: 25px;
        background: var(--darknavy);
        transition: 0.2s;
    } 
    #menu-burger-2, #menu-burger-3 {
        margin-top: 15px;
    }

    #menu-links {
        flex-direction: column;
        align-items: end;
        height: 120%;
        background: var(--beigeyellow);
        position: absolute;
        top: -5%;
        right: -75%;
        width: 70%;
        z-index: 801;
        transition: 0.2s;
        border-left: 10px solid var(--darknavy);
    }
    #menu-home {
        margin-top: 700px;
    }
    #menu-home, #menu-about, #menu-projects {
        color: var(--darknavy);
        font-size: var(--bigheader);
        text-align: right;
    }
    #menu-about, #menu-projects {
        margin-top: 25px;
    }



}