@font-face {
    font-family: 'Archivo', sans-serif;
}

body {
    font-family: 'Archivo';
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
    
    padding: 0;
    height: auto;
    width: auto;
}

/******************************************* HEADER **************************************/

/*  @media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){} */
@media only screen and (min-width:400px)  {
    nav {
        margin: 3% auto;
        padding: 15px auto;
        border-radius: 10%;
    }
    nav img {
        float: left;
        margin-left: 5%;
        margin-right: 95%;
        height: 50px;
        width: 33px;
        background-size: 100%;
        background: cover;
        inline-size: 5em;
        block-size: 4em;
    }
}

@media only screen and (min-width:400px), (max-width:600px)  {
    nav {
        margin: 3% auto;
        padding: 15px auto;
        border-radius: 10%;
    }
    nav img {
        float: left;
        margin-left: 5%;
        margin-right: 95%;
        height: 50px;
        width: 33px;
        background-size: 100%;
        background: cover;
        inline-size: 5em;
        block-size: 4em;
    }
}

@media only screen and (min-width:600px) {
    nav {
        margin: 3% auto;
        padding: 15px auto;
        border-radius: 10%;
    }
    nav img {
        float: left;
        margin-left: 5%;
        margin-right: 95%;
        height: 50px;
        width: 33px;
        background-size: 100%;
        background: cover;
        inline-size: 5em;
        block-size: 4em;
    }
}

@media only screen and (min-width:768px), (max-width:991px) {
    nav {
        margin: 3% auto;
        padding: 15px auto;
        border-radius: 10%;
    }
    nav img {
        float: left;
        margin-left: 5%;
        margin-right: 95%;
        height: 71px;
        width: 50px;
        background-size: 100%;
        background: cover;
        inline-size: 5em;
        block-size: 4em;
    }
}

@media only screen and (min-width:992px), (max-width:1199px) {
    nav {
        margin: 3% auto;
        padding: 15px auto;
        border-radius: 10%;
    }
    nav img {
        float: left;
        margin-left: 5%;
        margin-right: 95%;
        height: 78px;
        width: 52px;
        background-size: 100%;
        background: cover;
        inline-size: 5em;
        block-size: 4em;
    }
}

@media only screen and (min-width:1200px) {
    nav {
        margin-bottom: 20px;
        padding: 15px auto;
        border-radius: 10%;
    }
    nav img {
        float: left;
        margin-left: 5%;
        margin-right: 95%;
        height: 4vw;
        width: 5vw;
        background-size: 100%;
        background: cover;
    }
}

/******************************************* GRID **************************************/

.container-grid {
    width: 100%;
    margin: 25px auto;
    display: inline-block;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 7px 9px;
    grid-template-areas: 
    ". . . . . . . ." 
    ". B . . . . I ." 
    ". . . . E N . ." 
    ". . V . . . . ." 
    ". . . e . . . ." 
    ". n . . . U . ." 
    ". . . . . . ee ."
    ". . . . . . . .";
    z-index: 1;
    margin: 3% auto;
    padding: 3% auto;
    background: url(./texture-platre.jpg) repeat;
    font-family: 'Archivo';
}

.bg {
    grid-area: B;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 25px;
}

.ig {
    grid-area: I;
    z-index: 1;
    font-weight: bolder;
    font-size: 29px;
    color: #a601ff;
}

.eg {
    grid-area: E;
    z-index: 1;
    font-size: 25px;
}

.ng {
    grid-area: N;
    z-index: 1;
    font-size: 25px;
    color: rgb(34, 143, 92);
}

.vg {
    grid-area: V;
    z-index: 1;
    font-weight: bolder;
    font-size: 25px;
}

.egg {
    grid-area: e;
    z-index: 1;
    font-size: 25px;
    color: rgb(34, 143, 92);
    font-weight: bolder;
}

.ngg {
    grid-area: n;
    z-index: 1;
    font-size: 25px;
}

.ug {
    grid-area: U;
    z-index: 1;
    font-size: 25px;
    font-weight: bolder;
    color: #4400ff;
}

.eggg {
    grid-area: ee;
    z-index: 1;
    font-weight: bolder;
    font-size: 25px;
}

/*************************************** LINKS ************************************/

.container-links {
    display: inline-block;
    text-align: center;
}

.container-links h2, p {
    width: 80vw;
    height: 45px;
    margin: auto;
    display: inline-block;
    justify-content: center;
    text-align: center;
    color: rgb(91, 68, 95);
}

.container-links p {
    margin-bottom: 25px;
}

.fa-chevron-down {
    margin: 1vw;
}

.container-links .button {
    display: inline-block;
    border: none;
    width: 30vw;
    background-color: rgba(189, 176, 206, 0.74);
    border-radius: 9px;
    padding: 1rem;
    text-decoration: none;
    font-size: 18px;
}

.button:hover {
    width: px;
    background-color: #765F82;
    color: #ffffff;
    font-size: 21px;
    text-decoration: none;
}