/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body{
  background: url(/images/bliss.jpg);
  background-size: cover;
  background-attachment: fixed; /* Uses bliss.jpg then streches it to fit screen (background-size: cover) but resizes uniformaly if not 16:9 (background-attachment: fixed) */   
  
  color: black;
  font-family: Verdana;
  text-align: center;
}

/* makes a class that makes a (border) border and makes the background of inside of the border red */
.lightblue_red_desktop { /* format for borders: (background-color)_(border-color)_(desktop or mobile) */
  border: 5px outset red;
  padding: 10px;
  width: 20%;
  display: inline-block;
  background-color: lightblue;
}

.lightblue_red_mobile {
  border: 5px outset red;
  padding: 10px;
  width: 90%;
  display: inline-block;
  background-color: lightblue;
}


.white_black_desktop {
  margin: 10px;
  border: 5px outset black;
  padding: 10px;
  width: 20%;
  display: inline-block;
  background-color: white;
}

.white_black_mobile {
  margin: 10px;
  border: 5px outset black;
  padding: 10px;
  width: 90%;
  display: inline-block;
  background-color: white;
}

.white_black_rgb_desktop {
  margin: 10px;
  border: 5px outset black;
  padding: 10px;
  width: 100px;
  display: inline-block;
  background-color: white;
}