body
{
    background-color: #222222;
}

a
{
    cursor: pointer;
}

button
{
    cursor: pointer;
}

strong
{
 font-weight:bold;
}

.header
{
    width: 100vw;
    height: 8vh;
    background-color: white;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    z-index: 1000;
}

.header-name
{
    padding: 0px 1vmin;
    font-family: Arial;
    display: block;
    height: 8vh;
    font-size: 4vmin;
}

.top-bar
{
    height: 8vh;
    display: flex;
}

.top-bar img
{
    width: 25vmin;
    height: auto;
}

.navigation-links
{
    height: 8vh;
    background-color: white;
}

.header .navigation-links ul
{
    list-style: none;
}

.header .navigation-links ul li
{
    display: inline;
    float: left;
}

.header .navigation-links ul li button
{
    padding: 0px 1vmin;
    font-family: Arial;
    display: block;
    height: 8vh;
    font-size: 3vmin;
}

.header .navigation-links ul li button:hover
{
    background-color: #c0c0c0;
}

.extra-links-itch
{
    height: 5vh;
    width: auto;
    transition: 0.2s;
    margin-top: 1.5vh;
    margin-right: 2vh;
}

.extra-links-itch:hover
{
    height: 6vh;
    width: auto;
    margin-right: 1.5vh;
    margin-top: 1vh;
}

.overlay{
    background-color: #181818;
    position: absolute;
    width: 0%;
    height: 92vh;
    z-index: 100;
    transition: width 1s;
    z-index: 200;
    display: flex;
    justify-content: flex-end;
}



.title-text
{
    align-self: center;
    margin-left: 5vw;
    margin-bottom: 4vh;
    font-size: 10vmin;
    color: #cccccc;
    font-family: Montserrat;
    font-weight: 900;
    text-decoration: underline;
    display: flex;
}

.top-back-button
{
    padding-top: 2vh;
    display: flex;
}

.back-button
{
    align-self: center;
    padding: 0 0.5vw;
    height: 3vh;
    font-size: 3vmin;
    font-family: Arial;
    background-color: white;
}

.section-button
{

    margin: 1.125vw 2vw;
    aspect-ratio: 16 / 9;
    align-self: center;
    width: 32vw;
    height: auto;

    transition: 0.2s;
}

.section-button-content
{
    width: 100%;
    height: 100%;
    display: flex;
}

.section-button:hover
{
    transition: 0.4s;
    width: 34vw;
    height: auto;
    margin: 0.5625vw 1vw;
}

.section-cover
{
    object-fit: cover;
}

.section-arrow
{
    align-self: center;
    position: relative;
    transform: translateX(-102%);
    z-index: -1;

    transition: 0.2s;
}

.section-button:hover .section-arrow
{
    transition: 0.4s;
    transform: translateX(-95%);
}

.section
{
    display: block;
}

.inactive-section
{
    display: none;
}

.game-section ul
{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    scroll-behavior: smooth;
}

.game-section ul::-webkit-scrollbar
{
    width: 6px;
}

.game-section ul::-webkit-scrollbar-track
{
    background-color: #333333;
    border-radius: 12px;
}

.game-section ul::-webkit-scrollbar-thumb
{
    background-color: #ffffff;
    border-radius: 12px;
}


/*Project Page*/


.showcase-section
{
    width: 99vw;
    height: 92vh;
    display: grid;
    grid-template-columns: 85vw;
    overflow-y: scroll;
    scroll-behavior: smooth;
    justify-content: center;
}

.showcase-section::-webkit-scrollbar
{
    width: 6px;
}

.showcase-section::-webkit-scrollbar-track
{
    background-color: #333333;
    border-radius: 12px;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.showcase-section::-webkit-scrollbar-thumb
{
    background-color: #ffffff;
    border-radius: 12px;
}

.project-title
{
    margin-bottom: 1vh;
    display: flex;
    justify-content: center;
}

.project-title-text
{
    font-size: 4vw;
    color: #cccccc;
    font-family: Montserrat;
    font-weight: 900;
    text-decoration: underline;
}

.project-information-video
{
    display: flex;
    justify-content: space-between;
}

.project-description-information
{
    width: 33vw;
    height: 28.125vw;
}

.project-description
{
    width: 33vw;
    height: 17vw;
}

.project-information
{
    width: 33vw;
    height: 11.125vw;
}

.project-information-text
{
    margin: 0.5vw 0;
    font-family: arial;
    font-size: 1.1vw;;
    color: white;
}

.project-video
{
    width: 50vw;
    height: auto;
}

.sub-header
{
    margin-top: 5vh;
    margin-bottom: 3vh;
    font-family: arial;
    font-weight: bold;
    font-size: 1.7vw;;
    color: white;
}

.sub-sub-header
{
    margin-top: 1vh;
    margin-bottom: 2vh;
    font-family: arial;
    font-weight: bold;
    font-size: 1.4vw;;
    color: white;
}

.project-description-text
{
    font-family: arial;
    font-size: 1.1vw;;
    color: white;
}


/* Homepage */

.homepage
{
    width: 99vw;
    height: 92vh;
    display: grid;
    grid-template-columns: 85vw;
    overflow-y: scroll;
    scroll-behavior: smooth;
    justify-content: center;
}

.homepage::-webkit-scrollbar
{
    width: 6px;
}

.homepage::-webkit-scrollbar-track
{
    background-color: #333333;
    border-radius: 12px;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.homepage::-webkit-scrollbar-thumb
{
    background-color: #ffffff;
    border-radius: 12px;
}

.header-text
{
    font-size: 3vw;
    margin-bottom: 3vh;
    color: #cccccc;
    font-family: Montserrat;
    font-weight: 900;
    text-decoration: underline;
    text-align: center;
}

.base-text
{
    font-family: arial;
    font-size: 1.5vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    color: white;
    text-align: center;
}


/* skills */


.skills
{
    display: flex;
    justify-content: space-between;
}