@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;
}

p {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    margin-left: 200px;
    color: white;
}

h1 {
    color: rgb(196, 254, 110);
    text-decoration: underline;
}

h2 {
    color: gray;
    font-size: 15px;
}

h3 {
    color: white;
    font-size: 110px;
    font-family: sans-serif;
    margin-top: 120px;
}

h4 {
    color: red;
    font-size: 25px;
}

.box {
    border-radius: 50%;
    height: 40px;
    margin: 10px;
    width: 40px;

    .wrap:hover & {
        transform: scale(2);
      }
    }

.box1 {
    background: ".main-logo";
    transition: all 1s;
}
.main-logo {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 100%;
    margin-top: 130px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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: 1px 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'
    'michael michael michael greg greg greg bob bob bob bob'
    'michael michael michael greg greg greg bob bob bob bob'
    'michael michael michael greg greg greg bob bob bob bob'
    'johnov johnov johnov johnov johnov miles miles miles miles miles'
    'johnov johnov johnov johnov johnov miles miles miles miles miles'
    'dave dave dave dave dave richard richard richard richard richard'
    'dave dave dave dave dave richard richard richard richard richard'
    'johnnu johnnu johnnu carissa carissa carissa david david david david'
    'johnnu johnnu johnnu carissa carissa carissa david david david david'
    'johnnu johnnu johnnu carissa carissa carissa david david david david'
    'footer footer footer footer footer footer footer footer footer footer'
}

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

.michael {
    grid-area: michael;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.greg {
    grid-area: greg;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.bob {
    grid-area: bob;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.johnov {
    grid-area: johnov;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.miles {
    grid-area: miles;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.dave {
    grid-area: dave;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.richard {
    grid-area: richard;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.johnnu {
    grid-area: johnnu;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.carissa {
    grid-area: carissa;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.david {
    grid-area: david;
    margin-left: auto;
    margin-right: auto;
    background: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

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