/* 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-color: #FAF8F1;
  color: black;
  font-family: Verdana;
  margin: 2rem;
}
/* General */
h1 {
  font-size: 3rem;
  text-align: center;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}
p {
  font-size: 1.15rem;
  line-height: 1.8rem;
}
/* navbar CSS */
.navimg {
  width: 50%;
}
 nav ul {
  display: flex;
 flex-direction: row;
 justify-content: center;
  text-decoration: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  
}
nav {
  margin-bottom: 1rem;
  background-color: #136890;
  color: white;
  border-radius: 1.5rem;
  border: 2px solid #136890;
  padding: .75rem;
}
nav a{
   text-decoration: none;
   color: white;
}
.navbar {
  padding: .5rem;
  margin: .5rem;
}

.sitename {
  font-weight: 800;
}

/* Section 1 Hero Banner */
.hero-banner {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-content: center;
 align-items: center;
}
.hero-banner div {
 padding-left: 1rem;
 padding-right: 1rem;
 padding-top: 0rem;
 margin-top: 0rem;
}
.hero-img {
  width: 80%;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
}


/* Section 2 Classes */
#classes {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 2%;
  width: 22%;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  background-color: white;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

.button {
  background-color: #136890;
  border: solid 1px #13;
  border-radius: 8px;
  color: white;
  padding: 15px 32px;
  margin-bottom: 2rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)
}

/* The Video Section */
#video {
  display: flex;
  direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.videodiv {
  margin: 1rem;
  
}