@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=Comfortaa:wght@500&family=Fredoka+One&family=Fredoka:wght@300;500&family=Gloria+Hallelujah&family=Press+Start+2P&display=swap');

/* This CSS file contains all the basics that apply to every page. It has the Block classes, header styles, footer styles, and a few generals like the page margin, font and base-background-color */

/*  COLORS
Reg green: #cbec94
Light green: #e1ffc9
Dark green: #b1c977

Light blue: #9dd4ec
Dark blue: #72b0e2

Tan: #ffebcd
Light pink: #ecafba
Dark pink: #e07078
*/

/* ----------------------------------------------------- */


/* General */
html {
  scroll-behavior: smooth;
}
body {
  background-color: #266e57;
}
* {
  font-family: 'Fredoka', sans-serif;
}
.center {
  text-align: center;
}
#page-margin {
  margin-left: 8%;
  margin-right: 8%;
  /* background-color: rgba(255, 255, 255, 0.325);
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 20px; */
}
.separation {
  height: 100px;
}
h1 {
  color: white;
  font-weight: bold;
}
a {
  color: #9dd4ec;
  text-decoration: none;
}
a:hover {
  color: #cbec94;
  text-decoration: none;
}
.small-text {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.805);
  padding-left: 10px;
}

/* ----------------------------------------------------- */


/* Blocks */
.block-container {
  display: flex;
  justify-content: space-between;
}
.block-container-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.block-long {
  background-color: white;
  height: 450px;
  width: 100%;
  border-radius: 20px;
  border-bottom: 10px solid #335760;
  color: rgb(41, 41, 41);
  font-size: 20px;
  padding: 30px;
}
.block {
  background-color: white;
  height: 450px;
  width: 45%;
  border-radius: 20px;
  border-bottom: 10px solid #335760;
  color: rgb(41, 41, 41);
  font-size: 20px;
  padding: 30px;
}
.block-three {
  background-color: white;
  height: 450px;
  width: 32%;
  border-radius: 20px;
  border-bottom: 10px solid #335760;
  color: rgb(41, 41, 41);
  font-size: 20px;
  padding: 30px;
}
.block-small {
  background-color: white;
  height: 280px;
  width: auto;
  border-radius: 20px;
  border-bottom: 10px solid #335760;
  color: rgb(41, 41, 41);
  font-size: 20px;
  padding: 10px;
  margin: 5px;
}
.auto-height {
  height: auto;
}
.block-w-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.short {
  height: 350px;
}
.tall {
  height: 500px;
}
.block-1 {
  border-top: 10px solid #cbec94;
}
.block-2 {
  border-top: 10px solid #e1ffc9;
}
.block-3 {
  border-top: 10px solid #b1c977;
}
h2 {
  font-size: 40px;
  padding: 15px;
}
p {
  color: rgb(96, 96, 96);
}
/* ----------------------------------------------------- */


/* header - Title */
header {
  padding: 30px;
  height: auto;
  text-align: center;
}
#Logo {
  height: 300px;
}
/* header - Navbar */
nav {
  height: 100px;
  padding-top: 20px;
  padding-bottom: 8px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
nav ul{
  display: flex;
  flex-direction: row;
  /* align-items: center; */
  justify-content: center;
  padding-right: 35px;
}
li {
  list-style-type: none;
}
.nav-link{
  font-size: 20px;
  color: rgb(83, 83, 83);
  border: 2px solid grey;
  margin: 5px;
  width: 160px;
  text-align: center;
  border-radius: 40px;
  background-color: white;
}
.nav-link:hover{
  color: rgb(48, 48, 48);
  background-color: rgb(243, 255, 224);
  border: 2px solid rgb(84, 94, 85);
}
#active {
  color: rgb(255, 255, 255);
  background-color: rgb(103, 171, 190);
  border: 2px solid rgb(86, 84, 94);
  font-weight: bold;
} 
/* ----------------------------------------------------- */


/* Footer */
footer {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #29362e;
  height: auto;
  display: flex;
  justify-content: space-around;
  padding: 30px;
  text-align: center;
  color: rgb(124, 141, 156);
}
/* h4 {
  color: rgb(113, 129, 143);
} */
.social-links {
  height: 60px;
  width: 60px;
  margin: 10px;
}

/* ----------------------------------------------------- */