body {
  background-color: white;
  color: black;
}

h1 {
  color: navy;
  margin-left: 20px;
}

a { 
    color: white;
}

a:hover {
    color: lightblue;
}
.my_style_1 { 
    background-color:#fffff;
    padding:15px;
    border-style: solid;
    border-color: gray;
    border-width: thin;

  border-right-style: none;

  border-left-style: none;
  font-family: "Copperplate", "Copperplate", fantasy;
  font-size:36px;

}

/* light grey #f1f1f1 */
.my_style_2 { 
    background-color:lightgrey;
    text-align:center;
    padding:10px;
    margin-top:7px;
    font-size:12px;
    
}


.button {
  background-color: lightblue;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  width: 100%;
  /* min-width: 200px; */
}



.button2 {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  width: 100%;
  /* min-width: 200px; */
}



/* <style> */
* {
  box-sizing: border-box;
}
.menu {
  float: right;
  width: 100%;

}

.menu2 {
  float: right;
  width: 100%;

}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}
.main {
  float: left;
  width: 40%;
  padding: 0 20px;
  overflow: hidden;


}
.right { /* light blue */
  background-color:white;
  float: left; 
  width: 25%;
  padding: 10px 15px;
  margin-top: 7px;

}

.right2_menu { /* light blue */
  background-color: white;
  float: right; 
  width: 33%;
  padding: 10px 15px;
  margin-top: 7px;

}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
  .righ2_menu {
      width:100%;
  }    
    
  }

@media only screen and (max-width:700px) {
  /* For mobile phones: */
  .menu, .main, .right, .right2_menu {
    width: 100%;
  }
}
/* </style> */