::selection {
/* Change highlight background color */
background: #FFC7F1;
/* Change highlight text color */
color: #FFFFFF;
}

a:link {
  color: #FFC7F1;
  background-color: transparent;
  text-decoration: underline;
  cursor:url('https://cdn.cursors-4u.net/previews/tiny-hand-pink-bow-tie-2cef9955-32.webp') 32 32, auto;
}

a:visited {
  color: #660012;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: #332C4C;
  background-color: transparent;
  text-decoration: underline;
  cursor:url('https://cdn.cursors-4u.net/previews/tiny-hand-pink-bow-tie-2cef9955-32.webp') 32 32, auto;
}

a:active {
  color: #B88FD4;
  background-color: transparent;
  text-decoration: underline;
  cursor:url('https://cdn.cursors-4u.net/previews/tiny-hand-pink-bow-tie-2cef9955-32.webp') 32 32, auto;
}

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

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

@font-face {
font-family: cross-stitch;
src: url(fonts/CROSSSTITCH.ttf);
}

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

@font-face {
font-family: monsterfriend;
src: url(fonts/MonsterFriendFore.otf);
}

::-webkit-scrollbar {
  width: 8px;
   height: 8px
}

::-webkit-scrollbar-thumb {
   background: #B8B0FF;
    background-size: 100%;
   border: 1px solid #FFC7F1;
   border-radius: 8px;
 }

 ::-webkit-scrollbar-thumb:hover {
   background: #5A5A82;
   background-size: 100%;
   border: 1px solid #d9b0ff;
   border-radius: 8px;
 }

::-webkit-scrollbar-track {
   background: white;
   border: 1px solid #b8b0ff;
   border-radius: 8px;
 }
 
::-webkit-transform {
   transition:scale(1.1);
}

/* SITE CONSTANTS */
body {
 background-color: transparent;
 color: black;
 font-family: 'pixel';
 background-image: url('pics/bg - gingham.jpg');
 background-repeat: repeat;
 overflow: hidden;
 cursor:url('https://cdn.cursors-4u.net/previews/church-38b4c37b-32.webp') 32 32, auto;
}

#container {
 /*main page*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: static;
  z-index: 4;
  
  background-color: white;
  border-width: 7px;
  border-style: solid;
  border-image: url("https://i.imgur.com/FsgoCPW.png") 7 fill round;

  width: 880px;
  height: 850px;
  padding: 5px;
  text-align: center;
  justify-content: center;
  margin: auto;
}
  
#header-container {
  position: static;
  z-index: 5;
  left: 1;
  
  border-width: 1px;
  border-style: solid;
  border-color: white;
  background-image: url('pics/header - black crosses.gif');
  background-repeat: repeat;
  box-shadow: 0 0 8px 8px white inset;
  
  width: 880px;
  height: 170px;
  text-align: justify;
  justify-content: center;
  margin:auto;
}

#main-container { 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
  background-image: url('pics/bg - nintendo grid.webp');
  background-repeat: repeat;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  
  padding: 20px ;
  overflow: hidden;
  box-sizing: border-box;
  width: 650px;
  height: 630px;
  justify-content: center;
  align-items: center;
  margin:1px;
}
 
#logo {
/*webpage logo*/
  font-family: 'gothiksteel';
  font-size: 80px;
  color: black;
  margin-top: 60px;
  margin-left: 10px;
}

.subtitle{
  position: relative;
  color: #5A5A82;
  font-size: 16px;
  font-family: 'cross-stitch';
  font-weight: bold;
  text-shadow: 2px 0px 1px white, 0px 2px 1px white, -2px 0px 1px white, 0px -2px 1px white, 3px 3px 3px;
  z-index: 3
}

.title-bar {
  background-image: url('pics/bg - gray bows.png');
  position:relative;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  width: 100%;
  padding: 0.75em;
  display:block;
  justify-content: center;
  align-items: center;
  text-align: center;
  align-content: center;
  margin: 1px;
  }

#scroll-container { 
  position: relative;
  background-color: white;
  background-image: linear-gradient(#fff 50%, #eadcf5 100%);
  border: 1px solid #b88fd4;
  border-radius: 4px;
  height: 25px;
  overflow: hidden;
  white-space: nowrap;
}

.scrolling {
  animation: marquee 6s linear infinite;
  display: inline-block;
  padding-right: 10px;
}

  @keyframes marquee {
  from {
    transform: translateX(0);
  }
  to { 
    transform: translateX(-100%);
  }
}

/* END SITE CONSTANTS */

#gaia-avi {
 position:relative;
 left:610px;
 top:-85px;
 writing-mode: vertical-lr;
 text-orientation: upright;
}

#gaia-avi:hover { 
  background: rgba(255, 199, 241, .4) ;
  box-shadow: 0 0 50px #FFC7F1;
  }

/*HOME - SIDE BAR LEFT*/
#left-container { 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  background: white;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  width: 200px;
  height: 585px;
  justify-content: space-evenly;
  align-items: center;
}

