@media only screen and (max-width:700px) {
    [class*="container"] {
       width: 100%;
    }
 }

 @media only screen and (max-width:700px) {
    [class*="navigation"] {
       width: 100%;
    }
 }

 h1 {
    background-color: lightyellow;
    text-align: center;
    font-size: 55px;
    border: 5px solid blue;
    border-radius: 10px;
    color: orange;
 }

 .navigation {
    text-decoration: none;
    text-align: center;
    font-size: 23px;
    width: 100%;
 }

 #a {
    text-decoration: none;
    font-width: bold;
    border: solid red;
    padding: 7px;
    border-radius: 10px;
    color: blue;
    cursor: pointer;
 }

 .navigation a {
    font-size: 15px;
 }

 .navigation #a:hover {
    color: red;
 }

 .navigation a:hover {
    background-color: yellow;
 }

 .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
 }

 .container div {
    height: 100px;
    flex: 400px;
    border: 5px solid gray;
    border-radius: 10px;
    background: lightgreen;
    cursor: pointer;
 }

 .container a:hover {
    color: red;
 }

 .container :hover {
    background-color: yellow;
 }

 h2 {
    text-align: center;
    color: blue
 }

 p {
    text-align: center;
    color: green;
    font-size: 20px;
    font-width: bold;
 }

 a {
    text-decoration: none;
 }