body {

	font-size: 18px;
	margin: 0;
  padding: 0px;
  background: #0D074A;
  color: #FDF6DA;
  background-image: url("/images/misc/dreamsbackground.png");
font: Georgia, serif;
list-style: none;
}

a {
  text-decoration: underline;
  color: #DCD4F2;
}


a:visited {
  color: #DCD4F2;
}

a:hover,
a:focus {
  color: #d50bb1;
  text-decoration: none;
}

h2 {
  
  font-size: 1.3em;
  margin-top: 0.4em;
  margin-bottom: 0.6em;
  font-family: "Slackey", sans-serif;
  font-weight: bold;
}

.item {
  background-color: white;
  padding: 15px;
  margin: 6px;
  border-radius: 11px;
 float: left;
  text-align: center;
  box-shadow: 0px 0px 20px 2px white inset, 0px 22px 6px rgba(255, 255, 255, .4) inset;
   font-family: "Slackey", sans-serif;
   font-size: 25px;
  
}

.item:hover {
  box-shadow: 0px 0px 20px 3px #9a80dc inset, 0px 22px 6px rgba(255, 255, 255, .4) inset;
}

.item:active {
  box-shadow: 0px 0px 20px 2px black inset, 0px 22px 6px rgba(255, 255, 255, .4) inset;
}

.folded-rectangle {
  --r: 40px; /* radius */
  width: 110.5%;
  height:80px;
  background: #502780;
  margin-bottom: -20px;
  mask:
    radial-gradient(var(--r) at 100% 100%,#0000 100%,#000 calc(100% + 1px))
    0 100%/var(--r) var(--r) no-repeat,
    linear-gradient(0,#0000 var(--r),#000 0);
    position: relative;
    right: 26px;
    top:-20px;
 
}

blockquote {
  background: rgba(13, 40, 255, 0.2);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

.wrapper {
  min-width: 1000px;
}

.page.sidebar {
  background-color: #502780;
  padding: 20px;
  height: 1200px;
  float: left;
  margin: 0px;
  
  width: 18%;
  min-width: 200px;
  
}

.page.mainbar {
  padding: 20px;
  height: auto;
  width: 72%;
  display: inline-block;

  
}

.page.mainbar2 {
  padding: 20px;
  height: auto;
  width: 90%;
  display: inline-block;

  
}

/* Clears the floats after the columns IMPORTANT*/
.row:after {
  content: "";
  display: table;
  clear: both;
  
}

.sidebox {
  background-color: #341A50;
  width:70%;
  padding: 20px;
  margin: 10px;
  border-radius: 18px;
  margin: auto;
  line-height:1.4;
  border: 3px solid #9a80dc;

}

.box {
  background-color: #341A50;
   width:100%;
  padding: 20px;
  margin-top: 5px;
  margin: auto;
  border: 3px solid #9a80dc;
  border-radius: 18px;
  box-shadow: 10px 5px 5px rgba( 49, 27, 100, .1);
  clear:left;
}

.bigbox {
  background-color: #341A50;
  width:60%;
  padding: 30px;
  margin: auto;
  border: 3px solid #9a80dc;
  border-radius: 18px;
   box-shadow: 10px 5px 5px rgba( 49, 27, 100, .1);
}

.specilbox {
  background-color: #341A50;
  width:50%;
  padding: 30px;
  margin: auto;
  border: 3px solid #9a80dc;
  border-radius: 18px;
   box-shadow: 10px 5px 5px rgba( 49, 27, 100, .1);
}

.titlebox {
  background: #9A80DC;
background: linear-gradient(90deg,rgba(154, 128, 220, 1) 0%, rgba(87, 136, 223, 1) 45%, rgba(51, 25, 79, 1) 68%);
  width:65%;
  padding: 15px;
  margin-left: auto;
  margin-bottom: 20px;
  margin-top: 20px;
  position: relative;
  border: 3px solid #9a80dc;
border-radius: 19px 75px 74px 19px;
  box-shadow: 10px 5px 5px rgba( 49, 27, 100, .1);
 float:left;
}

.titlesprites {
  position: absolute;
  top: -72px;
  left: -10px;

}

.scrollbox {
  background-color: #1c5f97;
  width:90%;
  height:400px;
  padding: 20px;
  margin-top: 5px;
  margin: auto;
  border: 3px solid #9a80dc;
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.06) 3px 4px 4px 3px inset;
  overflow: scroll;
}


/* container */
.two-columns-grid {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
}

/* columns */
.two-columns-grid > * {
    padding:1rem;
}

/* container */
.two-columns-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;

}

/* columns */
.two-columns-grid2 > * {
    padding:1rem;
}

textarea {
  width:250px;
}

/* styling the table itself */
    table.outlinks {
        margin: 2em auto;
        width: 85%; /* please change width of table as you fancy, as well as top-bottom margin, but if you leave the left-right margins set to auto, it will remain centered */
        background-color: white; /* color of the table cell's background (except the header) */
        border-collapse: separate;
        border-spacing: 0;
        border: 5px solid #9a80dc; /* color of the border surrounding the entire thing*/
        color: #5937a5;
        border-radius: 5px;
        overflow: hidden;
    }
    
    table.outlinks td,
    table.outlinks th {
        border: 5px solid #9a80dc; /* inner border, looks best if same color as outer */
        padding: 0.2em;
        vertical-align: middle;
    }
    /* below styles the header of the table */
    table.outlinks th {
        font-size: 1.3em;
        color: white;
    }
    
    table.outlinks thead {
        background-color: #9a80dc;
    }
    
    /* making sure the buttons have the correct amount of space within the first row of cells; change if using a different button size */
    table td:first-child {
        width: 88px;
        height: 31px;
    }
    
    /* links within the table, styled as simply as possible changing background color and text color */
    table.outlinks a {
        color: #ba615f;
        text-decoration: none;
        position: relative;
        border-radius: 0.1em;
        transition: ease 1s all;
    }
    
    table.outlinks a:hover {
        background-color: #ba615f;
        color: #fdc0c0;
    }
    
    /* making sure the hover link animation does not effect the background of the buttons, which might be transparent */
    table td:first-child a:hover {
        background-color:#fdc0c0;
    }


/*Big dropdown section*/
 /* Style the button that is used to open and close the collapsible content. don't forget to add the code on the html page */
.collapsible {
  background-color: #C2A1F5;
  color: #5937a5;
  cursor: pointer;
  padding: 18px;
  
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 17px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #A1ABF5;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none ;
  overflow: hidden;
  background-color: transparent;
  
} 
.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}


 /* Dropdown Button */
.dropbtn {
  background-color: #98d5f9;
  color: #083b6d;
  padding: 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #AD59E0;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 

.rotate {
  animation: rotation 11s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.rotate:hover {
  animation-play-state: paused;
}