/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*test test test */

:root{
 --bg1: #99ccff;
/* --bg2: #8ba8dd; */
  --bg2: #7497d8;
/*  --bg2shadow: #2d639f; */
 --bg2shadow: #4f4169;
 --headtext: #ff9933;
 --headborder: #4b3f6d;
}

body {
  /*background-image: url(/bg.png);*/
  background-image: linear-gradient(#99ccff, #c099ff); 
  /*background-repeat: repeat;*/
  /*background-color: var(--bg1);*/
  color: black;
  height: 100%;
  font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
}

h2{
  color: var(--headtext);
  text-align: justify;
  text-shadow: -1px 0 #4b3f6d, 0 1px #4b3f6d, 1px 0 #4b3f6d, 0 -1px #4b3f6d;
}


/*ELEMENTS FOR DESKTOP MODE*/

@media only screen and (min-width: 700px){
  .head{
    background-color: var(--bg2);
    text-align: right;
    margin-left: 2%;
    margin-right: auto;
    padding: 15px;
    height: auto;
    width: 160px;
    position: fixed;
    z-index: 1;
    border: 5px double #4b3f6d;
    top: 22px;
    box-shadow: 5px 7px var(--bg2shadow);
  }
h1{
  color: var(--headtext);
  letter-spacing: 5px;
  /*background-color: #684bab;*/
  background-color: var(--bg2);
  text-align: center;
  text-shadow: -1px 0  #4b3f6d, 0 1px #4b3f6d, 1px 0 #4b3f6d, 0 -1px  #4b3f6d;
  text-shadow: 2px 2px  #4b3f6d;
  padding: 20px;
  margin-left: 260px;
  margin-right: 2%;
  z-index: 1;
  border: 5px double var(--headborder);
  box-shadow: 5px 7px var(--bg2shadow);
}
  .body{
  /*background: #829ab8;*/
  background-color: var(--bg2);
  text-align: center;
  padding: 20px;
  margin-left: 260px;
  margin-right: 2%;
  width: auto;
  border: 2px solid #4b3f6d;
  box-shadow: 5px 7px var(--bg2shadow);
  }
.link1 {
  /*background-color: gold;*/
  background-color: #e6a10e;
  color: #42051f;
  padding: 8px 12px;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  display: block;
  border: 5px outset #db7d18;
}
p{
  color: black;
  margin-left: 2%;
  margin-right: 2%;
  font-size: 20px;
  text-align: left;
}
.footer{
  text-align: center;
  padding: 20px;
  font-size: 20px;
  margin-left: 260px;
  margin-right: 2%;
  width: auto;
}
  .return{
    background-color: var(--bg2);
    text-align: right;
    margin-left: 2%;
    margin-right: auto;
    padding: 15px;
    height: auto;
    width: 160px;
    position: fixed;
    bottom: 5%;
    z-index: 1;
    border: 5px double #4b3f6d;
    box-shadow: 5px 7px var(--bg2shadow);
  }
  .returnlink {
  /*background-color: gold;*/
  background-color: #e6a10e;
  color: #42051f;
  padding: 8px 12px;
  font-size: 30;
  text-align: center;
  text-decoration: none;
  display: block;
  border: 5px outset #db7d18;
}
.returnlink:hover, .returnlink:active {
  background-color: #fcbd3f;
  border: 5px inset #db7d18;
}
.img1{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  max-height: 700px;
}
.frame{
  width: auto;
  height: auto;
  padding: 0;
}
}





/*MOBILE ONLY*/
/*ELEMENTS FOR MOBILE MODE*/

@media only screen and (max-width: 699px){
.head{
  background-color: var(--bg2);
  font-size: 15px;
  text-align: center;
  padding: 1%;
  margin-bottom: 10px;
  height: auto;
  width: 95%;
  max-width: 699px;
  border: 5px double #4b3f6d;
}
h1{
  color: var(--headtext);
  letter-spacing: 5px;
  /*background-color: #684bab;*/
  background-color: var(--bg2);
  text-align: center;
  font-size: 20px;
  text-shadow: -1px 0 #4b3f6d, 0 1px #4b3f6d, 1px 0 #4b3f6d, 0 -1px #4b3f6d;
  padding: 1%;
  width: 95%;
  max-width: 699px;
  border: 5px double var(--headborder);
}
h2{
  font-size: 20px; 
}
p{
  color: black;
  margin-left: 2%;
  margin-right: 2%;
  font-size: 12px;
  text-align: left;
}
.footer{
  text-align: center;
  padding: 20px;
  margin-left: 2%;
  margin-right: 2%;
  font-size: 15px;
  width: auto;
  max-width: 699px;
}
.link1 {
  /*background-color: gold;*/
  background-color: #e6a10e;
  color: #42051f;
  padding: 4px 6px;
  text-align: center;
  text-decoration: none;
  display: block;
  border: 5px outset #db7d18;
}
.return{
  background-color: var(--bg2);
  position: sticky;
  bottom: 75px;
  right: 10px;
  text-align: center;
  padding: 2px;
  height: auto;
  width: auto;
  max-width: 699px;
  z-index: 1;
  border: 5px double #4b3f6d;
}
.returnlink {
  /*background-color: gold;*/
  background-color: #e6a10e;
  color: #42051f;
  padding: 5px 8px;
  font-size: 15;
  text-align: center;
  text-decoration: none;
  display: block;
  border: 5px outset #db7d18;
}
.returnlink:hover, .returnlink:active {
  background-color: #fcbd3f;
  border: 5px inset #db7d18;
}
.body{
  /*background: #829ab8;*/
  background-color: var(--bg2);
  text-align: center;
  padding: 20px;
  margin-left: 2%;
  margin-right: 2%;
  border: 2px solid #4b3f6d;
  width: auto;
  max-width: 699px;
} 
.img1{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  max-width: 699px;
  height: auto;
}
.frame{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.frame iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
}




.link1:hover, .link1:active {
  background-color: #fcbd3f;
  border: 5px inset #db7d18;
}
.link2 {
  /*background-color: gold;*/
  background-color: #e6a10e;
  color: #42051f;
  padding: 8px 12px;
  font-size: 30;
  text-align: center;
  text-decoration: none;
  display: block;
  border: 5px outset #db7d18;
  width: 200px;
  margin: auto;
}
.link2:hover, .link2:active {
  background-color: #fcbd3f;
  border: 5px inset #db7d18;
  width: 200px;
  margin: auto;
}






/* SLIDES */

/* slideshow container div*/

/* NOTE width and height of slideshow and img2 are 80% of 720p resolution*/


.next {
  right: 0;
}
.prev{
  left: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #fcbd3f;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 30px 10px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.3s ease;
  user-select: none;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: -30px;
  z-index: 1;
}


/* DESKTOP SLIDESHOW*/
@media only screen and (min-width: 700px){
.slideshow {
  max-width: 1024px;
  height: 576px;
  position: relative;
  margin: auto;
  box-sizing: border-box;
}
/* slideshow image container div*/
.slide {
  display: none;
}
.img2 {
  vertical-align: middle;
  max-width: 1024px;
  max-height: 576px;
  object-fit: scale-down;
}
}

/* MOBILE SLIDESHOW    50% of 720p res*/
@media only screen and (max-width: 699px){
.slideshow {
  max-width: 640px;
  height: 360px;
  position: relative;
  margin: auto;
  box-sizing: border-box;
}
/* slideshow image container div*/
.slide {
  display: none;
}
.img2 {
  vertical-align: middle;
  max-width: 90%;
  /*max-width: 640px;*/
  max-height: 360px;
  position: relative;
}
}