/*------- body basics -------*/

* {
    cursor: url(/images/smallstarcursor.png), auto;
}

body {
    background-color: rgb(255, 255, 255);
    background: url("/images/pastelgothdripbg.png") repeat center fixed;
    color: white;
    text-shadow:
    -1px -1px 0 #6e47ad,
    1px -1px 0 #6e47ad,
    -1px 1px 0 #6e47ad,
    1px 1px 0 #6e47ad;  
    font: 20px vcrmono;
    margin: auto;
    height: 100vh;
    width: 100vw;
    scrollbar-width: thin;
    scrollbar-color: rgba(202, 221, 244, 0.7) rgba(202, 221, 244, 0.0);
}

center {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

header {
    display: block;
    height: 8vh;
    font: 40px daydream;
    padding: 5px;
    position: relative;
    color: #cae8eb;
}

navbar {
    display: block;
    height: 3vh;
    width: 960px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px dotted rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    font: 25px;
    padding-bottom: 5px;
}

main {
    display: block;
    height: 70vh;
    width: 960px;
    float: left;    
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px dotted rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    word-break: break-word;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(202, 221, 244, 0.7) rgba(202, 221, 244, 0.0);
}

main2 {
    display: block;
    height: 70vh;
    width: 750px;
    float: left;    
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px dotted rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    word-break: break-word;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(202, 221, 244, 0.7) rgba(202, 221, 244, 0.0);
}

sidebar {
    display: block;
    height: 70vh;
    width: 180px;
    float: left;    
    padding: 10px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px dotted rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    word-break: break-word;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(202, 221, 244, 0.7) rgba(202, 221, 244, 0.0);
} 

footer {
    display: block;
    height: 3vh;
    width: 960px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px dotted rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    overflow: hidden;
    padding-top: 5px;
}

credits {
    
}

a{
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

/*------- containers -------*/
    
    /* header container */
containerbanner {
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100%;
    position: relative;
    padding-top: 5px; 
    padding-bottom: 5px;
    color: white;
    text-shadow:
    -1px -1px 0 #6e47ad,
    1px -1px 0 #6e47ad,
    -1px 1px 0 #6e47ad,
    1px 1px 0 #6e47ad;  
}
    
    /* main body container */
container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100%;
    position: relative;
    padding: 0px; 
}

    /* main body with 2+ columns */
containerrow {
    display:flex; 
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100%;
    position: relative;
    padding: 0px; 
}

/*------- textboxes -------*/

   /* BASIC */
.textbox {
    height: auto;
    width: auto;
    position: relative;
    margin: 15px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.3);
    scrollbar-width: thin;
    scrollbar-color: rgba(202, 221, 244, 0.7) rgba(202, 221, 244, 0.0);
}

#laceborder1 {
    border: 10px solid transparent;
    border-image: url(/images/borders/laceborder.png);
    border-image-slice: 15 15 15 15;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: repeat; 
}

#cloudborder {
    border: 10px solid transparent;
    border-image: url(/images/borders/cloud.png);
    border-image-slice: 11 11 11 11;
    border-image-outset: 10px 10px 10px 10px;
    border-image-repeat: round round; 
}


/*------- headers -------*/

h1 {
    font: 20px daydream;
    line-height: 20px;
    padding: 5px;
    margin: 5px;
}

h2 {
    font: 30px unbutton;
    line-height: 30px;
    padding-bottom: 5px;
    margin: 5px;
}

.hr1 {
    display: block;
    border: none;
    height: 20px;
    margin: 0px;
    background: url("/images/dividers/sweets.gif") no-repeat center;
    background-size: contain;
}

.hr2 {
    display: block;
    border: none;
    height: 30px;
    margin: 0px;
    background: url("/images/dividers/stardivider.png") no-repeat center;
    background-size: contain;
}

.hr3 {
    display: block;
    border: none;
    height: 30px;
    margin: 0px;
    background: url("/images/dividers/stardividerwave.png") no-repeat center;
    background-size: contain;
}

.hr4 {
    display: block;
    border: none;
    height: 30px;
    margin: 0px;
    background: url("/images/dividers/blinkystars.gif") no-repeat center;
    background-size: contain;
}

.hr5 {
    display: block;
    border: none;
    height: 20px;
    width: 40%;
    margin: 0px;
    background: url("/images/pixels/willowisp.gif") round center;
    background-size: contain;
}

.hrinvisible {
    display: block;
    border: none;
    height: 10px;
    margin: 5px;
}

/*------- effects -------*/

/* blinking cursor */
blinking-cursor {
    position: relative;
    animation: blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    padding-right: 5px;
    font-family: monospace;
}

@keyframes blink {
  50% {
    border-color: transparent
  }
}

/* gives text an outline */
strokewhite{
    text-shadow:
    -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
    1px 1px 0 #FFF;  
}

/* tilted text */
tilt-l {
    display:inline-block;
    transform: rotate(-2deg);
}
tilt-r {
    display:inline-block;
    transform: rotate(2deg);
}
tilt-l2x {
    display:inline-block;
    transform: rotate(-5deg);
}
tilt-r2x {
    display:inline-block;
    transform: rotate(5deg);
}

/* rotate on hover */
rotate-r {
    display:inline-block;
    transition: transform 0.5s ease; /* Adds a smooth animation */
}

rotate-r:hover {
    transform: rotate(15deg); /* Rotates the text a full circle */
}

rotate-l {
    display:inline-block;
    transition: transform 0.5s ease; /* Adds a smooth animation */
}

rotate-l:hover {
    transform: rotate(-15deg); /* Rotates the text a full circle */
}

/*------- fonts -------*/

@font-face {
  font-family: acww;
  src: url("/fonts/acww.ttf");
}

@font-face {
  font-family: cdicons;
  src: url("/fonts/cdicons.ttf");
}

@font-face {
  font-family: daydream;
  src: url("/fonts/daydream.ttf");
}

@font-face {
  font-family: pkmn;
  src: url("/fonts/pkmn-classic.ttf");
}

@font-face {
  font-family: unbutton;
  src: url("/fonts/unbutton.ttf");
}

@font-face {
  font-family: vcrmono;
  src: url("/fonts/vcrmono.ttf");
}