/* Global Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-size: 62.5%;
  --header1: calc(3.2vw);
  --header2: calc(2.4vw);
  --header3: calc(2.0vw);
  --header4: calc(1.6vw);
  --header5: calc(1.2vw);
  --text: calc(1.0vw);
  --background-color: #F5FFFA;
  --avro: calc(1.0vw);
  --navheight: calc(12vh);
  --nmb1: 20%;      /* portrait */
  --nmb2: 17%;      /* switch gear buttons */
  --nmb3: 40%;      /* header */
  --nmb4: 8%;      /* emblem */
  --nmb5: 15%;      /* calendar */
  height: 100%;
  width: 100%;
  overflow: hidden;
}

@font-face {
  font-family: 'main header font'; 
  src: url('./fonts/FrederickatheGreat-Regular.ttf') format('woff2');
  font-display: swap;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: 'regular text'; 
  src: url('./fonts/Sanchez-Regular.ttf') format('woff2');
  font-display: swap;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: 'Avro';
  src: url('./fonts/Arvo-Regular.ttf') format('woff2');
  font-display: swap;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

h1 {
  font-size: var(--header1);
  font-family: 'main header font', sans-serif; 
}

h2 {
  font-size: var(--header2);
}

h3 {
  font-size: var(--header3);
}

h4 {
  font-size: var(--header4);
}

h5 {
  font-size: var(--header5);
}

h6 {
  font-size: var(--text);
  font-family: 'regular text', sans-serif; 
}

ul {
  list-style: none;
}


.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Nav section */

.main-head {
  background-image: url("images\\textile3.webp");
  background-size: 10% 100%;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
}
/* <radio buttons + logo=25%><header=45%><calendar=30%>  */

nav {
  position: relative;
  width: 98%;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  max-height: var(--navheight);
  --edge_position: 1vw;
 }


div.nav-logo {
  height: var(--navheight); /* must be explicitly defined */
  width: var(--nmb1);
}

div.nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain
}




 div.portrait {
  width: var(--nmb1);
  height: var(--navheight); /* must be explicitly defined */
  position: relative;  
}

div.portrait img {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  border: 0.2rem solid white;
  padding: 0.2rem;
  border-radius: 50%;
 }


div.nav-buttons {
  height: var(--navheight);
  width: var(--nmb2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}



div.radio-button {
  padding: 0 0 0 var(--edge_position);
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

input[type="radio"] {
  margin: 1vw 0vw 1vw 0.2vw; 
}

label {
  margin-left: 0.4vw;
 }



input[type="radio"]:not(:checked):hover + label { 
  cursor: pointer;
  background-color: #a6b1e1;
}


















#myHeader {
  width: var(--nmb3);
  display: flex;
  justify-content: center; 
  align-items: center; 
  min-height: inherit;  
}

div.nav-logo {
  width: var(--nmb4);
  height: var(--navheight); /* must be explicitly defined */ 
}

div.nav-logo img {
  max-height: 100%;
  object-fit: scale-down;
  mix-blend-mode: multiply; 
}

 div#openCalendar {
  width: var(--nmb5);
  display: flex;
  min-height: inherit;
  align-items: center; 
  flex-direction: row-reverse;
  justify-content: flex-start;
  padding: 0 var(--edge_position) 0 0;
}

  #openCalendar img {
  max-height: 100%;
  cursor: pointer;	
 }

 #openCalendar h6 {
  align-items: center;
 }







.visualContent {
  display: flex;
  flex-direction: row;
  height: calc(100vh - var(--navheight));
}

.leftFrame, .rightFrame {
  flex-grow: 1;
  background-image: linear-gradient(to top, rgba(255,255,255,0.20), rgba(0,0,0,0.20));
}
.rightFrame {
  display: flex;
  flex-direction: column; 
  justify-content: flex-end;
  font-size: var(--avro);
  font-family: Avro, sans-serif; 
  text-shadow: 
            -1px -1px 0 white, 
            1px -1px 0 white, 
            -1px 1px 0 white, 
            1px 1px 0 white;  
  padding: 1rem 1rem 3rem 1rem;
  max-width: 20%
}


.slideshow-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0rem;
 }

 	.slideshow-container .mySlides {
		display: none;
	}


img {
  max-height: calc(100vh - var(--navheight)); 
}


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

 /* ++++++++++++++++++++++ */
 /* Image Number (1/3 etc) */
 /* ++++++++++++++++++++++ */
.numbertext {
  position: absolute;
  padding: 0 0.5rem 0 0.5rem;
  background-color: rgba(180,180,180, 0.6); 	
  color: black;
  font-size: var(--header5);
  left: calc(5% + 0.1vw);
  top: calc(5% + 0.1vh);
  text-shadow: 
            -1px -1px 0 white, 
            1px -1px 0 white, 
            -1px 1px 0 white, 
            1px 1px 0 white;  
  z-index: 100;
 }

	/* ++++++++++++++++++++ */
  /* Nex/Previous buttons */
  /* ++++++++++++++++++++ */
  .nextprevious {
		  position: absolute;
      text-shadow: 
            -1px -1px 0 white, 
            1px -1px 0 white, 
            -1px 1px 0 white, 
            1px 1px 0 white;
      z-index: 100;	
  	}

/* button 'next' */
  .rbtn {
    right: 1%;
 	}
 
/* button 'previous' */
  .lbtn {
    left: 1%;
  }
	.circle-button {
	  display: flex;
		align-items: center;
		justify-content: center;
    background-color: rgba(180,180,180, 0.6); 	
		color: black;
		width: 4rem; 
		height: 4rem;
		border: 0.15rem solid black;
		border-radius: 50%;
		cursor: pointer;
		font-size: var(--header4);
    display: none; 
 	}	

.circle-button:hover {
  background-color: #87bdd8;
  color: white;
}

/* ++++++++++++++++++ */
/* Play/Pause buttons */
/* ++++++++++++++++++ */
    div #pausebutton, #playbutton { 
		position: absolute;
		align-items: center;
		bottom: 5%;
		width: 5rem;
		height: 5rem;
		z-index: 100;
    display: none;
 	}

  .circle {
      position: absolute;
      background-color: rgba(180,180,180, 0.6); 	
		  border-style: solid;
		  border-width: 0.2rem;
      border-color: black;
      width: 100%;
		  height: 100%;		
	    border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
		  cursor: pointer;	
 	}

	.play-button {
      position: absolute;
	    background: none;		
      border-style: solid;
		  left: 1.6rem;
		  top: 1.4rem;
		  border-width: 1rem 0 1rem 2rem;
		  border-color: transparent transparent transparent black;
      cursor: pointer;
      z-index:101;	
 	}	
  	
	.pause-button {
      position: absolute;
	    background: none;
      border-style: double;
      left: 1.7rem;
	    width: 1.8rem;
      top: 1.4rem;
      height: 2.2rem;		
      border-width: 0px 0px 0px 1.6rem;
      border-color: black;
		  cursor: pointer;
      z-index:101;	
 	}
 
  .circle:hover { 
    background-color: #87bdd8;
 }

 .play-button:hover ~ .circle{
    background-color: #87bdd8;
 }
 
 .pause-button:hover ~ .circle{
    background-color: #87bdd8;
 }