* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Fira Code", Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

body{
    height: 100%;
    background-color: rgb(23, 165, 253);

    overscroll-behavior-y: none;
}

#background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 125vh;
    z-index: -1;
    background-color: rgb(40, 82, 172);
    pointer-events: none;

    object-fit: cover;

}


#mainholder{
    /* left side, fades into transparency */
    display: list;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 300px;
    height: 75%;
    overflow: auto;
    margin: auto;

    align-items: start;
    text-align: center;

    background-color: rgb(0, 0, 0, 0.2);
    border-radius: 15px;

    padding: 20px 20px 20px 20px;

    overflow: none;
}


#iconcontainer{
    /* container for icons */
    display: list;
    gap: 10px;
    justify-content: center;
    align-items: center;
    /* border: 5px solid black; */
    
}
.socialmedia{
    width: 50px;
    height: 50px;
}

#buttoncontainer{
    /* container for buttons */
    display: grid;
    gap: 10px;
}

.navbutton{
    /* button for navigation */
    display: block;
    width: 100%;
    height: 7vh;
    background-color: rgba(144, 144, 144, 0.25);
    color: white;
    border: none;
    font-size: 1.5em;
    cursor: pointer;

    text-align: center;
    text-decoration: none;

    border-radius: 15px;
}