#content {
    margin-top: 10vh;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5vh;
}

#page-title {
    width: 100%;

    font-family: "Poppins", sans-serif;
    font-size: 5vh;

    color: white;
    text-align: center;
}

.selection {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2vh;
}

.selection-title {
    font-family: "Poppins", sans-serif;
    font-size: 4vh;
    color: #ddd;
}

.selection-options {
    position: relative;
    
    width: 50vw;
    height: 5vh;

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: .5vw;
    
    padding: .3vw;
    border-radius: .5vw;

    background-color: #fff;
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);

    font-size: .8vw;
    font-family: "Montserrat", sans-serif;
}

.selection-options .selection-option {
    height: 100%;
    flex: 1;
    text-align: center;
}

.selection-options .selection-option input {
    display: none;
}

.selection-options .selection-option span {
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    border-radius: 0.25vw;
    
    border: none;
    padding: 0 1vw;

    color: rgba(51, 65, 85, 1);

    transition: all .15s ease-in-out;
}

.selection-options .selection-option:hover span, .selection-options .selection-option input:checked + span {
    background-color: #ddd;
    font-weight: bold;
}



#export {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 10vw;
    aspect-ratio: 7/2;
    
    border: none;
    outline: none;
    
    border-radius: .25vw;
    cursor: pointer;
    
    background-color: green;
    color: #ddd;

    font-family: "Poppins", sans-serif;
    font-size: calc(10vw / 7 * .75);

    transition: color .3s, font-size .3s;
}


#export:hover {
    color: white;
    font-size: calc(10vw / 7 * .775);
}