.fixed-side-box {
  background-image: url('pics/bg - ichigo.png');
  position:relative;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  width: 170px;
  padding: 0.75em;
  display:block;
  justify-content: center;
  align-items: center;
  margin: 1px;
  text-align: center;
  }

.fixed-side-box-inner {
  background-color: #fff;
  position:relative;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  width: 170px;
  height: 96px;
  display:block;
  justify-content: center;
  align-items: center;
  margin:auto;
  overflow-y: auto;
  }

  /* LOG BOX */
#logbox p {
 width: 170px;
  height: fit-content;
  margin: auto;
  margin-top: 5px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px dashed #FFC7F1;
  padding-bottom: 3px;
 }
    
#logbox p::before {
  content: "-";
  padding-right: 5px;
 }

 /* NEIGHBORS */
#zoom {
  transition: transform .2s;
  margin: 0 auto;
  overflow: auto;
}

#zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}

/* SITE BUTTON */
textarea {
  width: 95px;
  height: 65px;
}
/* END HOME - SIDE BAR LEFT*/

/*HOME - CENTER CONTAINER*/
#center-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  background: white;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  width: 400px;
  height: 584px;
  margin: auto;
  justify-content: space-evenly;
}

#welcome-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  border-width: 8px;
  border-style: solid; 
  border-image: url("https://i.imgur.com/e3EPu48.png") 12 fill round; 
  
  overflow-y: scroll;
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin:1px;
}

.dynamic-box-inner {
  background-color: #fff;
  position:relative;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  width: 170px;
  height: 100%;
  display:block;
  justify-content: center;
  align-items: center;
  margin:auto;
  overflow-y: auto;
  }

.title-bar-fixed {
  background-image: url('pics/bg - gray bows.png');
  position:relative;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  width: 170px;
  padding: 0.75em;
  display:block;
  justify-content: center;
  align-items: center;
  margin: 1px;
  text-align: center;
  }

#stamp-scroller { 
  position: relative;
  height: 50px;
  width: 400px;
  justify-content: center;
  align-items: center;
}




/*END HOME - CENTER CONTAINER*/

/*NAVIGATION BAR (RIGHT)*/
#nav-title {
  font-family: 'monsterfriend';
   -webkit-text-stroke: 0.5px black;
  color: #fff;
  font-size: 14.5px;
  text-align: center;
}

#nav-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
  position: static;
  z-index: 0;
  top: 0;
  left: 186;
  
  border-width: 7px; 
  border-style: solid; 
  border-image: url("https://i.imgur.com/ROjUrNz.gif") 6 fill round;          
  background: transparent;

  overflow: hidden;
  box-sizing: border-box;
  width: 150px;
  height: 630px;
  justify-content: center;
  align-items: center;
  margin:1px;
}

#navbar {
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
 
  width: 135px;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin: auto;
  overflow: hidden;
  display: block;
  text-align: center;
}

.navbutton{
  font-family: "pixel";
  font-size: 18px;
  width: 97%;
  height: 27px;
  border: 1px dotted #FFC7F1;
  background-color: white;
  background-image: linear-gradient(#fff 50%, #eadcf5 100%);
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.navbutton:hover {
  background-image: linear-gradient(#BCBFE6 50%, #5A5A82 100%);
}

.navbutton:hover > a {color:black}

.nav a:link {
  color: #8683D4;
  background-color: transparent;
  text-decoration: none;
}

.nav a:visited {
  color: #660012;
  background-color: transparent;
  text-decoration: none;
}

.nav a:hover {
  color: #6560E5;
  background-color: transparent;
  text-decoration: underline;
}

.nav a:active {
  color: #A4152F;
  background-color: transparent;
  text-decoration: underline;
}

.nav a {text-decoration: none; color: white; }

/* music player start */

#glenplayer02 {
position:relative;
top:2em;
display:flex;
z-index:99;
justify-content: center;
align-items: center;
text-align: center;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
width:12.5px;
font-size:13px;
cursor:pointer;
}
 
.playy, .pausee {color:#000;} /* color of play & pause buttons */
 
.pausee {display:none;}
 
.sonata {
margin-left:10px;
color:#000; /* color of music note symbol */
}
 
.labeltext {
margin: auto;
text-align: center;
font-family:'pixel';
font-size:12px;
color:#000; /* color of song title */
/* music player end */
}
/*END NAVIGATION BAR (RIGHT)*/
/* HOME PAGE END */

/* SPLASH PAGE*/
#splash-container {
  display: flex;
  background-image: url('pics/bg - nintendo grid.webp');
  background-repeat: repeat;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  padding: 20px;
  
  overflow: hidden;
  box-sizing: border-box;
  width: 500px;
  height: 500px;
  margin: auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#train-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  background: white;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  width: 350px;
  height: fill;
  margin: auto;
  justify-content: space-evenly;
}

#train-container img {
  width: 350px;
  align-content: center;
}

#text-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  background: white;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  width: 350px;
  height: fill;
  margin: auto;
  padding: 20px;
  font-size: 12px;
  text-align: center;
}
/* END SPLASH PAGE*/

