html
{
    background:  linear-gradient(
        rgba(0, 0, 0, 0.7), 
        rgba(0, 0, 0, 0.7)
      ),url("../img/background/bgmtn.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    color: azure;
}

body
{
    font-family: Muli;
    font-size: 18px;
}

@media screen and (min-width: 800px) 
{ 
    body
    {
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
    }
    .content
    {
        margin-left: 2%;
        margin-right: 2%;
        width: 29%;
        margin-bottom: 100px;
        line-height: 1.2;
        overflow-wrap: break-word;
    }
}

@media screen and (max-width: 800px) 
{ 
    body
    {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .content
    {
        margin-left: 2%;
        margin-right: 2%;
        width: 46%;
        margin-bottom: 100px;
        line-height: 1.2;
        overflow-wrap: break-word;
    }
}

@media screen and (max-width: 480px) 
{
    #site
    {
        flex-direction: column;
    }
    body
    {
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }
    .content
    {
        margin-left: 2%;
        margin-right: 2%;
        width: 96%;
        margin-bottom: 100px;
        line-height: 1.2;
        overflow-wrap: break-word;
    }
}

#header
{
    text-align: center;
    margin-bottom: 60px;
}

h3 { font-weight: normal; }

#site
{
    display: flex;
    flex-wrap: wrap;
    padding-top: 35px;
}

a
{
    text-decoration: none;
    cursor: pointer;
    color: white; 
}

img
{
    width: 100%;
    margin: auto;
}

h2
{
    font-weight: bold;
    font-size: 1.4rem;
    letter-spacing: 0.9px;
    margin-top: 0.3125rem;
    color: white; 
}

.distances
{
    padding-top: 20px;
}