.language {
  font-size:0.75rem;


}

.container{
  display:grid;
  grid-template-areas:
  "menu menu"
  "section1 section2"
  "footer footer"
  ;
  
  height:100vh;    
  grid-template-columns:2fr 1fr;
  background-color:#FFFAFA;
  padding:5px;
  margin:0;

  font-size:1.5vw;
}

.container > div.menu {
  background-color:#191970;
  display:flex;
  grid-area:menu;
  border:double gray 4px;
}

.logo{
  display:flex;
  position:top;
  padding:0rem;
}

.logo, img{
  width:20px;
  height:20px;
}

.menu-contents{
  padding:4rem 0.5rem;
}

.menu {

  display:flex;
  justify-content:space-between;
  font-size:1.5rem;

}

.menu-contents a{
  color:white;
  text-decoration:none;
  font-weight:bold;
  font-family:"Times New Roman", Times, serif;
  padding:0.5rem;
}

a:hover{
  color:lightblue;

}

.container > div.menu img{
  grid-area:menu;
  width:150px;
  height:150px;
}

.container > div.section1{
  grid-area:section1;

}

.container > div.section2{
  grid-area:section2;

}

#ceo{
  width:100%;
  height:100%;
  border:double gray 4px;
}


.container > div.section1{
  background-color:#FFFAFA;
  color:#191970;
  padding:2rem;
  text-align:center;
  border:double gray 4px;
  margin:1rem;

}

.container > div.section2{
  background-color:#FFFAFA;
  text-align:center;
  border:none;
  margin:1rem;

}

.footer{
  background-color:#191970;
  color:white;
  text-align: center;
  grid-area:footer;
  text-decoration:none;
  font-weight:bold;
  font-family:"Times New Roman", Times, serif;
  border:double gray 4px;
}

.privacy{
    text-decoration: none;
    color:white;
    
}

.learn-more{
  background-color:#191970;
  font-size:1rem;
  padding:1rem;
  border:double gray 3px;
  border-radius:10%;
}

.learn-more:hover{
  background-color: #3333cc;
  transform: scale(1.03);
    
}

.learn-more > a{
  color:white;
  text-decoration:none;
  font-weight:bold;
  font-family:"Times New Roman", Times, serif;

}

#email{
  color:white;
  grid-area:footer;
  text-align:center;
  text-decoration:none;
  font-weight:bold;
  font-family:"Times New Roman", Times, serif;
}




@media (max-width: 1500px) {
  html, body {
    height: 100%;
    margin: 0;
  }

  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .logo {
    width: 100px;
    height: 100px;
    margin-bottom: 1rem;
  }

  .menu-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .menu-contents a {
    padding: 0.5rem;
    font-size: 1rem;
  }

  .container > div.menu img {
    width: 100px;
    height: 100px;
  }

  .learn-more {
    font-size: 1rem;
    padding: 0.5rem;
    width: fit-content;
    margin: 0 auto;
  }

  .section1 {
    display: block;
    margin: 0.5rem;
    font-size: 1rem;

  }

  #ceo {
    max-width: 100%;
    height: auto;
  }

  .footer {
    font-size: 1rem;
    margin-top: auto; /* Pushes footer to bottom */
  }

@media (max-width: 900px) {
  html, body {
    height: 100%;
    margin: 0;
  }

  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .logo {
    width: 100px;
    height: 100px;
    margin-bottom: 1rem;
  }

  .menu-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .menu-contents a {
    padding: 0.5rem;
    font-size: 1rem;
  }

  .container > div.menu img {
    width: 100px;
    height: 100px;
  }

  .learn-more {
    font-size: 1rem;
    padding: 0.5rem;
    width: fit-content;
    margin: 0 auto;
  }

  .section1 {
    display: block;
    margin: 0.5rem;
    font-size: 1rem;

  }

  #ceo {
    max-width: 100%;
    height: auto;
  }

  .footer {
    font-size: 0.5rem;
    margin-top: auto; /* Pushes footer to bottom */
  }

  @media (max-width: 480px) {
  html, body {
    height: 100%;
    margin: 0;
  }

  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .logo {
    width: 100px;
    height: 100px;
    margin-bottom: 1rem;
  }

  .menu-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .menu-contents a {
    padding: 0.5rem;
    font-size: 1rem;
  }

  .container > div.menu img {
    width: 100px;
    height: 100px;
  }

  .learn-more {
    font-size: 1rem;
    padding: 0.5rem;
    width: fit-content;
    margin: 0 auto;
  }

  .section1 {
    display: block;
    margin: 0.5rem;
    font-size: 1rem;

  }

  #ceo {
    max-width: 100%;
    height: auto;
  }

  .footer {
    font-size: 0.5rem;
    margin-top: auto; /* Pushes footer to bottom */
  }
  
}

}