/* ABOUT PAGE */
#pfp-border {
 /*(c) solielios*/
  border-width:12px;
  border-style:solid;
  border-image: url("https://i.imgur.com/Kh6qtcn.png") 11 fill round;         
    
  border-radius:15px;
  width: 115px;
  height: 115px;
  margin-left: 15px;
} 

#pfp {
  width: 100%;
  height: 100%;
  background-image: url('pics/pfp - chibi.jpg');
  background-size: cover;
}

table, th, td {
  border: 1px dotted #FFC7F1;
  text-align: center;
  padding: 1px;
  margin: 1px;
}

.about-box {
  background-image: url('pics/bg - ichigo.png');
  position:relative;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  width: 100%;
  height: fit-content;
  padding: 0.75em;
  display:block;
  justify-content: center;
  align-items: center;
  margin: 1px;
  text-align: center;
  }

.about-box-inner {
  background-color: #fff;
  position:relative;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  width: 90%;
  height: 100%;
  display:block;
  justify-content: center;
  align-items: center;
  margin:auto;
  overflow-y: auto;
  padding: 10px;
  }

/* END ABOUT PAGE */

/* START GALLERY PAGE */
#gallery-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  background: white;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  width: 525px;
  height: 584px;
  margin: auto;
  justify-content: space-evenly;
  
}

#gallery-box {
  background-image: url('pics/bg - ichigo.png');
  position:relative;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  width: 525px;
  height: 540px;
  padding: 0.75em;
  display:block;
  justify-content: center;
  align-items: center;
  margin: 1px;
  text-align: center;
  }

#gallery-box-inner {
  background-color: #fff;
  position:relative;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  width: 95%;
  height: 88%;
  display:block;
  justify-content: center;
  align-items: center;
  margin:auto;
  overflow-y: scroll;
  padding: 10px;
  }

 /* Style the Image Used to Trigger the Modal */
.gallery {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
   object-fit: cover;
}

.gallery:hover {
  opacity: 0.7;
  cursor:url('https://cdn.cursors-4u.net/previews/tiny-hand-pink-bow-tie-2cef9955-32.webp') 32 32, auto;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999;
    padding-top: 150px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(102, 0, 18);/* Fallback color */
    background-color: rgba(102, 0, 18,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 400px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 200px;
    text-align: center;
    color: #fff;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
  cursor:url('https://cdn.cursors-4u.net/previews/tiny-hand-pink-bow-tie-2cef9955-32.webp') 32 32, auto;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* END GALLERY PAGE */
/* START BLOG PAGE */

.rssdog {
    font-size:12pt;
    display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.rssdog img {
	width: 350px;
}

#blog-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  background: white;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  width: 535px;
  height: 584px;
  margin: auto;
  justify-content: space-evenly;
  overflow-y: scroll;
}

article {
  background-color:#E5E3FB;
  border:1px solid #6560E5;
  margin-top:20px;
  max-width:400px;
  margin-left:10px;
  margin-right:10px;
  
}
.blog-subtitle {
  color:#8683D4;
  font-size:18px;
  font-weight:bold;
  border-bottom:2px solid #6560E5;
  margin-left:10px;
  margin-right:10px;
  text-align:right;
  padding-top:20px;
}
article > p {
  padding:10px;
  padding-left:20px;
}

   .blogflex {
     flex-wrap:wrap;
     flex-direction:row;
   }
   .right {
     order:1;
     width:100%;
   }
   .posts {
     order:2;
   }
   section {
     display:flex;
     flex-wrap:wrap;
     width:120px;
   }

/*END BLOG PAGE*/
/* START OC SPLASH */
#oc-splash-container {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  width: 800px;
  height: 500px;

  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.oc-header-footer {
  display:flex;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;
  width: 800px;
  height: 100px;
}

#oc-thumbnail-container {
  display:flex;
  flex-wrap: wrap;
  border-width:7px;
  border-style: inset; 
  border-color: #5A5A82;
  background-image: url('pics/bg - static.gif');

  align-items: center;
  justify-content: space-around;

  flex-direction: row;

  box-sizing: border-box;
  width: 700px;
  height: 300px;
}

.thumbnail {
    width: 150px;
    height: 150px;
}

.oc-splash {
    width: 100%;
    height: 100%;
}

.oc-splash img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
    border-radius: 10px;
}

.oc-splash:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
/* END OC SPLASH */

/* START MOBILE PAGE */
#mobile-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  
  background-image: url('pics/bg - nintendo grid.webp');
  background-repeat: repeat;
  border: 1px solid #b88fd4;
  border-radius: 4px;
  
  padding: 20px ;
  overflow: hidden;
  box-sizing: border-box;
  width: 650px;
  height: 630px;
  justify-content: space-evenly;
  align-items: center;
  margin:10px;
}

/* END MOBILE PAGE */