/* Code & Credits
  
  Background for Page: https://alvaromontoro.com/blog/68009/lgbtq-flags-coded-in-css
  Rainbow Gradient Border: https://codepen.io/unnegative/pen/dVwYBq
  Rainbow Text: https://stackoverflow.com/questions/54702124/rainbow-text-animation-using-only-css
  
  Decal Artwork Base Ref: https://www.pixiv.net/en/users/9533536
  Artwork: Webmaster (Yugen)

  */
  
  /* Rest of it */
    body {
  margin: 0;
  padding: 0;
 background:
    conic-gradient(at 14% 50%, #0000 221.25deg, white 222deg 318deg, #0000 318.25deg),
    conic-gradient(at 23% 50%, #0000 221.25deg, #ffa6b9 222deg 318deg, #0000 318.25deg),
    conic-gradient(at 32% 50%, #0000 221.25deg, #00d2ff 222deg 318deg, #0000 318.25deg),
    conic-gradient(at 41% 50%, #0000 221.25deg, #753000 222deg 318deg, #0000 318.25deg),
    conic-gradient(at 50% 50%, #0000 221.25deg, black 222deg 318deg, #0000 318.25deg),
    linear-gradient(red 0 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0); 
  font-family: "Comic Neue", "LXGW WenKai Mono TC", Verdana;
  text-align: justify;
  font-size: 1rem;
  height: 100%;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden;
  cursor: url("cursor.png"), auto;
  scrollbar-color: #bb6385 #fcc8ce;
}

/* Headers */
h1 {
    margin-bottom: -1rem;
    text-align: center;
    font-family: "Protest Revolution", sans-serif;
    font-size: 5vh;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
}
@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}
h2 {
    font-family: "Protest Revolution", sans-serif;
    font-size: 2.5vh;
    margin: 0;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
h4 {
	color: #7c2f4c;
	margin: 0;
	padding: 0;
	text-align: center;
}

    .container {
        display: flex;
        gap: 2rem;
        width: 75vw;
        height: 90vh;
    }
    .side {
        background-color: #ffffffb4;
        border: 5px solid transparent;
        border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
        border-image-slice: 1;
        padding: 1rem;
		flex: 4;
		max-height: 100%;
		overflow: scroll;
		padding-left: 4rem;
		padding-right: 4rem;
    }

/* Page Decal */
	.botimgleft {
      position: absolute;
      bottom: 0;
      left: 0;
      max-width: auto;
	  height: 40vh;
	  pointer-events: none;
    }
    .topimg {
      position: absolute;
      top: -6vh;
      right: -2vw;
      max-width: auto;
	  height: 40vh;
	  pointer-events: none;
    }
	.botimgright {
      position: absolute;
      bottom: 0;
      right: 0;
      max-width: auto;
	  height: 40vh;
      pointer-events: none;
    }

/* Details & Summary */
	details>summary {
	list-style-type: none;
	}
	details>summary::-webkit-details-marker {
	display: none;
	}
	details>summary::before {
	content: '❤︎‎ ';
	}
	details[open]>summary::before {
	content: '-`♡´-‎ ';
	}
	details {
	border: 0.25rem dotted #ffffff;
	border-radius: 1rem;
	padding: 0.25rem;
	text-align: justify;
	font-size: 1.5vh;
	}
	summary {
    font-size: 1.75vh;
    padding: 0;
	text-align: center;
	font-weight: bolder;
    }
	details[open]>summary {
	margin-bottom: 0.5rem;
	}

	/* Menu Boxes */
	.grid-container {
	margin: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.5vw;
	}
	
	.card {
	grid-template-columns: auto, auto;
	grid-template-rows: auto, auto;
	}

/* unvisited link */
	a:link {
	color: #1a8b1f;
	}
	/* visited link */
	a:visited {
	color: #1a8b1f;
	}
	/* mouse over link */
	a:hover {
	color: #2ef8ff;
	}
	/* selected link */
	a:active {
	color: #bb6385;
	}


/* Media 1400 */
    @media (max-width: 1400px) {
		.botimgleft, .topimg {
			width: 300px;
			height: auto;
		}
		.botimg, .midtopimg {
			width: 150px;
			height: auto;
		}
	}
/* Media Phone */
    @media (max-width: 700px) {
		body {
			overflow: scroll;
		}
      .container {
        flex-direction: column;
        width: 90vw;
        height: 90vh;
      }
	.main,.side {
		min-height: 500px;
		overflow: scroll;
	}
    .botimg, .topimg, .botimgleft, .botimgright, .topimgleft, .midtopimg {
      display: none;
    }
	.foot {
		display: none;
	}
    .boxbox {
        display: inline-block;
    }
    .box {
    display: inline;
  }
    }