:root{
    --border-thickness:2px;
    --border-radius: 10px;
    --select-button-height:50px;
    --illust-row-gap:50px;
    --illust-column-gap: 25px;
}

.hidden{
    display:none;
}

.main-content{
    margin:40px;
    margin-top: calc(var(--header-height) * 1.25);
}

.heading{
    font-size:3em;
    text-shadow:white 0 0 10px;
}

.menu-wrapper{
    display:grid;
    height:var(--select-button-height);
    margin-right: 50%;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}

.select-menu-wrapper{
    display:grid;
    height:0px;
    margin-right: 50%;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}

button.select{
    display:flex;
    width:100%;
    height: var(--select-button-height);
    background-color: black;
    border: solid white var(--border-thickness);
    border-radius:var(--border-radius);

}

.select-label{
    margin:auto;
    margin-left:5px;
    color:white;
    font-size:1rem;
}

.select-icon{
    height: 50%;
    margin:auto;
    margin-right:0;
}

.select:hover{
    cursor:pointer;
}

.select-menu{
    border: solid white var(--border-thickness);
    border-radius: var(--border-radius);
    z-index: 1;
    background-color:black;
}

.select-menu-container{
    height:0;
    z-index: 1;
}

.select-menu ul{
    list-style:none;
    margin:0;
    padding:0;
}

.select-menu-entry button{
    display:flex;
    border: 0;
    width:100%;
    height: calc(var(--select-button-height) - var(--border-thickness));
    color: white;
    border-bottom: solid white var(--border-thickness);
    background-color: transparent;
    cursor: pointer;
}

.select-menu-list .select-menu-entry:last-child button{
    border-bottom:none;
}

.select-menu-entry p{
    margin:auto;
    margin-left:5px;
    
    color:white;
    font-size:1rem;
}