@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

.cCode {
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
}

.tlinks {
   width: 100%;
   margin: 0 auto;
   padding: 15px;
   display: flex;
   justify-content: space-evenly;
}

li {
   list-style: none;
}

hr {
   width: 100%;
}

#textWindow3 {
   text-align: left;
}


/* Class Styling */
h1 {
   font-size: 6em;
}

.navbar {
   font-size: 1.5em;
   display: flex;
   justify-content: space-around;
}

.navbar ul,
.navbar li {
   display: inline-block;
   margin: 0;
   padding: 0;
}

.navbar ul {
   /* makes the "nav" part of the navbar take up all the extra space in the navbar */
   flex: 1;
   /* Limits that extra space to 50% of the available space */
   max-width: 50%;
   /* makes it it's own flex container to control it's spacing */
   display: flex;
   /* space the content in it's own flex container */
   justify-content: space-evenly;
}

@media only screen and (max-width: 1600px) {
   h1 {
      font-size: 4em;
      color: blue;
   }

   .navbar,
   .navbar ul {
      font-size: 16px;
   }
}

@media only screen and (max-width: 1200px) {
   h1 {
      font-size: 3em;
      color: green;
   }

   .navbar,
   .navbar ul {
      font-size: 14px;
   }
}

@media only screen and (max-width: 992px) {
   h1 {
      font-size: 2.5em;
      color: yellow;
   }

   .navbar,
   .navbar ul {
      font-size: 12px;
   }
}

@media only screen and (max-width: 768px) {
   h1 {
      font-size: 2em;
      color: orange;
   }

   .navbar,
   .navbar ul {
      flex-direction: column;
      align-items: center;
      font-size: 10px;
   }
}

@media only screen and (max-width: 600px) {
   h1 {
      font-size: 1.2em;
      color: red;
   }

   .navbar,
   .navbar ul {
      flex-direction: column;
      align-items: center;
      font-size: 8px;
   }
}