@import url('https://fonts.googleapis.com/css2?family=Grandstander:wght@400;700&display=swap');
  
.nav-container a 
{
  color: #2d7eff;
  text-decoration: none;
  z-index:100000;
}

button:hover
{
    cursor:pointer;
}
.logo 
    { 
        
        display:flex;
        flex-direction:row;
        height:20vh;
        width:100vw;
        
        padding-top:10px;
        padding-left:30px;
        padding-bottom:20px;
        margin:0 auto;  
        align-content:center;
        align-items:center; 
        pointer-events:none;
        z-index:-10;
    } 
    .logo img
    {  
        max-width:50vw;
        width:auto;
        height:50%;
    }

.nav-container a:hover 
{
  text-decoration: underline;
}
nav {
    font-family :Grandstander, sans-serif;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    width:100vw;

    color:white;
    position: relative;  
    top: 20px;         
    z-index: 1000;
}

.nav-container a {
    display: flex; 
    align-items: center;
    margin-left:10px;
    gap: 10px;  
    text-decoration: none;  
    color: white; 
}
nav img 
{ 
    width: 8vw;
    max-width: 6vh;  
    font-size:1rem;
}
 
 .menu-buttons
    {
        top:40px;
        right:20px;
        position:fixed;
        display:flex;
        flex-direction:row;

        gap:10px;
        align-content:center;
        align-items:center;
    }
.nav-panel {
    background-color: #4fcc56; 
    top:100px;
    position: fixed;
    display: none; /* hidden by default */
    flex-direction: column; 
    gap:15px;
    right: 20px;
     padding:20px;



    border: solid 3px white;
    border-radius: 20px;

    animation: fallAndBounce 0.5s ease-in-out forwards;
    z-index:-1;
}

.nav-panel.active 
{
    display: flex;
    --initial-rotation: 0deg;
    animation: scaleUp 0.5s ease-in-out forwards;
    transform-origin: 100% 0%; 
}
.nav-panel.closing 
{
    display: flex;
    animation: scaleDown 0.5s ease-in-out forwards;
    transform-origin: 100% 0%; 
}
@keyframes scaleDown
{
    100%{
        transform:scale(0)
    }
    30%{
        transform:scale(1.1)
    }
    0%{
        transform:scale(1)
    }
}
@keyframes scaleUp
{
    0%{
        transform:scale(0.08)
    }
    70%{
        transform:scale(1.1)
    }
    100%{
        transform:scale(1)
    }
}
@media screen and (max-width: 600px) 
{
    .nav-container a {
    display: flex; 
    align-items: center;
    margin-left:10px;
    gap: 10px;  
    text-decoration: none;  
    color: white;   
}
    .nav-panel 
    {  
        position: fixed;
        background-color: #4fcc56;      
        width:90%;
         
        padding-left:0;
        padding-right:0;
    }
    .nav-panel-wrapper
    { 
        position:absolute;   
        width:100vw;
        height:100vw;
        overflow:hidden;   
        z-index:-1;
    }
    nav 
    {
        width:100vw;
        position: relative;  
        top: 0;        
        right:0; 
    }
    .menu-buttons
    {
        top:20px;
        right:20px;
        position:fixed;
        display:flex;
        flex-direction:row;

        gap:10px;
        align-content:center;
        align-items:center;
    }
    .logo 
    { 
        
        display:flex;
        flex-direction:row;
        height:15vh;
        width:100vw;
        padding-top:10px;
        padding-bottom:20px;
        margin:0 auto; 

        align-content:center;
        align-items:center; 
    } 
    .logo img
    {  
        max-width:50vw;
        width:auto;
        height:50%;
    }
    .nav-panel.active 
{
    display: flex;
    --initial-rotation: 0deg;
    animation: scaleUp 0.5s ease-in-out forwards;
    transform-origin: top; 
}
.nav-panel.closing 
{
    display: flex;
    animation: scaleDown 0.5s ease-in-out forwards;
    transform-origin: top; 
}
    @keyframes scaleDown
{
    100% {
        transform:  translateY(-100vh);
    }
    75% {
        transform:  translateY(50px) ;
    } 
    0% {
        transform: translateY(0);
    }
}
@keyframes scaleUp
{
     0% {
        transform:  translateY(-100vh);
    }
    50% {
        transform:  translateY(50px) ;
    }
    75% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
} 
}