/*CUSTOM COLORS*/
:root{
    /*LIGHTMODE*/
    
    --peach: #FFE5DE;
    --burnt: #AD4612;
    --raspberry: #B00B69;
    --betterpink: #FF6DB0;
    --burgundy: #5F0424;
    --bluewhite: #E4F5EE;
    
    /*DARKMODE*/
    
    --moonyellow: #C3A60B;
    --yolkyellow: #F1D334;
    --offwhite: #EAE3BD;
    --crow: #1F1C2D;
    --bluegrey: #423C5F;
}

/*FONTS*/
@font-face{
	font-family: "venice";
	src: url('/VeniceClassic.ttf') format("truetype");
}

@font-face{
	font-family: "add";
	src: url('/ADDSBP__.TTF') format("truetype");
}

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

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


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



body {
	background-image:url('/lightmode.PNG');
	background-color:#FFE5DE;
	color: #B00B69;
	font-family: oct;
	font-size: 18px;
}
a:link {
	color: #AD4612;
}

a:visited {
  color:#FF6DB0;
}

a:hover {
  color:#FFA5CF; 
}

ul {
	list-style: "◊ ";
	color: teal;
}
 h1 {
	color: #5F0424;
	font: 60px venice;
	background-color: #FFE5DE;
	margin: 30px;
	padding: 40px;
	text-align: center;
	border: ridge 8px teal;
}

h2 {
	color: #5F0424;
	font: 32px venice;
	background-color: #FFE5DE;
	margin: 10px;
	padding: 20px;
	border: dashed 3px teal;
}

strong{
  color:#5F0424;
}

ul strong{
  color:#B00B69;
}



#container{
	max-width: 1000px;
	margin: 0 auto;
}

#textgal{
  max-width: 1100px;
	margin: auto;
	padding: 10px;
}

.btn-box{
  width:150px;
  height: 20px;
  margin: 3px;
  position: absolute;
}

.btn{
  position:absolute;
  top: 0;
  right: -3px;
}

.homebtn-box{
  position:absolute;
  width:150px;
  height: 20px;
  margin: 50px;
  left: -42px;
}
  
.side{
  width:250px;
  height:250px;
  float: right;
}

#blinkies{
  width: 50%;
  margin: 0 auto;
}

.styledbtn{
  content:url(https://files.catbox.moe/11hkur.gif);
}

.styledhome{
  content:url(https://files.catbox.moe/iqoa54.gif);
}

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

.slidecontainer{
  width: 1150px;
  min-height: 550px;
  margin: auto;
  border: ridge 5px teal;
  background-color: #FFE5DE;
}

.slideimg{
  cursor: pointer;
  width: 900px;
  max-height: 500px;
  margin: 5px;
  padding: 10px;
  border: dashed 3px teal;
  background-color: var(--bluewhite);
}

.illusslide{
  display:none;
  max-height: 650px;
  margin: 0 auto;
}


.gallery-container{
  width: 1150px;
  margin: auto;
  border: ridge 5px teal;
  background-color: var(--peach);
  /*display: grid;
  grid-auto-rows: 375px 500px;
  grid-auto-flow: dense;
  */
}

.gallery{
  cursor: pointer;
  width:300px;
  max-height:500px;
  margin: 5px;
  padding: 10px;
  border: dashed 3px teal;
  background-color: var(--bluewhite);
  
}

.gallery:hover {
  opacity:0.7;
}

.textgallery{
  width: 500px;
  height:250px;
  margin: 5px;
  padding: 10px;
  border: dashed 3px teal;
  background-color:rgba(255, 255, 255, 0.2);
}




/*
.gallery{
  margin: 5px;
  padding: 10px;
  border: dashed 3px teal;
  background-color: var(--peach);
}*/

/*BEGINNING OF CODE STOLEN FROM W3SCHOOLS*/
  
.modal {
  display: none; /*Hidden by default */
  position: fixed;  /*Stay in place*/
  z-index: 1;  /*Sit on top */
  left: 0;
  top: 0;
  width: 100%;  /*Full width */
  height: 100%;  /*Full height */
  overflow: auto;  /*Enable scroll if needed */
  background-color: teal;  /*Fallback color */
  background-color: rgba(27,62,64,0.9);  /*Black w/ opacity */
}  

.modal-content {
  margin: auto;
  display: block;
  padding:20px;
  height: auto;
  width: auto;
  max-height: 650px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image 
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}*/

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 15px;
  margin-top: -50px;
  color: var(--peach);
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 10px;
  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(27,62,64,0.9);
}

/*@media(prefers-color-scheme: dark) {*/
  .dark {
	background-image:url('/darkmode.PNG');
	background-color:#1F1C2D;
	color: #EAE3BD;
	font-family: oct;
	font-size: 18px;
}

.dark a:link {
	color: #C3A60B;
}

.dark a:visited {
  color:#F1D334;
}

.dark a:hover {
  color:white;
}

.dark ul {
	list-style: "☽ ";
	color: #EAE3BD;
}

.dark h1 {
	color: #EAE3BD;
	font: 60px venice;
	background-color: #1F1C2D;
	margin: 30px;
	padding: 40px;
	text-align: center;
	border: ridge 8px #423C5F;
}

.dark h2 {
	color: #EAE3BD;
	font: 32px venice;
	background-color: #1F1C2D;
	margin: 10px;
	padding: 20px;
	border: dashed 3px #423C5F;
}

.dark strong{
  color:#C3A60B;
}

.dark ul strong{
  color:#C3A60B;
}
  .dark .textgallery{
  width: 500px;
  max-height:250px;
  margin: 5px;
  padding: 10px;
  border: dashed 3px #423C5F;
  background-color:rgba(66, 60, 95, 0.3);
}
 .dark .modal {
  display: none; /*Hidden by default */
  position: fixed;  /*Stay in place*/
  z-index: 1;  /*Sit on top */
  left: 0;
  top: 0;
  width: 100%;  /*Full width */
  height: 100%;  /*Full height */
  overflow: auto;  /*Enable scroll if needed */
  background-color: rgba(0,0,0,0.9);  /*Fallback color */
  background-color: rgba(31, 28, 45, 0.9);  /*Black w/ opacity */
}  
.dark .gallery-container{
  width: 1150px;
  margin: auto;
  border: ridge 5px #423C5F;
  background-color: #1F1C2D;
  /*display: grid;
  grid-auto-rows: 375px 500px;
  grid-auto-flow: dense;
  */
}
.dark .gallery{
  cursor: pointer;
  width:300px;
  max-height:500px;
  margin: 5px;
  padding: 10px;
  border: dashed 3px #423C5F;
  background-color: #EAE3BD;
}

.dark .slidecontainer{
  border: ridge 5px #423C5F;
  background-color: #1F1C2D;
}

.dark .slideimg{
  border: dashed 3px #423C5F;
  background-color:#EAE3BD;
}


/* Next & previous buttons */


/* On hover, add a black background color with a little bit see-through */
.dark .prev:hover,
.dark .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.dark .styledbtn{
  content:url(https://files.catbox.moe/ig1sil.gif);
}

.dark .styledhome{
  content:url(https://files.catbox.moe/0vz15i.gif);
}
/*}*/







/* Hide the slides by default /
.mySlides {
  display: none;
}

/* Next & previous buttons /*
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* 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(0, 0, 0, 0.8);
}
*/