body { overflow-x: hidden; }

#header
{
    width: 100vw;
    height: 50px;

    background: blue;
}

#main-banner
{
    width: 100vw;
    height: calc(100vw * (768px / 1440px));

    background: grey;
}

/*For each individual project there is an info box, a logo, redirects, a character and a banner*/
.project
{
    position: relative;
    margin-top: 20px;
    width: 100vw;
    height: 100vh;
}

.proj-banner
{
    width: 100vw;
    height: 100vh;

    background: green;
}

.proj-infobox
{
    width: 70vw;
    max-width: 300px;
    height: 80vh;
    max-height: 400px;

    position: absolute;
    left: 35vw;
    top: 50vh;
    transform: translate(-50%, -50%);

    background: black;
}

.proj-logo
{

}

.proj-redirect
{
    width: 30vw;
    max-width: 90px;
    height: 20vh;
    max-height: 60px;
    position: absolute;
    left: 25px;
    top: 25px;

    background: rgb(255, 0, 0);
}

.proj-character
{
    width: 900px;
    max-width: calc(50vw - 50px);
    height: 800px;
    max-height: calc((50vw - 50px) * (800 / 900));

    position: absolute;
    left: 75vw;
    top: 50vh;
    transform: translate(-50%, -50%);

    background: rgb(68, 68, 68);
}

.card
{  
    width: 70vw;
    max-width: 300px;
    height: 80vh;
    max-height: 400px;

    position: absolute;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);

    transform-origin: center center;

    background: black;
    transition: top 0.5s cubic-bezier(0.1, 0.8, 1, 1), transform 0.5s cubic-bezier(0.1, 0.9, 1, 1);
}