html {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important; 
}
.maintitle {
   text-align: left;
   background-color: #3f3f3f;
 padding: 1em 0;
 max-width: 100%;
border-bottom: 2px solid white;
 position: relative;
 z-index: 3;
box-shadow: 0px 0px 15px;
}
.words {
   text-align: left;
   background-color: #3f3f3f;
 padding: 1em 0;
 max-width: 100%;
border-bottom: 2px solid white;
 position: relative;
 z-index: 3;
margin-top: 0;
}
.words p, .words h3 {

  width: 50%;
  margin: 0 auto;
}
.imgseperate  img{
  max-width: 100%;
}

.next {
  cursor: pointer;
  font-weight: bold;
  color: #e0e0e0;
}
 .next a:link, .next a:visited {
  color: #e0e0e0;

}
.next a {
  padding: 1%;
}
.last {
  display: none;
}
.atitle {
  padding-left: 3%;
  display: inline-block;
transition: .5s;
font-size: 25px;
color: #e0e0e0;
font-weight: bold;
}
.link {
  font-size: 15px;
  padding-left: 3%;
  font-weight: bold;
  display: inline-block;
  transition: .2s;
 
  vertical-align: 2px;
}
.linkimage {
float: right;
margin-right: 1%;
margin-top: 2px;
}
.linkvis {
  font-size: 15px;
  padding-left: 3%;
  font-weight: bold;
  display: inline-block;
  transition: .2s;
  
}
.invis {
  font-size: 15px;
  padding-left: 3%;
  font-weight: bold;
  display: inline-block;
  transition: .2s;
   
   opacity: 0;
}
 .link:link, .link:visited , .invis:link, invis:visited, linkvis:link, linkvis:visited{
  color: #bdbdbd;
}

.link:hover {
color: grey;
cursor: pointer;
}
.invis:hover {
color: grey;
cursor: pointer;
}

.currentpage:hover {
  color: grey;
}
 .linkvis:hover {
cursor: pointer;
color: grey;
 }

hr {
 border: 1px solid grey;
}
a {
  text-decoration: none;
}

.videos {

width: 100%;
text-align: center;
 background-color: #3f3f3f;
border-top: 2px solid white;
border-bottom: 2px solid white;
box-shadow: 0px 0px 15px;
}
.images {

width: 100%;
text-align: center;
 background-color: #3f3f3f;
border-top: 2px solid white;
border-bottom: 2px solid white;
box-shadow: 0px 0px 15px;
}
.images img {
  padding: 3%;
  
}
.videos iframe {
 margin: 3%;
 height: 25vw;
 width: 40vw;
 border: 3px solid white;
}
.currentpage {
 font-size: 15px;
  padding-left: 3%;
  font-weight: bold;
  display: inline-block;
  transition: .3s;
   color: #e0e0e0;
   vertical-align: 2px;
}
.idk img{
  max-width: 100%;
}
.rotate {
  width: 5vw;
  height: 5vw;
  background-color: black;
  left: 45%;
position: absolute;
top: 65%;
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}

}



body {
  background-color: darkgrey;
}















/* SMALL */


@media screen and (min-width: 427px) {
.words h3 {
    color: #e0e0e0;
  font-size: 2vw;
  margin-bottom: 2%;
}
.words p {
    color: #bdbdbd;
  font-size: 1.5vw;
  padding-bottom: 1%;
}
}


@media screen and (max-width: 426px) {
.videos iframe {
 padding: 3%;
 height: 50vw;
 width: 80vw;
}
.words h3 {
    color: #e0e0e0;
  font-size: 4vw;
  margin-bottom: 2%;
}
.words p {
    color: #bdbdbd;
  font-size: 3vw;
  padding-bottom: 1%;
}
}