/* MAIN PAGE */

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

.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");
}

/* END */

/* CONTAINERS */

.main {
    margin: auto; width: 930px; height: auto; padding: 30px;
    background-color: #AFFAFF;
    border-radius: 20px;
    border-style: solid; border-width: 10px; border-color: #52D0FF;
    outline: 7px solid #FFFFFF;
    box-shadow: 0px 5px 15px #400080;
    color: #00ABFF;
}

.mainread {
    margin: auto; width: 1000px; height: auto; padding: 10px;
    background-color: #AFFAFF;
    border-radius: 20px;
    border-style: solid; border-width: 10px; border-color: #52D0FF;
    outline: 7px solid #FFFFFF;
    box-shadow: 0px 5px 15px #400080;
    color: #00ABFF;
}

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

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

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

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

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

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

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

.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;
  height: auto;
}

/* END */

/* IMAGES */

.round {
    border-radius: 15px;
    box-shadow: 0 7px 0 #73E4FF;
}

.roundborder {
    border-radius: 20px;
    border-style: solid; border-width: 12px; border-color: #400080;
    outline: 8px solid #ffffff;
    
}

.cast {
    border-radius: 20px;
    outline: 10px solid #ffffff;
}

.roundhover {
    border-radius: 15px;
    box-shadow: 0 7px 0 #73E4FF;
    transition: transform 0.3s ease;
}

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

.roundhover2 {
    border-radius: 15px;
    box-shadow: 0 7px 0 #73E4FF;
    transition: transform 0.3s ease;
}

.roundhover2:hover {
  transform: scale(1.03);
}

.tiltright{
  transition: transform 0.3s ease;
}

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

.tiltleft{
  transition: transform 0.3s ease;
}

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

/* END */

/* TEXT */

.mainbutton {
  background-color: #73E4FF;
  color: #0077FF;
  font-weight: bold;
  border-radius: 20px;
  border-style: solid; border-width: 10px; border-color: #00ABFF;
  outline: 7px solid #FFFFFF;
  box-shadow: 0px 5px 15px #400080;
  padding: 10px;
  font-family: woofles;
  font-size: 35px;
  margin: 15px;
  transition: transform 0.3s ease;
  z-index: 2;
}

.mainbutton:hover {
  background-color: #AFFAFF;
  color: #00ABFF;
  font-weight: bold;
  border-radius: 20px;
  border-style: solid; border-width: 10px; border-color: #52D0FF;
  outline: 7px solid #FFFFFF;
  padding: 10px;
  font-family: woofles;
  font-size: 35px;
  cursor: pointer;
  transform: scale(1.03);
  z-index: 2;
}

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

}

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

.kindle {
  background: linear-gradient(to right, #FF6695, #FFBF55, #FBFF8C, #64F498, #73E4FF, #ED9DFF);
  background-clip: text;
  color: transparent;
}

.kindlebg {
  color: #AFFAFF;
  background-color: #5404A6;
  border-radius: 10px;
  padding: 13px;
}

.warn {
    color: #FF306B;
    background-color: #FFACC7;
    border-radius: 10px;
    padding: 13px;
    font-weight: bold;
}

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

.lighthighlight {
    color: #00ABFF;
    background-color: #AFFAFF;
    border-radius: 10px;
    padding: 13px;
}

.lighterhighlight {
    color: #00ABFF;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 13px;
}

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

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

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

a:active {
  color: #52D0FF;
  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 */