/* 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." */

:root{
  
   /*LIGHTMODE*/
    
    --peach: #FFE5DE;
    --apricot:#FFA086;
    --lightercot: #FFC7B8;
    --salmon: #F5C7BC;
    --brightsalmon: #FCC4BD;
    --rust: #F25016;
    --raspberry: #9E1955;
    --edgeworth: #9C133E;
    --betterpink: #FF6DB0;
    --burgundy: #5F0424;
    --sherry: #40262C;
    --sherryLite: #71333F;
    --bluewhite: #E9F7F3;
    
    /*DARKMODE*/
    
    --moonyellow: #C3A60B;
    --yolkyellow: #F1D334;
    --offwhiteDM: #EAE3BD;
    --crow: #1F1C2D;
    --bluegrey: #423C5F;
  
  --beige: #efecdd;
  --betterbeige: #e7e3cb;
  --khaki: #dcd0ad;
  --cafe: #21140a;
  --wood: #432d1c;
  --offwhite: #faf4f1;
  --burnt: #d16510;
  --darkburnt: #6d3000;
  --seafoam: #addcd0;
  --nblue: #27c7ae;
  --wallowblue: #0EB095;
  
}

@font-face{
	font-family: "oct";
	src: url('/OctosquaresBold.ttf') format("truetype");
}
@font-face{
	font-family: "octthin";
	src: url('/OctosquaresRegular.ttf') format("truetype");
}
@font-face{
	font-family: "octdemi";
	src: url('/OctosquaresDemiBold.ttf') format("truetype");
}

@font-face{
	font-family: "octhead";
	src: url('/OctosquaresBlack.ttf') format("truetype");
}

img{
  max-width: 100%;
  max-height: 100%;
}

video{
  max-width: 100%;
  max-height:100%;
}

body {
  background-image:url('/lightmode.PNG');
	background-color: var(--peach);
	color: var(--burgundy);
  font: 22px oct;
}

a:link{
  color: var(--wallowblue);
}

a:visited{
  color: var(--nblue);
}

a:hover{
  color: var(--raspberry);
}

