html {
    height: 100%;
}
    
body {
    min-height: 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}   

.header {
    width: 100%;

    display: flex;
}

.header .simmo-logo {
    padding-left: 1%;

    display: flex;
    flex-grow: 2;
}

.header .simmo-logo img {
    width: auto;
    height: 9vw;
    max-height: 300px;
}

.header .header-buttons {

    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

.header .dark-mode-button img {
    width: 4vw;
    max-width: 54px;
    height: auto;

}

.header button {
    outline: none;
    background-color: transparent;
    border-color: transparent;

}

.header button:hover {
    cursor: pointer;
}

.main {

    display: flex;
    flex-direction: column;
}

.main .bio {
    display: flex;
    flex-direction: row;
}

.main .bio .bio-text {
    list-style-type: none;
    margin-left: 2%;
    margin-right: 2%;

    
    display: flex;
    flex-grow: 2;
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-evenly;
}

.main .bio .bio-image {
    padding: 2%;
    height: auto;
    width: 40vw;
    max-width: 360px;
    
    display: flex;
    justify-self: center;
}

.main .games-projects {
    margin-left: 2%;
    margin-right: 2%;

    display: flex;
    flex-direction: row;
}

.main .games-projects .gp-heading {
    justify-self: center;
}

.main .games-projects .projects {
    padding: 1%;

}

.main .games-projects .games {
    padding: 1%;

}
    
.footer {    
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer .icons {
    display: flex;
    
}

.footer .icons .button:not(:last-child) {
    margin-right: 10vh;
}

.footer .button {
    background-color: transparent;
    border-color: transparent;
}

.footer .icons img {
    width: 8vh;
}