/* 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 {
  box-sizing: border-box;
  background-color: #77c08e;
  color: black;
  font-family: tahoma;
}

#grid-container {
    display: grid;
    grid-template-areas:
    'header'
    'content'
    'footer';
    gap: 10px; 
}

Header {
  grid-area: header;
  width:100%;
  box-sizing: border-box;
  }
  
content {
  grid-area: content;
  box-sizing: border-box;
}

footer {
  grid-area:footer;
  padding: 10px;
  box-sizing: border-box;
}
  
#logo {
  position: relative;
  width: 150px;
  height: 150px;
  padding: 0;
}


p {
  font-family: "helvetica neue", verdana sans-serif;
  color: #4c3f56;
  border: solid;
  border-width: 3px;
  border-radius: 10px;
  padding: 10px;
  padding-top:20px;
  padding-bottom: 20px;
  border-color: #4c3f56;
  background-color: mediumseagreen;
  width:80%;
  font-size: 19px;
  line-height:20px;
  align-items: center;
  display: block;
  text-align: center;
  justify-content: center;
  margin: auto;
  box-sizing: border-box;
  }
  
h1 {
  font-family: Trebuchet MS, "helvetica neue";
  Font-size:20;
  background-color: #b0dcbf;
  border-radius:10px;
  padding: 10px;
  text-align: center;
  height: 20%;
  color: #4c3f56;
  box-sizing: border-box;
}

h2{
  font-family: Trebuchet MS, "helvetica neue";
  color: #4c3f56;
  text-align:center;
  box-sizing: border-box;
  }
h3{
  font-family: Trebuchet MS, "helvetica neue";
  color: #4c3f56;
  text-align:center;
  box-sizing: border-box;
  }

#header {
  font-family: helvetica;
  border-radius: 10px;
  border-spacing: 4px;
  padding: 5px;
  width: 100%;
  display: flex;
  flex-direction: row;
  position:relative;
  align-items: center;
}

.header {
  width: 100%;
  align-items: center;
  position:relative;
  z-index: 99;
  padding: 6px;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  column-fill: balance;
  table-layout: fixed;

}

.header-nav{
  background-color: #b0dcbf;
  border-radius: 10px;
  display: inline-block;
  text-align: center;
  justify-content: center;
  width: 40%;
  position: relative;
  padding: 20px;

  /*box-sizing: border-box;
  column-fill:balance;
  
  width:100%;*/}
  
li {
  list-style: none;
  padding-left: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

#nav {
  float: none;
  width: 70%;
  height: 100%;
  margin: 0;
  color: #4c3f56;
  padding: 5px;
  text-align: center;
  transition-duration: .3s;
  flex-direction: column;
  }
  
  #nav:visited {
    color: #4c3f56;
  }
  #nav:hover {
    color: white;
  }
  #nav:active {
    color: #a09bb3;
  }
  
.schedule {
  font-family: helvetica;
  border-radius: 10px;
  border: 2px solid white;
  border-spacing: 4px;
  padding: 5px;
  display: flex;
  box-sizing: border-box;
  column-fill: balance;
  table-layout: fixed;
  width:70%;
  font-size: 19px;
  color: #4c3f56;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: auto;
}

th {
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  background-color: #b0dcbf;
  text-align: center;
  }
td {
  border-radius: 10px;
  padding: 5px;
  background-color: #b0dcbf;
  text-align: center;
}
  
#resources {
  text-align: center;
}

.button {
  font-size: 20px;
  font-family:"helvetica neue", verdana sans-serif bold;
  background-color: mediumseagreen;
  color: white;
  border-color: black;
  border: 3px solid;
  border-radius: 7px;
  width: 20%;
  height:10%;
  padding: 14px;
  transition-duration: .3s;
  box-sizing: border-box;
  text-decoration: none;
  letter-spacing: 2px;
  }
.button:hover {
  color: #4c3f56;
  background-color: #b0dcbf;
}
.button:active {
  color: #4c3f56;
  background-color: #b0dcbf;
}

.involved{
  padding-bottom:40px;
}

#collab{
  padding: 14px;
  margin: auto;
}

a:link {
  text-decoration: none;
  color: white;
    }
a:visited {
  color: white;
  text-decoration: none;
  border: none;
  }
a:hover{
  color: purple;
  text-decoration: none;
  }
  
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #logo {
  position: relative;
  width: 90px;
  height: 90px;
  padding: 0;}
  
  p{
  font-family: helvetica;
  padding-top:20px;
  padding-bottom: 20px;}  
}

.flex-container {
  align-items: center;
  display: flex;
  text-align: center;
  justify-content: center;
  margin: auto;
  box-sizing: border-box;
  flex-direction: row;
}


/* Use media query and show the flex items vertically if screen width is less than 600px */
@media screen and (max-width:800px) {
  div.flex-container {
    flex-direction: column;
  }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  p{
  padding-top:20px;
  padding-bottom: 20px;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}