@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Anta&family=McLaren&display=swap');
:root{
    --red:#ff131a;
    --dark-red:#a0010a;
    --white:#d5efed;
    --brown:#eb8964;
    --dark-brown:#932135;
    --purple:#a04591;
    --dark-purple:#630c50;

    --font-family: "Alan Sans", sans-serif;
    font-family: var(--font-family);
}

body{
    background-color: var(--white);
}

a{
    color:var(--red);
    &:visited{
        color:var(--purple);
    }
}

.navbar-button{
    font-size: 1.4em;
    border:none;
    margin:0.1em 0;
    padding: 0.4em 0.7em;
    font-family: var(--font-family);
    font-weight: bold;

    background-color: var(--red);
    color: var(--white);
    cursor: pointer;
    text-shadow: color-mix(in srgb, var(--white), #0000 100%) 0 0 1em;
    --dist:0;
    --additional-shadow: inset 0 0.4em 0.5em color-mix(in srgb, var(--red), #0000 70%);
    box-shadow:
            var(--additional-shadow),
        inset 0 calc(-0.3em * (var(--dist)*0.5 + 1)) calc(0.6em * (var(--dist)*0.6 + 1)) var(--dark-red),/*shading*/
        0 calc(0.1em * (1 - var(--dist))) 0 var(--dark-red),/*bottom*/
        inset 0 0 calc(0.3em * (var(--dist) + 1)) var(--dark-red);/*edges*/

    transform: translateY(calc(0.1em * var(--dist)));
    transition: box-shadow 0.1s, text-shadow 0.1s, transform 0.1s;

    &:nth-child(1){
        border-radius: 0.7em 0 0 0.7em;
        --additional-shadow: inset 0.2em 0.4em 0.5em color-mix(in srgb, var(--red), #0000 40%);
    }
    &:last-child{
        border-radius: 0 0.7em 0.7em 0;
        --additional-shadow: inset -0.2em 0.4em 0.5em color-mix(in srgb, var(--red), #0000 40%);
    }
    &:hover:not(:has(:hover)){
        --dist:0.5;
        text-shadow: color-mix(in srgb, var(--white), #0000 40%) 0 0 0.5em;
    }
    &:active{
        --dist:1 !important;
    }
}
.dropdown-menu{
    position:absolute;
    text-align: left;

    margin:0.1em 0;
    padding: 0.4em 0.4em;
    width:max-content;
    z-index: 1;

    background-color: color-mix(in srgb, var(--purple), #0000 10%);
    border-radius: 0.7em;

    box-shadow: inset 0 -0.2em 0.3em var(--dark-purple),
            0 0.1em 0 var(--dark-purple);

    transition: transform 0.1s;
    transform: translate(-0.7em, calc(-0.1em * var(--dist) + 0.5em));
}
.dropdown-menu div:not(:last-child){
    margin-bottom: 0.2em;
}
.dropdown-menu a{
    text-decoration: none;
    font-weight: normal;
    color: var(--white);

    box-shadow: 0 0 1em #fff0, inset 0 0 0 #fff0;
    border-radius: 0.4em;
    padding: 0 0.3em;

    transition: box-shadow 0.1s;

    &:hover{
        box-shadow: 0 0 0.3em var(--dark-purple), inset 0 0 0.9em var(--dark-purple);
    }
}