body {
    display: flex;
    color: #0f0f0f;
    font-family: 'Rubik', sans-serif;
}

main {
    display: flex;
    width: 100vw;
    height: 95vh;
    background-image: url("../images/suma_background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

main .top {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45vh;
    width: 45vw;

}

main .top img#suma-iso {
    height: 20vh;
}

main .top img#suma-logo {
    height: 15vh;
}

main .bottom {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 50vh;
    width: 100vw;
}

main .bottom img {
    height: 100%;
    max-width: 100vw;
}

footer {
    display: flex;
    height: 5vh;
    background-color: #0f0f0f;
    color: #F2F2F2;
    justify-content: center;
    align-items: center;
}

footer a {
    margin: 0 20px;
    color: #F2F2F2;
    font-size: 1.2rem;
}

footer a:hover{
    color: #FF444B;
    text-decoration: none;
}

footer a i {
    margin: 0 10px 0 0;
}

@media (orientation:portrait) {

    body {
        background-color: #0f0f0f;
    }

    main {
        height: auto;
    }

    main .top {
        width: 75vw;
        height: 30vh;
    }

    main .bottom {
        width: 100vw;
        height: 50vh;
    }

    main .top img#suma-iso {
        height: auto;
        max-width: 15vw;
    }

    main .top img#suma-logo {
        height: auto;
        max-width: 40vw;
    }

    footer {
        height: 20vh;
        padding: 25px 0;
    }

    footer a {
        margin: 0 20px;
        color: #F2F2F2;
        font-size: 1.1rem;
    }

    .footer-separator {
        display: none;
    }

}