:root{
  --main-font: 'Lato', sans-serif;
  --accent-font: 'Tangerine', cursive;
}
/* Homepage & Default Styles */
body{
  max-width: 480px;
  font-family: var(--main-font);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(255,255,255,1) 100%);
  color: rgb(255, 255, 255);
}
nav a{
  text-decoration: none;
  color: rgb(0,0,0);
}
nav a:hover{
  color: rgb(255, 255, 255);
}
.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-content: center;
}
.n1{
  grid-column: 1 / 3;
  grid-row: 1;
}
.n1 h1{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .n2{

} */
.n3{
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.n3 img{
  display: flex;
  max-width: 100px;
  border-radius: 100%;
  border: 1px black solid;
}
.n3 img:hover{
  opacity: 0.8;
  border-color: white;
}
.nA{
  grid-column: 1 / 2;
  grid-row: 2;
  text-align: center;
}
.nA a:hover{
  color:rgba(255, 255, 255, 0.4);
  font-weight: bold;
}
.nA a{
  color:white;
  font-weight: bold;
}
.nB{
  grid-column: 2 / 3;
  grid-row: 2;
  text-align: center;
}
.nB a:hover{
  color:rgba(255, 255, 255, 0.4);
  font-weight: bold;
}
.nB a{
  color:white;
  font-weight: bold;
}
.nA a.vid:hover{
  color:rgba(0, 0, 0, 0.4);
  font-weight: bold;
}
.nA a.vid{
  color:black;
  font-weight: bold;
}
.nB a.vid:hover{
  color:rgba(0, 0, 0, 0.4);
  font-weight: bold;
}
.nB a.vid{
  color:rgba(0, 0, 0, 1);
  font-weight: bold;
}
h1.title{
  font-family: var(--accent-font);
  font-size: 2.5em;
  font-weight: bold;
  color: rgba(0,0,0,1);
}
h3.title{
  font-family: var(--accent-font);
  font-size: 1.5em;
}
a{
  border: none;
  margin: 0;
  padding: 2px;
}
.n2 a:hover{
  color:rgba(0, 0, 0, 0.4);
}
.n2 a{
  text-decoration: none;
  color: rgba(0,0,0,1);
  margin: 0;
  padding: 5px;
  font-weight: bold;
}
main{
  background-color: rgba(255,255,255,0.1);
  width: 90%;
  margin: 0 auto;
  border-radius: 5px;
}
main p{
  margin: 10px;
  padding: 5px;
  text-align: center;
}
main video{
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  display: block;
}
main h3{
  margin: 5px;
  padding: 5px;
  text-align: center;
}
main ul{
  list-style: none;
  margin: 10px;
  padding: 5px;
  text-align: center;
}
main ul li{
  padding: 1px;
}
footer h3{
  text-align: center;
}
/* Photoset Styles */
.photo {
  max-width: 140px;
  border: 1px rgba(255, 255, 255, 0.6) solid;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}
.p-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.mn-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
}
.next{
  grid-column: 3 / 3;
  grid-row: 1;
}
a.next{
  color: white;
  padding-bottom: 5px;
  font-weight: bold;
  text-align: end;
}
a.next:hover{
  color: rgba(255, 255, 255, 0.644);
  font-weight: lighter;
}
.prev{
  grid-column: 1 / 2;
  grid-row: 1;
}
a.prev{
  color: white;
  padding-bottom: 5px;
}
a.prev:hover{
  color: rgba(255, 255, 255, 0.644);
  font-weight: lighter;
}
video{
  max-width: 300px;
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
  body {
    max-width: 100%;
  }
  h1.title{
    font-size: 3.5em;
  }
  h3.title{
    font-size: 2.5em;
  }
  .p-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .n3 img{
    max-width: 150px;
  }
  video{
    max-width: 350px;
  }
  .nA, .nB{
    font-size: 1.2em;
  }
  a.next{
    font-size:1.2em;
  }
  a.prev{
    font-size:1.2em;
  }
  .description{
    font-size: 1.1em;
  }
  .facts{
    font-size: 1.3em;
  }
  li{
    font-size: 1.1em;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
  body {
    max-width: 100%;
  }
  h1.title{
    font-size: 4.5em;
  }
  h3.title{
    font-size: 2.5em;
  }
  .p-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .n3 img{
    max-width: 200px;
  }
  .vid-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .nA, .nB{
    font-size: 1.5em;
  }
  a.next{
    font-size:1.5em;
  }
  a.prev{
    font-size:1.5em;
  }
  .description{
    font-size: 1.2em;
  }
  .facts{
    font-size: 1.4em;
  }
  li{
    font-size: 1.2em;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 2400px) {
  body {
    max-width: 100%;
  }
  h1.title{
    font-size: 5.5em;
  }
  h3.title{
    font-size: 3.5em;
  }
  .p-grid{
    grid-template-columns: repeat(6, 1fr);
  }
  .n3 img{
    max-width: 250px;
  }
  .vid-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .nA, .nB{
    font-size: 1.8em;
  }
  a.next{
    font-size:1.8em;
  }
  a.prev{
    font-size:1.8em;
  }
  .description{
    font-size: 1.3em;
  }
  .facts{
    font-size: 1.5em;
  }
  li{
    font-size: 1.3em;
  }
}