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

@media screen and (min-width: 411px) and (max-width: 1023px) {
    nav {
        width: 90%
    }
}

@media screen and (min-width: 1024px) {
    nav {
        width: 90%;
    }
}

html {
    background-color: rgb(92, 206, 245);
}

img {
    width: 450px;
    height: 430px;
}

h1 {
    color: blue;
}

h4 {
    color: red;
}

nav {
    width: 80%;
    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;
}

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

.grid-container {
    display: grid;
    grid-template-areas:
    'header header header header header header header header header header'
    'picture picture picture drum drum drum guy guy guy guy'
    'picture picture picture drum drum drum guy guy guy guy'
    'picture picture picture drum drum drum guy guy guy guy'
    'textt textt textt textt textt info info info info info'
    'textt textt textt textt textt info info info info info'
    'secondary secondary secondary secondary secondary information information information information information'
    'secondary secondary secondary secondary secondary information information information information information'
    'otherpicture otherpicture otherpicture microphone microphone microphone cat cat cat cat'
    'otherpicture otherpicture otherpicture microphone microphone microphone cat cat cat cat'
    'otherpicture otherpicture otherpicture microphone microphone microphone cat cat cat cat'
    'footer footer footer footer footer footer footer footer footer footer'
}

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

.picture {
    grid-area: picture;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
}

.drum {
    grid-area: drum;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
}

.guy {
    grid-area: guy;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
}

.textt {
    grid-area: textt;
    border: 1px solid rgba(0, 0, 0, 0.8);
    font-family: Arial, Helvetica, sans-serif;
}

.info {
    grid-area: info;
    border: 1px solid rgba(0, 0, 0, 0.8);
    font-family: Arial, Helvetica, sans-serif;
}

.cat {
    grid-area: cat;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    
}

.secondary {
    grid-area: secondary;
    border: 1px solid rgba(0, 0, 0, 0.8);
    font-family: Arial, Helvetica, sans-serif;
}

.information {
    grid-area: information;
    border: 1px solid rgba(0, 0, 0, 0.8);
    font-family: Arial, Helvetica, sans-serif;
}

.otherpicture {
    grid-area: otherpicture;
    background: fixed;
}

.microphone {
    grid-area: microphone;
    background: fixed;
}

.footer {
    grid-area: footer;
    text-align: center;
    background-color: pink;
    opacity: 50%;
}