@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700&display=swap');

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: #707070;
    position: fixed;
}

#container {
    display: flex;
    height: 100vh;
}

.right-container {
    width: 40vw;
    float: right;
    height: 100vh;
    transform: translateY(-2vh);
}

.left-container {
    width: 60vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}


#logo {
    width: 15vw;
    padding: 2vh 8vw;
    padding-top: 6vh;
    padding-bottom: 0vh;
}

#error-title {
    color: #EE4939;
    font-size: 3.2vw;
    font-weight: bold;
    padding: 0vh 8vw;
    margin-bottom: 0;
}

#title {
    font-size: 3.2vw;
    font-weight: bold;
    padding: 2vh 8vw;
    margin-bottom: 0;
}

#error-message {
    font-size: 3.4vw;
    font-weight: bold;
    padding: 0vh 8vw;
    margin-top: 0;
    margin-bottom: 3.3vh;
}

#message {
    font-size: 1.5vw;
    padding: 1.5vh 8vw;
    margin-top: 0;
}

#gray-box {
    background-color: #D8D8D8;
    padding: 2vw;
    margin: 1vh 7vw;
    max-width: 80vw;
    padding: 1vh 2vw;
    padding-right: 4vw;
    -webkit-box-shadow: 2px 2px 12px -1px rgba(0, 0, 0, 0.30);
    box-shadow: 2px 2px 12px -1px rgba(0, 0, 0, 0.30);
}

.banner {
    color: #871817;
    font-weight: bold;
    font-size: 2.4vw;
    margin: 2vw;
    transform: translateY(2vh);
}

#blog-button {
    background-color: #EE4939;
    color: white;
    padding: 1.2vh 3vw;
    text-decoration: none;
    width: auto;
    font-size: 2vw;
    border-radius: 6vh;
    margin-left: 1vw;
    display: flex;
    align-items: center;
}

.button-container {
    display: flex;
    place-content: end space-between;
    transform: translateY(4vh);
}

#social-media-buttons {
    text-align: right;
    margin-top: 3vh;
}

.social-button {
    color: white;
    margin: -10px;
    text-decoration: none;
    max-width: 4rem;
}

#error-main-image {
    height: 100vh;
    transform: translateX(-10vw) translateY(-0.5vh);
}

#main-image {
    height: 100vh;
    transform: translateX(-10vw);
}

/* Mobile devices */
@media (max-width: 1080px) {

    body {
        font-family: 'Open Sans', sans-serif;
        margin: 0;
        padding: 0;
        color: #707070;
        position: relative;
        width: 100vw;
        align-items: center;
        padding-bottom: 5vh;
    }

    #container {
        width: 100vw;
        display: flex;
        flex-direction: column;
    }

    .right-container {
        order: 1;
        width: 100vw;
        text-align: center;
    }

    .left-container {
        display: flex;
        flex-direction: row;
        order: 2;
        width: 100vw;
        text-align: center;
    }


    #logo {
        width: 50vw;
        padding: 4vh 8vw;
        position: absolute;
        top: 0;
        transform: translateX(16vw);
    }

    #title {
        font-size: 7vw;
        font-weight: bold;
        padding: 0 8vw;
        margin-bottom: 0;
        margin: 0 2vw;
        margin-top: 1vh;
        text-align: center;
    }

    #error-title {
        font-size: 7vw;
        font-weight: bold;
        padding: 0 8vw;
        margin-bottom: 0;
        margin: 0 2vw;
        margin-top: 1vh;
        margin-left: 4vw;
        text-align: center;
    }

    #message {
        font-size: 4vw;
        padding: 1.5vh 8vw;
        margin-top: 0;
        margin-bottom: 0;
        margin: 0 2vw;
        text-align: center;
    }

    #error-message {
        font-size: 4vw;
        padding: 1.5vh 8vw;
        margin-top: 0;
        margin-bottom: 0;
        margin: 0 2vw;
        text-align: center;
    }

    #gray-box {
        background-color: #D8D8D8;
        padding: 2vw;
        margin: 1vh 7vw;
        max-width: 100vw;
        padding: 1vh 2vw;
        padding-right: 6vw;
        margin-bottom: 6vh;
    }

    .banner {
        font-weight: bold;
        font-size: 5vw;
        transform: translateY(2vh);
    }

    #blog-button {
        background-color: #EE4939;
        color: white;
        padding: 1vh 5vw;
        text-decoration: none;
        width: auto;
        font-size: 4vw;
        border-radius: 6vh;
        margin-left: 1vw;
        text-align: center;
    }

    .button-container {
        display: flex;
        place-content: end space-between;
        transform: translateY(3.5vh);
    }

    #social-media-buttons {
        text-align: right;
        margin-top: 10px;
    }

    .social-button {
        color: white;
        margin: -6px;
        text-decoration: none;
        max-width: 9vw;
    }

    #main-image {
        max-width: 50vh;
        height: auto;
        margin-top: 26vw;
        transform: translateX(0vw);
    }

    #error-main-image {
        max-width: 50vh;
        height: auto;
        margin-top: 26vw;
        transform: translateX(0vw);
    }

}