/*CSS Stylesheet*/

/*
* {
border: 1px solid red;
}
*/
html, body{
width: 100vw;
height: 100vh;

}
.logo{display:flex;
justify-content: center;

}
.header{ display:flex;
justify-content: center;}

.img{max-width: 100%;}

h1{font-family: 'Playfair Display', serif;
    font-weight: bold;}
h2{
font-family: 'Playfair Display', serif;


}

h4{

  font-family: 'Jost', sans-serif;
  weight: 200pt;
}
p{   font-family: 'Jost', sans-serif;
    font-size: 1.5em;
  }
a{
font-family: 'Jost', sans-serif;

color: black;
text-decoration: none;
font-size: 2em;

}

a:hover{
color: #ff5757;

}
a:active{
  text-decoration: underline;
  color: black;
}


.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background: #ff5757;

  /* Set a specific height */
  height: 30vh;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

nav{ background-color: transparent;}

svg{
  max-width: 15vw;

}

.text{

  background-color: rgba(255, 255, 255, 0.5);
}


.records{max-width: 100%}


.carousel{

  max-width: 75vw;
}


.footerlink{ font-family: 'Jost', sans-serif;
    font-size:.5em; color:white;}

    .footerlink2{ font-family: 'Jost', sans-serif;
        font-size:1em; color:white;}


.cardspecial{max-height: 15vh}

.pic:hover
    {
      opacity: 0.3;
      filter: alpha(opacity=30);
    }

@media (max-width: 1000px) {
  .rotate{
    transform: rotate(90deg);
    margin-left: 25vw;


  }
}