@font-face {
    font-family: 'Baskervville'; /*a name to be used later*/

    src: url('../fonts/Atelier National de Recherche Typographique/TrueType/Baskervville/Baskervville_Regular.ttf'); /*URL to font */
} 




.pointer {

  cursor: url("./media/proxy-image_00.png"), auto;
  position: relative;

}


.icon {

  width: 4%;

}


body {

  background-color: #fff;
  font-family: "PT Serif", serif;
  justify-content: center;
  align-items: center;
  position: static;
  color: blue;
  cursor: url("./media/proxy-image_00.png"), auto;

  margin: 0px;
  min-height: 100vh;
  width: 100%;

  display: flex;
  flex-direction: column;

}


h1 {

  font-size: 1.875rem;
  padding: 6px 8px 6px 16px;
  margin-top: 30px;
  margin-bottom: 80px;

  width: 100%;
  
}

h1 a {

cursor: url("./media/hand_cursor.png"), auto;

}

h2 {

  font-size: 1.25rem;
  text-align: center;

}


h2 a {

  text-decoration: none;
  color: blue;

}


h2 :hover {

  color: hotpink;
  display: inline-block;
  cursor: url("./media/hand_cursor.png"), auto;

}


.img_home h2{

  text-align: center;

}


p {

  font-size: 0.938rem;
  text-align: justify;

}

p a { 

text-decoration: none;
color: blue;

 }


div a {

  cursor: url("./media/hand_cursor.png"), auto;

}



.mailto { 

padding-top: 30%;
padding-bottom: 20%;
align-content: right;

 }

 .mailto-content {

margin: 0; 
text-align: right;

 }



/* Code to create two columns */

  
.column {

  padding: 0em 1em;

}

.essay-statement {

  margin-bottom: 5%; 
  font-size: .9rem;

}

.Selected-bio {

font-size: 0.9rem;
font-style: italic;

}


/* Clear floats after the columns */


.sidenav {

  width: 25%; /* Set the width of the sidebar */
  height: 100%;
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  overflow-x: hidden; /* Disable horizontal scroll */
  top: 0;

  font-size: 1.25rem;
  margin-left: -80%;

  text-align: center;

  display: initial;

}

a {

  width: 100%;

}


/* The navigation menu links */

.sidenav a {

  padding: 6px 8px 6px 16px; /* top; right; bottom; left */ 
  text-decoration: none;
  color: blue;
  display: block;

}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover {

  color: hotpink;

}


/* Style page content */

.sidenav h1 {

  font-size:130%;

}


.homepage {

  padding: 6px 8px 6px 16px;
  margin-top: 30px;
  margin-bottom: 80px;

}



.homepage :hover { 

  cursor: url("./media/proxy-image_00.png"), auto;

 }



.grid {

  display: grid;
  grid-column-gap: 0;
  grid-template-columns: repeat(2, 1fr);

}


.grid-film-works {

  display: grid;
  grid-column-gap: 0;
  grid-template-columns: auto;
  margin-top: 2%;
  margin-left: 30%;
  margin-right: 30%;

  justify-content: center;
  align-items: center;


}


.grid-container {

  display: grid;
  grid-column-gap: 0;
  grid-template-columns: auto 50%;
  cursor: url("./media/proxy-image_00.png"), auto;
  margin-top: 5%;

  margin-left: 25%;
  margin-right: 15%;

  justify-content: center;

}


.grid-container-works {

  display: grid;
  grid-column-gap: 2%;
  margin: 5%;
  grid-template-columns: auto  auto;
  cursor: url("./media/proxy-image_00.png"), auto;

}



.grid-container-essay {

  display: grid;
  grid-column-gap: 2%;
  grid-template-columns: auto;
  cursor: url("./media/proxy-image_00.png"), auto;

  justify-content: center;
  align-content: center;
  align-items: center;


}


.img-container a:hover {

  opacity: 60%;
  filter: invert(38%) sepia(92%) saturate(6641%) hue-rotate(319deg) brightness(91%) contrast(95%);

}


