@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Imperial+Script&family=Meow+Script&display=swap');
    
        body {
          background-color: #205b7d;
          font-family: "Caveat", cursive;
          font-weight: 400;
          font-style: normal;
          font-size: 30px;
          color: white;
        }
    
        #container {
          max-width: 1300px;
          margin: 0 auto;
          margin-top: 20px;
        }
        
    /*Nav*/
        
        #navbar {
          font-size: 30px;
          min-height: 60px;
          width: 100%;
          background-color: #638fdb;
          border: 3px solid white;
          border-radius: 40px;
          margin-bottom: 20px;
        }
        #navbar ul {
          display: flex;
          padding: 0;
          margin: 0;
          list-style-type: none;
          justify-content: space-evenly;
        }
        #navbar li {
          padding-top: 10px;
        }
        #navbar li a {
          color: white;
          font-weight: 800;
          text-decoration: none;
        }
        #navbar li a:hover {
          color: white;
          text-decoration: underline;
          text-underline-offset: 8px;
        }
        
        #left {
          width: 30%;
          margin-right: 20px;
          background-color: #638fdb;
          padding: 10px;
          border: 3px solid white;
          border-radius: 10px;
        }
        
        #right {
          width: 30%;
          margin-left: 20px;
          background-color: #638fdb;
          padding: 10px;
          border: 3px solid white;
          border-radius: 10px;
        }
        
    /*Nav*/
        
        main {
          width: 70%;
          background-color: #638fdb;
          padding: 20px;
          border: 3px solid white;
          border-radius: 10px;
        }
        
        footer {
          width: auto;
          height: 30px;
          background: #638fdb;
          margin-top: 20px;
          padding-bottom: 20px;
          border: 3px solid white;
          border-radius: 40px;
        }
        
      #flex {
        display: flex;
      }
        
        @media only screen and (max-width: 1200px) {
          
          #flex {
            flex-wrap: wrap;
          }
          
          aside {
            width: 100%;
            margin-right: 0px;
          }
          main {
            width: 100%;
            margin-top: 20px;
          }
        }