/* 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." */

/*  cool colors

#4d6161; grayish teal
#2e3b3b; soft gray
#80d8d8; soft cyan
#028482; darker teal

*/

@import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');

.jersey-15-regular {
  font-family: "Jersey 15", serif;
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: hsl(180, 45%, 3%);
  color: hsl(180, 25%, 70%);

  font-family: 'Jersey 15', serif;
  font-weight: 400;
  font-style: normal;
  
  width: 1024px;
  margin: auto;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 20px;
}

h1 {
  text-align: center;
}

a, p {
  margin: 10px;
}

a {
  color: #009688;
}

a:visited {
  color: #005F5F;
}

#main {
  width: 70%;
  gap: 20px;
}

#side {
  width: 30%;
}

div.box {
  box-sizing: border-box;
  padding: 16px;
  border: solid 3px #028482;
  border-radius: 5px;
}