body
{
    font-family: sans-serif;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 0.5fr 2fr;
    column-gap: 0px;
    row-gap: 0px;
    height: 100vh;
}

h1
{
    margin-left: 11em;
    margin-right: 11em;
    text-align: center;
}

#slogan
{
    justify-self: center;
}

#row-2
{
    background-color: #E8E8E8;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
}

#row-2 img
{
    align-self: center;
    justify-self: center;
}

#row-2-3
{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr;
}

#row-buttons
{
    grid-column: 2/3;
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: space-around;
}

#about, #services
{
    font-size: 1.05em;
    color: #FFFFFF;
    background-color: var(--main-colour);
    height: 3em;
    text-align: center;
    width: 25%;
}

#row-3
{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    background-image: url("../images/pattern.png");
}

#ar-column
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    row-gap: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
    border-right: 3px var(--main-colour) solid;
}

#about-rskrater
{
    color: var(--dark-grey);
    font-size: 1.25em;
    text-align: right;
    padding-right: 2em;
    margin-left: 10em;
}

span.highlight
{
    color: #000000;
}

#row-3 img
{
    padding-left: 2em;
}

#ar-column input
{
    font-size: 1.05em;
    color: #FFFFFF;
    background-color: var(--main-colour);
    height: 3em;
    text-align: center;
    width: 25%;
    justify-self: end;
    margin-right: 2em;
}

@media only screen and (max-width: 800px)
{
    #slogan
    {
        margin-left: 0;
        width: 80%;
        justify-self: center;
    }

    #logo-left
    {
        margin-left: 1em;
        margin-top: 1.5em;
    }

    h1
    {
        margin-left: 2em;
        margin-right: 2em;
    }

    #about-rskrater
    {
        margin-left: 1em;
        padding-right: 0.5em;
    }

    #row-3 img
    {
        padding-left: 0;
    }
}

@media only screen and (max-width: 600px)
{
    #row-2-3
    {
        grid-template-columns: 0.75fr 3fr 0.75fr;
    }

    #row-buttons
    {
        column-gap: 4em;
    }

    #about, #services
    {
        width: 45%;
    }

    #about-rskrater
    {
        font-size: 1.05em;
    }

    #row-3 img
    {
        width: 100%;
    }
}