*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.block1
{
    background-color: rgb(133, 133, 133);
}
.block7
{
    background-color: rgb(133, 133, 133);
}
.block2, .block3, .block5, .block6
{
    background-color:  rgb(224, 107, 111);
}
.block4
{
    background-color: rgb(151, 94, 94);
}
a{
    color: black;
}
@media screen and (min-width: 900px)
{
.container
{
    column-gap: 5%;
    display: grid;
    grid-template-rows: auto auto repeat(6, 1fr) auto;
    grid-template-columns: 1fr 1fr 0.7fr 0.7fr;
    min-height: 100vh;
}
body
{
    font-size: 1vw;
}
.block
{
    padding: 2%;

}
.block1
{
    padding: 0%;
    padding-left: 2%;
    padding-right: 2%;
    min-height: 10vh;
    grid-area: 1/1/1/5;
    display: grid;
    align-items: center;
    background-color: rgb(224, 131, 131);
}
.block7
{
    padding: 0%;
    background-color: rgb(133, 133, 133);
    display: grid;
    align-items: center;
    grid-area: 9/1/9/5;
    min-height: 10vh;
    padding-left: 2%;
    padding-right: 2%;
    grid-template-columns: repeat(3, 1fr);
}
.mainMotto
{
    grid-area: 1/3/1/3;
    justify-self: flex-end;
}

.block2
{
    grid-area: 2/1/9/1;
}
.block3
{
    padding: 0;
    grid-area: 2/2/9/2;
    display: grid;
    align-items: center;
    justify-content: center;
    min-width: 40%;
}
.block4
{
    grid-area: 2/3/2/5;
    display: grid;
    align-items: center;
    justify-items: center;
}
.block5
{
    grid-area: 3/3/9/3;
}
.block6
{
    grid-area: 3/4/9/4;
}
.block5, .block6, .block2
{
    display: grid;
    justify-items: center;
    grid-template-rows: auto 1fr;
    font-size: 1.5em;
}
.block5, .block6
{
    padding-left: 6%;
}
.block2
{
    align-items: center;
}
h2{
    font-size: 2em;
}
div > h3
{
    grid-area: 1/1/1/1;
}
div > ol{
    grid-area: 2/1/2/1 
}
nav > ul > li
{
margin: 14px;
}
ol{
    margin: 30px;
}
nav{
    font-size: 1.5em;
    padding-bottom: 10%;
}
ol
{
    width: 100%;
    height: 90%;
    font-size: 0.6em;
}
li{
    margin: 3%
}
}
@media screen and (max-width: 768px)
{
    .container
    {
        display: grid;
        grid-template-rows: repeat(auto, 6);
        grid-template-columns: 1fr 1fr;
        column-gap: 4%;
    }
    .block2
    {
        grid-area: 5/1/5/3;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    nav > ul > li{
        font-size: 15px;
    }
    .block1
    {
        grid-area: 1/1/1/3;
        display: grid;
        min-height: 75px;
        align-items: center;
        justify-content: center;
    }
    .block4
    {
        grid-area: 2/1/2/3;
        display: grid;
        align-items: center;
        justify-content: center;
    }
    .block5
    {
        padding: 8%;
        grid-area: 3/1/3/1;
        display: grid;

    }
    .block6
    {
        grid-area: 3/2/3/2;
        display: grid;
        padding: 8%;
    }
    .block3
    {
         grid-area: 4/1/4/3;
         margin-top: 1%;
         margin-bottom: 1%;
    }
    .block7
    {
        grid-area: 6/1/6/3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 2%;
        padding-right: 2%;
    }
    h3
    {
        text-align: center;
        margin-bottom: 4%;
    }
    li{
        margin: 14px;
    }
    .mainMotto
    {
        font-size: 20px;
    }
    h1{
        font-size: 30px;
    }
}


