Codecademy - 16th Exercise (CSS - MY WEBSITE STYLE GUIDE)

body{
  background-color: rgb(250,250,250);
  position: relative;
  left: 40px;
  font-family: "Roboto";
}

header h1{
  font-family: "Nunito Sans";
}

section{
  margin: 30px auto;
}

section h2{
  font-family: Poppins;
}



/* 1. Colors Section */
section.colors{
  padding: 15px 10px;
  border-style: solid;
  border-color: grey;
  border-width: 3px;
}


.colors div{
  display: inline-block;
  width: 30%;
  text-align: center;
  margin: 20px 5px;
  font-family: Poppins;
}

.colors .cool-blue{
  color: white;
  background-color: #2d5dcc;
}

.colors .pink{
  color: black;
  background-color: #d957d9;
}

.colors .mint-green{
  color: black;
  background-color: #4fe0b0;
}

.colors .beige{
  color: black;
  background-color: #efd9ca;
}



/* 2. Fonts Section*/
section.fonts{
  padding: 15px 10px;
  border-style: solid;
  border-color: grey;
  border-width: 3px;
}


.fonts div{
  display: inline-block;
  width: 45%;
  text-align: left;
  margin: 20px 5px;
  font-family: Poppins;
}

.fonts .source-code-pro{
  font-family: "Source Code Pro";
}

.fonts .nunito-sans{
  font-family: "Nunito Sans";
}

.fonts .poppins{
  font-family: "Poppins";
}

.fonts .underline{
  font-size: 20px;
  color: red;
}



/* 3. Text Styles Section*/
section.text-styles{
  padding: 15px 10px;
  border-style: solid;
  border-color: grey;
  border-width: 3px;
}


.text-styles div{
  display: block;
  width: 100%;
  text-align: left;
  margin: 20px 5px;
}

.text-styles .h1{
  font-weight: 700;
  font-size: 26px;
  font-family: Nunito Sans;
}

.text-styles .h2{
  font-weight: 500;
  font-size: 18px;
  font-family: Poppins;
}

.text-styles .p{
  font-weight: 400;
  font-size: 14px;
  font-family: Poppins;
}


/* Footer Section */
footer{
  position: relative;
  left: 20px;
  margin: 30px auto;
}

footer a{
  color: red;
}

footer:hover{
  position: relative;
  left: 100px;
  margin: 30px auto;
}

footer a:hover{
  color: rebeccapurple;
}