body {
    margin:0;
    padding:0;
    width:100vw;
    height:100vh;
}

main {
    width:100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
}

#top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

#left {
    display: grid;
    grid-template-rows: 0.1fr 2fr 0.25fr;
    grid-template-columns: 1fr 1fr;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
}

#left h2 {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    text-align: center;
}

#left img {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    width:50%;
    margin:auto;
}

#left button:first-of-type {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    color:white;
    background-color: #3f6ec9;
    border:none;
    cursor:pointer;
    font-size: 1.2em;
    line-height: 1.2em;
}

#left button:last-of-type {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    color : white;
    background-color: #da1d5c;
    border:none;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1.2em;
}

#mid {
    display: grid;
    grid-template-rows: 0.1fr 2fr 0.25fr;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
}

#mid h2 {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    text-align: center;
}

#mid img {
    grid-row: 2 / 3;
    width:60%;
    margin:auto;
}

#mid button {
    grid-row: 3 / 4;
    color:white;
    background-color: #3f6ec9;
    border:none;
    cursor:pointer;
    font-size: 1.2em;
    line-height: 1.2em;
    width:50%;
    margin-left:auto;
    margin-right: auto;
}

#right {
    display: grid;
    border-bottom: 1px solid #555;
}

#right img {
    width:30%;
    margin:auto;
}

#right h2 {
    text-align: center;
}

.rotate {
    animation-duration: 2s;
    animation-name: rotation;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.translateRight {
    animation-duration: 1s;
    animation-name: translationRight;
}

@keyframes translationRight {
    from {
        transform: translate(0px);
    }

    to {
        transform: translate(50px);
    }
}

.translateLeft {
    animation-duration: 1s;
    animation-name: translationLeft;
}

@keyframes translationLeft {
    from {
        transform: translate(0px);
    }

    to {
        transform: translate(-50px);
    }
}