/*General Styles*/
body{
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

h1{
  text-align: center;
  color: #2863b4;
}

img{
    transition-property: transform;
    transition-duration: size 3s; 
}

img:hover{
    width: 100%;
}

/*Header & Navigation */
header{
  position: sticky;
  top: 0;
  background-color: #ddfaff;
  display: flex;
  width: 1000px;
  height: 175px;
  margin: auto;
  z-index: 2;
}
.logo{
  position: relative;
  padding: 25px;
  padding-top: 63.5px;
}

nav{
  width: 700px;
  display: inline-grid;
  grid-template-columns: auto auto auto auto auto;
  
  gap: 10px;
  margin: 10px;
  float: right;
}
nav a, nav div{
  border-radius: 20px;
  padding: 5px; 
  padding-top: 10px;
  height: 45px;
  text-align: center;
  align-self: center;
  color: #2863b4;
  text-decoration: none;
  font-weight: 800;
  background-color: #acffd7;
}
nav a:hover, nav div:hover{
  animation: bgNav 0.5s forwards;
}

@keyframes bgNav{
  from{
    background-color: #acffd7;
    color: #2863b4;
  }
  to{
    background-color: #2863b4;
    color: #acffd7;
  }
}

.curPage{
  background-color: #2863b4;
  color: #acffd7;
}

/*Fonts
  <weight>: Use a value from 200 to 1000
  <uniquifier>: Use a unique and descriptive class name
.nunito-<uniquifier> {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

/* Colors
 * #73e9fc
 * #64cc9a
 * #2863b4
 */