/* MAIN PAGE */

body {
    text-align: center;
    background-image: url(/images/backgrounds/rainbow.png);
    background-color: white;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    font-family: woofles;
    color: #A66DED
    }

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

html {
  scroll-behavior: smooth;
}

* {
    scrollbar-color: #7F3FD8 #5404A6;
    }
    
/* END */

/* FONT */

@font-face {
    font-family: "woofles";
    src: url(https://file.garden/Z7olrKMJ3yJB2dEL/Woofles-Regular.otf) format("opentype");
}

@font-face {
    font-family: "dramatic";
    src: url(https://file.garden/Z7olrKMJ3yJB2dEL/HP-Voice-Crack-Regular.ttf) format("opentype");
}

/* END */

/* CONTAINERS */
.small {
    margin: auto; width: 730px; height: auto; padding: 10px;
    background-color: #AFFAFF;
    border-radius: 25px;
    border-style: solid; border-width: 12px; border-color: #52D0FF;
    outline: 12px solid #FFFFFF;
    color: #A66DED;
    background-image: url(/images/backgrounds/shadowoverlay.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}

.main {
    margin: auto; width: 930px; height: auto; padding: 10px;
    background-color: #AFFAFF;
    border-radius: 25px;
    border-style: solid; border-width: 12px; border-color: #52D0FF;
    outline: 12px solid #FFFFFF;
    color: #A66DED;
    background-image: url(/images/backgrounds/shadowoverlay.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}

.homepage {
    margin: auto; width: 970px; height: auto; padding: 10px;
    background-color: #AFFAFF;
    border-radius: 25px;
    border-style: solid; border-width: 12px; border-color: #52D0FF;
    outline: 12px solid #FFFFFF;
    color: #A66DED;
    background-image: url(/images/backgrounds/shadowoverlay.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}

.read {
    margin: auto; width: 850px; height: auto; padding: 10px;
    background-color: #AFFAFF;
    border-radius: 25px;
    border-style: solid; border-width: 12px; border-color: #52D0FF;
    outline: 12px solid #FFFFFF;
    color: #A66DED;
    background-image: url(/images/backgrounds/shadowoverlay.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}

.cast {
    margin: auto; width: 970px; height: auto; padding: 10px;
    background-color: #AFFAFF;
    border-radius: 25px;
    border-style: solid; border-width: 12px; border-color: #52D0FF;
    outline: 12px solid #FFFFFF;
    color: #A66DED;
    background-image: url(/images/backgrounds/stripesoverlay.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.char {
  margin-left: 15px; margin-right: 15px; width: auto; height: auto;
  background-color: #FFFFFF;
  border-radius: 20px;
  border-style: solid; border-width: 12px; border-color: #000000;
  outline: 12px solid #FFFFFF;
  background-image: url(/images/backgrounds/stripesoverlaywhite.png);
  background-size: cover;
  background-position: center;
}

.mainbutton {
    background-color: #BD87FA;
    border-radius: 25px;
    border-style: solid;
    border-width: 12px;
    border-color: #7F3FD8;
    outline: 12px solid #FFFFFF;
    color: #FFE8FB;
    font-family: woofles;
    font-weight: bold;
    font-size: 60px;

    
    background-image: url(/images/backgrounds/buttonoverlay.png);
    background-size: cover;
    background-position: top;

    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;

    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.mainbutton:hover {
    background-color: #A66DED;
    transform: scale(1.03);
    cursor: pointer;
}

.smallerbutton {
    background-color: #BD87FA;
    border-radius: 25px;
    border-style: solid;
    border-width: 12px;
    border-color: #7F3FD8;
    outline: 12px solid #FFFFFF;
    color: #FFE8FB;
    font-family: woofles;
    font-weight: bold;
    font-size: 32px;

    
    background-image: url(/images/backgrounds/buttonoverlay.png);
    background-size: cover;
    background-position: 50% 15%;

    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;

    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.smallerbutton:hover {
    background-color: #A66DED;
    transform: scale(1.03);
    cursor: pointer;
}

.aboutnav {
    margin: auto; width: 1270px; height: auto; padding: 0px;
    z-index: 9999;
}

.accent {
  margin-left: 10px; margin-right: 10px; width: auto; height: auto;
  color: #FFE8FB;
  background-color: #BD87FA;
  border-radius: 20px;
}

.dark {
  margin-left: 10px; margin-right: 10px; width: auto; height: auto;
  color: #7F3FD8;
  background-color: #73E4FF;
  border-radius: 20px;
}

.midlight {
  margin-left: 10px; margin-right: 10px; width: auto; height: auto;
  background-color: #FFE8FB;
  border-radius: 20px;
}

.light {
  margin-left: 10px; margin-right: 10px; width: auto; height: auto;
  color: #BD87FA;
  background-color: #ffffff;
  border-radius: 20px;
}

.middark {
  margin-left: 15px; margin-right: 15px; width: auto; height: auto;
  color: #A66DED;
  background-color: #400080;
  border-radius: 20px;
}

.darker {
  margin-left: 10px; margin-right: 10px; width: auto; height: auto;
  color: #BD87FA;
  background-color: #5404A6;
  border-radius: 20px;
}

.container {
  display: flex;
  width: auto;
  height: auto;
}

.column1 {
  float: left;
  width: 35%;
}

.column2 {
  float: right;
  width: 65%;
}

.column3 {
  float: left;
  width: 50%;
}

.column4 {
  float: right;
  width: 50%;
} 

.imagecolumn {
  margin: auto; width: auto; height: auto;
  flex: 33.33%;
  padding: 5px;
}

/* END */

/* IMAGES */

.round {
    border-radius: 25px;
}

.roundborder {
    border-radius: 25px;
    border-style: solid;
    border-width: 12px;
    border-color: #ffffff;
    outline: 12px solid #BD87FA;
    
}

.whiteborder {
    border-radius: 25px;
    border-style: solid;
    border-width: 12px;
    border-color: #ffffff;
}

.hover {
    transition: transform 0.15s ease-in-out;
}

.hover:hover {
  transform: scale(1.05);
}

.btn {
    transition: transform 0.15s ease-in-out;
}

.btn:hover {
  transform: scale(1.05);
  cursor: pointer;
}


.rndhover {
    border-radius: 25px;
    outline: 12px solid #ffffff;
    transition: transform 0.15s ease-in-out;
}

.rndhover:hover {
  transform: scale(1.02);
}

.tiltright{
  transition: transform 0.15s ease-in-out;
}

.tiltright:hover {
  transform: rotate(2deg) scale(1.03);
}

.tiltleft{
  transition: transform 0.15s ease-in-out;
}

.tiltleft:hover {
  transform: rotate(-2deg) scale(1.03);
}

/* END */

/* TEXT */

h1 { font-size: 75px; margin: 15px;}
h2 { font-size: 60px; margin: 15px;}
h3 { font-size: 50px; margin: 15px;}
h4 { font-size: 40px; margin: 15px;}
h5 { font-size: 30px; margin: 15px;}
h6 { font-size: 20px; margin: 15px;}

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: white;
  color: #BD87FA;
  text-align: center;
  border-radius: 25px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 120%;
  left: 10%;
  margin-left: -65px;
  opacity: 0;
  transition: opacity 200ms ease-in, visibility 0ms ease-in 200ms;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transition: opacity 200ms ease-in, visibility 0ms ease-in 0ms;
}

.tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: rgb(255, 255, 255) transparent transparent transparent;
}

.spoiler {
  color: #5404A6;
  background-color: #5404A6;
  border-radius: 25px;
  padding: 13px; padding-top: 8px; padding-bottom: 8px;
  transition: background-color 0.3s ease;

}

.spoiler:hover {
  color: #5404A6;
  background-color: transparent;
  border-radius: 25px;
  padding: 13px; padding-top: 8px; padding-bottom: 8px;
  transition: background-color 0.3s ease;
}

.warn {
    color: #FFE7EE;
    background-color: #FF8DAE;
    border-radius: 25px;
    padding: 13px;
    font-weight: bold;
    border-width: 12px;
    border-style: solid;
    border-color: #FF3F7C;
}

.warn2 {
    color: #FFE7EE;
    background-color: #FF3F7C;
    border-radius: 25px;
    padding: 13px;
}

.censor {
  color: #FFFFFF;
  background-color: #400080;
  border-radius: 25px;
  padding: 13px;
  font-weight: bold;
}

.highlight {
    color: #7F3FD8;
    background-color: #73E4FF;
    border-radius: 25px;
    padding: 13px;
}

.lighthighlight {
    color: #BD87FA;
    background-color: #AFFAFF;
    border-radius: 25px;
    padding: 13px;
}

.lighterhighlight {
    color: #BD87FA;
    background-color: #ffffff;
    border-radius: 25px;
    padding: 13px;
}

.purpleaccent {
    color: #FFE8FB;
    background-color: #BD87FA;
    border-radius: 25px;
    padding: 13px;
}

a:link {
  color: #FFE8FB;
  text-decoration: none;
}

a:visited {
  color: #FFE8FB;
  text-decoration: none;
}

a:hover {
  color: #FFC6F6;
  text-decoration: none;
}

a:active {
  color: #FFC6F6;
  text-decoration: none;
}

summary {
  color: #00ABFF;
}

summary:hover {
  color: #0077FF;
  cursor: pointer;
}

.summary {
  background-color: #73E4FF;
  border-radius: 10px;
  padding: 13px;
}

summary::marker {
  content: "";
}

details[open] summary::marker {
  content: "";
}

/* END */