.flex{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

h1 {
  font: 34px octhead;
  color: var(--rust);
  line-height: .95;
}

h2 {
  margin: auto;
  font: 20px octdemi;
  color: var(--sherryLite);
}

.galtext {
  width: inherit;
  text-align: center;
  font: 20px oct;
  color: var(--peach);
  padding: 5px;
}

.hometitlecontainer{
  background-color: var(--lightercot);
  max-width: 100%;
  margin: auto;
  padding: 1px;
  padding-bottom: 4px;
  /*border: solid 5px var(--apricot);*/
  border-radius: 20px;
  text-align: center;
}

/*.hometitlecontainer h1{  /*TEXT OUTLINE*/ /*
   text-shadow:
      -1px -1px 0 var(--burgundy),
      1px -1px 0 var(--burgundy),
      -1px 1px 0 var(--burgundy),
      1px 1px 0 var(--burgundy),
      -1px 1px 0 var(--burgundy),
      1px 1px 0 var(--burgundy),
      1px -1px 0 var(--burgundy),
      1px 1px 0 var(--burgundy);
}*/


.hometitlecontainer h2{
  max-width: 85%;
  margin: auto;
  position: relative;
}

.titlecontainer {
  background-color: var(--peach);
  max-width: 80%;
  margin:0 auto;
  padding: 1px;
  border: dotted 5px var(--apricot);
  border-radius: 20px;
  text-align: center;
}

.aside{
  text-align: center;
  font: 20px oct;
  line-height: 30%;
  position: relative;
  margin:0 auto;
  background-color: rgba(245, 199, 188, .6);
  max-width: 40%;
  padding: 1px;
  border: dotted 3px var(--brightsalmon);
  border-radius: 22px;
}

.homebtn{
  background-color: rgba(255, 229, 222, 1);
  font-size: 18px;
  max-width: 90px;
  position: fixed;
  margin: auto;
  padding: 3px;
  padding-right: 6px;
  bottom: 0;
  left: 0;
  z-index: 1;
  border: dotted 3px rgba(255, 160, 134, .8);
  border-radius: 5px;
}

.side{
  max-width: 55%;
  position: fixed;
  left: 0;
  bottom: 0;
}

.homecontainer {
	margin: auto; 
	background-color: var(--peach);
	padding: 2px;
	border: dotted 5px var(--apricot);
	text-align: center;
	border-radius: 15px;
}

.footer {
  display:none;
}

.homefooter {
  display:none;
}

.smallfooter{
  background-color: var(--peach);
  font: 16px oct;
  text-align: center;
  max-width: 100%;
  position: fixed;
  bottom: 0;
  left:0;
  margin: auto;
  padding: 4px;
  padding-right: 6px;
  clear: both;
  border: solid 3px var(--salmon);
  border-radius: 10px;
}

.slidecontainer {
  position: relative;
  margin: auto;
  background-color: var(--salmon);
  border: solid 5px var(--salmon);
  align-items: center;
}

.gallerycontainer {
  position: relative;
  max-width: 90%;
  margin: auto;
  background-color: rgba(245, 199, 188, .7);
  border: solid 5px var(--salmon);
  border-radius: 5px;
}

.topgallerycontainer {
  display: flex;
  flex-flow: row wrap;
  margin: auto;
  justify-content: center;
  align-content: center;
  max-width: 90%;
  background-color: rgba(245, 199, 188, .7);
  border: solid 5px var(--salmon);
  border-radius: 5px;
}

.galslide{
  display: flex;
  flex-flow: row wrap;
  cursor: pointer;
  max-width: 85%;
  max-height: 80%;
  margin: 3px;
  padding: 5px;
  color: var(--salmon);
  background-color: var(--sherry);
  border: solid 3px var(--sherry);
  border-radius: 5px;
  justify-content: center;
}

.galvid{
  max-width: 85%;
  max-height: 80%;
  display: flex;
  flex-flow: row wrap;
  margin: 5px;
  padding: 5px;
  background-color: var(--sherry);
  border: solid 3px var(--sherry);
  border-radius: 5px;
  justify-content: center;
}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.illusslide {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chslide {
  display: none;
  background-color: var(--sherry);
  border: solid 3px var(--sherry);
  transition: opacity .5s ease-out;
}

.illgalslide {
  display: none;
  background-color: var(--sherry);
  border: solid 3px var(--sherry);
  transition: opacity .5s ease-out;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 12px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(64, 38, 44, 0.2)
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(64, 38, 44, 0.9);
  color: var(--salmon);
}

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

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

/* The Modal (background) */
.modal {
  text-align: justify;
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  display: block;
  /*padding: 5px;*/
  height: auto;
  width: auto;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  z-index: 2;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.nav {
  display: none;
}

.smallnav{
  max-width:50%;
  position: relative;
  font: 18px oct;
  margin: 5px auto;
  background-color: var(--peach);
  border: dotted 4px var(--apricot);
  text-align: center;
  border-radius: 5px;
}


/*.imgdisclaimWrapper {
  width:200px;
  height:200px;
  position: relative;
}

.imgdisclaim {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 229, 222, 1) 0%,
    rgba(255, 229, 222, 1) 70%,
    rgba(255, 229, 222, 0) 70.3%
  );
  height: 100%;
  width: 100%;
  position: relative;
  margin: 0;
}

.imgdisclaim p {*/

.imgdisclaim{
  display: flex;
  text-align: center;
  font: 16px octdemi;
  color: var(--sherryLite);
  max-width: 80%;
  position: relative;
  margin: auto;
  background-color: var(--peach);
  border: dotted 4px var(--apricot);
  border-radius: 50%;
  padding: 2px;
  margin-top: 8px;
}

.imgdisclaimcontent{
  /*display: none;*/
  max-width: 70%;
  max-height: 75%;
  margin: auto;
  position: relative;
  padding: 10px;
}

.WIPdisclaim{
  display: /*flex*/ none;
  text-align: center;
  font: 16px octhead;
  color: var(--rust);
  max-width: 80%;
  position: relative;
  float: right;
  background-color: var(--seafoam);
  border: dotted 4px var(--wallowblue);
  border-radius: 50%;
  padding: 8px;
  margin-top: 8px;
}

.WIPdisclaimcontent{
  max-width: 80%;
  max-height: 75%;
  margin: auto;
  position: relative;
}