.overlay-text {

  justify-content: center;
  text-align: center;

}




.date em {

  text-align: right;
  justify-content: right;
  font-size: 0.625rem;
  font-weight: bold;
  color: hotpink;
  right: 0;

}



.curriculum {

padding-top: 60px;
padding: 10% 0 10% 55%; 
text-align: left;

}


.film-stills {

width:500px;
height:300px;
object-fit: cover;


}

.film-title {

font-size: 2.5rem;
text-align: left;
margin-top: 5%;

}


.film-details {

  font-weight: bold;
  text-align: left;
  font-size: 10px;
  margin-top: -30px;
  margin-bottom: 5%;

}


.film-synopsis {

  text-align: justify;
  font-size: 1rem;
  margin-top: 5%;
  margin-bottom: 5%;

}


.film-description {

  text-align: justify;
  font-size: 1.25rem;
  font-style: italic;
  margin-top: 5%;
  margin-bottom: 5%;

}


.title {

  font-weight: bold;
  font-size: .75rem;

}


.raspberry-pi {

text-align: center;
bottom: 0;
position: fixed;
margin: 2%;
font-size: .75rem;

}


.raspberry-pi-icon {

  width: 2%;

}


.black-prince-mosaic{

  transform:scale(.75);
  position: fixed;

}


.black-prince-mosaic area:hover {

cursor: url("./media/hand_cursor.png"), auto;

}


 * {box-sizing:border-box}


/* Slideshow container */

.slideshow-container {

  max-width: 100%;
  position: relative;
  margin: 0;

}

/* Hide the images by default */

.mySlides {

 display: none;

}

.img-slides {

  width: 100%;
  margin: 2%;
  object-fit: fill;

}

.crew {

font-size: 1rem;
line-height: 1.8;
margin-top: 5%;
margin-bottom: 10%;

}



/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;

  cursor: url("./media/hand_cursor.png"), auto;

}

.dot-position {

margin-left: 42.5%;
margin-top: 5%;

}


.active, .dot:hover {
  background-color: blue;
}


/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}


@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


#myNav {

  display: none;

}

span {

  display: none;

}

.img-slides-mobile {

  display: none;

}

.screener {

  width: 100%;
  height: 450px;

}

/* ----------- Mobile Version ----------------*/ 


@media only screen and (max-width:768px) {

#myNav {

  display: block;

}

span {

  display: block;
  font-size: 3rem;
  padding: 6px 8px 6px 16px;
  top: 0;
  position: absolute;

  width: 100%;

  cursor: url("./media/hand_cursor.png"), auto;

}

.overlay {

  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;

}

.overlay-content {

  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;

}

.overlay a {

  padding: 8px;
  text-decoration: none;
  font-size: 2rem;
  color: blue;
  display: block;
  transition: 0.5s;

}

.overlay a:hover, .overlay a:focus {

  color: #f1f1f1;

}

.overlay .closebtn {

  position: absolute;
  padding: 6px 8px 6px 16px;
  margin-top: 30px;
  font-size: 3rem;

}


.sidenav {

display: none;

}


.grid-container {

grid-template-columns: auto;
margin: 0;
margin-top: 15%;

}


.icon {

  width: 3%;

}


.grid-container-works {

grid-template-columns: auto;
grid-column-gap: 0;

margin-left:0;
margin-top:20%;
margin-right: 0;

}



.grid-film-works {

grid-template-columns: auto;
margin: 5%;
margin-top: 20%;
justify-content: center;

}


.slideshow-container {

  display: none;

}


.dot-position{

  display: none;

}


.film-stills {

  width: 100%;
  height: auto;

}


.img-slides-mobile {

  display: block;
  width:100%;
  object-fit: cover;

}

.img-slides {

  display: none;

}

.screener {

width: 100%;
height: auto;

}

.black-prince-mosaic {

  transform: scale(.4);

}

.raspberry-pi {

display: none;

}