nav {
    width: 90%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: yellow;
    opacity: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 640px) {
    nav {
        flex-direction: column;
        width: 90%;
        font-size: smaller;
    }
}

html {
    background-color: lightyellow;
}

hr {
    color: blue;
    border: 1px solid;
}

a:visited {
    color: green;
}

a:hover {
    color: red;
}

a:active {
    color: orange;
}

.roboto-light-italic {
    font-family: "Roboto", serif;
    font-weight: 300;
    font-style: italic;
  }

p {
    font-family: 'Times New Roman', Times, serif;
}

img {
    width: 750px;
    height: 480px;
}

.grid-container {
    display: grid;
    background-color: yellow;
    grid-template-areas:
    'header header header header header header'
    'skubal skubal skubal skubal skubal skubal'
    'skubal skubal skubal skubal skubal skubal'
    'skubal skubal skubal skubal skubal skubal'
    'lugo lugo lugo clase clase clase'
    'lugo lugo lugo clase clase clase'
    'lugo lugo lugo clase clase clase'
    'footer footer footer footer footer footer'
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 5px;
    font-size: 20px;
    text-align: center;
  }

.header {
    grid-area: header;
    text-align: center;
    background-color: bisque;
    opacity: 70%;
}

.skubal {
    grid-area: skubal;
}

.lugo {
    grid-area: lugo;
}

.clase {
    grid-area: clase;
}

.footer {
    grid-area: footer;
    text-align: center;
    background-color: bisque;
    opacity: 705;
}

@media screen and (min-width: 641px) {
    nav {
        width: 80%;
        flex-direction: column;
        font-size: larger;
    }
}