@charset "utf-8";
/* CSS Document */

html, body {
    height: 100%;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px}

#body {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 24px;
/*    font-family: sans-serif;*/
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" <width>;
}

#main {
    }

.container {
  display: flex;
  justify-content: center;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    width: 100%;
margin-left:auto;
margin-right:auto;
padding-top:100px;
padding-bottom:100px;
    }

#container1 {background-color: antiquewhite;}
#container2 {background-color: antiquewhite;}
#container3 {background-color: white;}


#column1 {width:400px;}
#column2 {width:600px;
margin-top:auto;
margin-bottom:auto;
}
#column3 {width:500px;
margin-top:auto;
margin-bottom:auto;}
#column4 {width:500px;}


.column {
align-items: center
  float: left;
  width: 50%;
}

.fullwidth {
align-items: center
  float: none;
  width: 100%;
}


#main a {
  text-decoration: underline;
  font-weight: normal;
  color: blue;
}
#main a:hover {
  text-decoration: underline;
  color: purple;
}


p {
  font-size: 24px;
}

h1 {
    font-size: 36px;
}
h2 {
    font-size: 24px;
}


@media screen and (max-width: 600px) {
    .container {
        width: 100%;
      font-size: 36px;

}


}