::selection {
            background-color: #99dddf;
            color: #0C0C0C;
        }
html {
    touch-action: manipulation;
    scroll-behavior: smooth;
}
body {
    background-color: #f8f4e8;
    font-family: Gravity Light, Arial, sans-serif;
    touch-action: manipulation;
    box-sizing: border-box; 
    font-weight: 200;
    margin: 0;
}
header {
    display: grid;
    position: sticky;
    height: auto;
    top: 0;
    
}
header div {
    background-color: #99dddf;
    box-shadow:0 0 2vh rgba(0,0,0,0.4);
    box-sizing: border-box; 
    display: flex;
    justify-content: space-between;       
    flex-direction: row;
    transition: all 0.3s ease;
    font-weight: 200;
    z-index: 999;
    top: 0;
    padding: 0 2vh 0 2vh;
}
header a{
    margin: auto 0 auto 0;
}
header a img {
    text-align: center;
    height: 6vw;
}
#burger {
    display: none;
}
#burger-menu {
    box-shadow:0 0 2vh rgba(0,0,0,0.4);
    display: none;
    box-sizing: border-box; 
    transition: all 0.3s ease;
}
#head-links {
    display: flex;
    overflow-wrap: break-word;
    justify-content: space-between;
    align-items: center;
    width: 40vw;

}
#head-links a{
    color: #000000;
    overflow-wrap: break-word;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none; 
    font-size: 2vw;
}
@media (hover: hover) {
    #head-links a:hover {
        text-decoration: underline;   
    }
}
#head-sign-up {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#head-sign-up a {
    color:#ffffff;
    background-color:#ff8562;
    -webkit-user-select: none;
    user-select: none; 
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow:0px 0px 1vh rgba(0,0,0,0.3);
    border-radius:1vh;
    font-size: 2vw;
    padding: 1vh 1vw;   
}
#head-sign-up a:hover {
    box-shadow:0px 0px 1vh rgba(0,0,0,0.0);
}
dialog a:focus,
dialog a:focus-visible,
dialog a img:focus,
dialog a img:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
dialog:focus,
dialog:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
#dialog_sign_up {
    background-color: #99dddf;
    box-shadow: 0 0 1vh rgba(0,0,0,0.3);
    border: none;
    border-radius: 2vw;
    padding: 2% 4%;
}
#dialog_sign_up h1 {
    font-size: 3.2vw;
    font-weight: 200;
    margin: 0;
}
#dialog_sign_up div {
    display: grid;
    gap: 8vh;
}
#dialog_sign_up span {
    display: flex;
    justify-content: space-between;
    margin: 0 4.8vw 0 4.8vw;
}
#dialog_sign_up img {
    width: 8vw;
    height: 8vw;
    
}
#dialog_sign_up a {
    color: black;
    display: grid;
    width: max-content;
    height: max-content;
    text-align: center;
    text-decoration: none;
    font-size: 1.6vw;
}
#dialog-sign-up-close {
    color:#ffffff !important;
    background-color:#ff8562;
    -webkit-user-select: none;
    user-select: none; 
    text-decoration: none;
    align-content: center;
    transition: all 0.3s ease;
    box-shadow:0px 0px 1vh rgba(0,0,0,0.3);
    border-radius:1vh;
    border: none;
    font-size: 2.4vw !important;
    font-weight: 200;
    padding: 1vh 1vw;   
    margin: auto;
}
main {
    opacity: 0;
}
main.active {
    transition: opacity 0.5s ease;
    opacity: 1;
}
footer {
    background-color: white;
    text-align: center;
    padding: 2vw 0;
    margin: 0;

}
footer h1 {
    display: inline-flex;
    border: 1px solid black;
    box-shadow: 0 0 1vh rgba(0,0,0,0.3);
    padding: 1vh 1vw;
    font-size: 2vw;
    font-weight: 200;
}
@media (max-width: 600px){
    header {
        transition: all 0.3s ease;
        height: 12vh;
    }
    header a img {
        text-align: center;
        height: 12vw;
    }
    header div {
        height: 12vh;
        padding: 0 3.6vw 0 3.6vw;
    }
    #head-links {
        display: none;
    }
    #head-sign-up a {
        display: flex;
        align-items: center;
        margin: auto;
        font-size: 4.8vw;
    }
    #burger{
        display: flex;
        align-items: center;
        font-size: 6vw;
        /*padding: 0 3vw 0.5vh 3vw;
        padding-bottom: 0.5vh;*/
        letter-spacing: 0;
    }
    #burger-menu {
        background-color: #01aaae;
        display: grid;
        justify-items: center;
        transform: translateY(-150%); 
        transition: transform 0.3s ease, opacity 0.3s ease;
        gap: 3.2vh;
        width: 100%;
        top: 6vh; 
        padding: 4vh 4vw;
        border-radius: 0 0 1vh 1vh;
        width: 100%;
        opacity: 0;
        
    }
    #burger-menu.open {
        transform: translateY(0);
        opacity: 1;
    }
    #burger-menu a {
        color: #000000;
        overflow-wrap: break-word;
        text-decoration: underline;
        -webkit-user-select: none;
        user-select: none; 
        font-size: 6vw;
    }
    #dialog_sign_up {
        background-color: #99dddf;
        box-shadow: 0 0 1vh rgba(0,0,0,0.3);
        border: none;
        border-radius: 2vw;
        padding: 4% 0;
    }
    #dialog_sign_up h1 {
        text-align: center;
        font-size: 6.4vw;
        font-weight: 200;
        margin: 0;
    }
    #dialog_sign_up div {
        display: grid;
        gap: 8vh;
    }
    #dialog_sign_up span {
        display: grid;
        grid-template-columns: auto auto;
        grid-column-gap: 4vw;
        gap: 4vh;
        margin: 0 auto ;
    }
    #dialog_sign_up img {
        width: 16vw;
        height: 16vw;
        
    }
    #dialog_sign_up a {
        color: black;
        display: grid;
        width: max-content;
        height: max-content;
        text-align: center;
        justify-items: center;
        text-decoration: none;
        font-size: 4.8vw;
        margin: 0 auto;
    }
    #dialog-sign-up-close {
        color:#ffffff !important;
        background-color:#ff8562;
        -webkit-user-select: none;
        user-select: none; 
        text-decoration: none;
        align-content: center;
        display: flex;
        justify-items: center;
        transition: all 0.3s ease;
        box-shadow:0px 0px 1vh rgba(0,0,0,0.3);
        border-radius:1vh;
        border: none;
        font-size: 6.4vw !important;
        font-weight: 200;
        padding: 1vh 1vw;   
        margin: auto !important;
    }
    footer {
        background-color: white;
        text-align: center;
        padding: 4vw 0;
        margin: 0;

    }
    footer h1 {
        display: inline-flex;
        border: 1px solid black;
        box-shadow: 0 0 2vh rgba(0,0,0,0.3);
        padding: 2vh 2vw;
        font-size: 4vw;
        font-weight: 200;
    }
}