/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* center the wHOLE PAAAAAGE!!! */

.centered {
    position:relative;

    left:50%;
    height:100%;
    transform:translateX(-50%);
    white-space: normal;

    overflow-wrap: break-word;
    /* background-color:red; */
    padding-bottom: 225px;
    display: inline-block;
}

.guestbook {
left:0px;

}

#sidebarleft {
  top:0%;
  
   height: 100vh;
  display: inline-block;
    
    white-space: normal;
    vertical-align:top;

    overflow-wrap: break-word;
    /* background-color:red; */
    
}

#sidebarright {
  
   height: 100vh;
  display: inline-block;
  top:0%;
  vertical-align:top;
    white-space: normal;

    overflow-wrap: break-word;
    /* background-color:red; */
    
}

.sidebarsticky {
  
    position: sticky;
  position: -webkit-sticky;
  width: auto;
top:0px;
margin-top:55px;
    
}


/* link color */

a:link { color: #001CBC;}
a:visited { color: #001CBC;}
p:visited { color: #001CBC;}

/*line liomething */

hr {
  border: 2px solid #85FFF9;
  margin-left: 25px;
  margin-right: 30px;
}


.readmore {
display: none;
}

/* center the wHOLE PAAAAAGE!!! ...in a window */

.centerwindow {
  display: inline-block;
  vertical-align:top;
    white-space: normal;
    overflow-wrap: break-word;
    width: 100%;
    
border-image-slice: 71 85 77 71;
border-image-width: 35px 40px 38px 35px;
border-image-outset: 19px 25px 20px 23px;
border-image-repeat: stretch stretch;
border-image-source: url("images/maincontainerborder.png");
border-style: solid; 
backdrop-filter: blur(4px);

background-image: url("images/containerinnerblur.png");
background-size:cover;
margin-bottom: 25px;
padding-bottom: 25px;
}


/* center the wHOLE PAAAAAGE!!! ...as a left sidebar */

.leftsidewindow {



    white-space: normal;
    
border-image-slice: 71 85 77 71;
border-image-width: 35px 40px 38px 35px;
border-image-outset: 19px 25px 20px 23px;
border-image-repeat: stretch stretch;
border-image-source: url("images/maincontainerborder.png");
border-style: solid; 
backdrop-filter: blur(4px);

background-image: url("images/containerinnerblur.png");
background-size:cover;

width: auto;

margin-right: 45px;
margin-bottom: 40px;

}

/* center the wHOLE PAAAAAGE!!! ...as a right sidebar */

.rightsidewindow {



    white-space: normal;
    
border-image-slice: 71 85 77 71;
border-image-width: 35px 40px 38px 35px;
border-image-outset: 19px 25px 20px 23px;
border-image-repeat: stretch stretch;
border-image-source: url("images/maincontainerborder.png");
border-style: solid; 
backdrop-filter: blur(4px);

background-image: url("images/containerinnerblur.png");
background-size:cover;

width: auto;

margin-left: 45px;
margin-bottom: 40px;

}

/* scrollbar color */
html {
scrollbar-color: #85FFF9 #1C1C54;
}


/* center images */

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

/* background img stuff */


/* default font setups */

h1 { 
  font-family: NewRodinEB;
  color: #fb85ff;
  text-shadow: 2px 2px black;
  font-size:42px;
  padding-left:10px;
  padding-right:10px;
  
}

u {
text-decoration: underline solid 2px;
color: #fb85ff;

}

p { 
  font-family: NewRodinB;
  color: #85fff9;
  text-shadow: 2px 2px black;
  font-size:24px;
  padding-left:10px;
  padding-right:10px;
}

/* default font setup for body and a custom cursor */
body { 
  font-family: NewRodinB;
  cursor: url("images/magic_cursor.png"), auto;
  overflow-x:hidden;
   margin-bottom:50px;
}

/* mobile support */

#mobilecommpage {
  display:none;
}


@media (max-width: 1554px) and (min-width:1255px) {
  


.centerwindow {
  width:700px;  
}

h1 { 
  font-family: NewRodinEB;
  color: #fb85ff;
  text-shadow: 2px 2px black;
  font-size:28px;
  padding-left:10px;
  padding-right:10px;
}

p { 
  font-family: NewRodinB;
  color: #85fff9;
  text-shadow: 2px 2px black;
  font-size:16px;
  padding-left:10px;
  padding-right:10px;
}

}

@media (max-width: 1255px) {
  
.sidebarsticky {
  display:block;
    position:relative;
    white-space: normal;
    height:1px;

    overflow-wrap: break-word;
    /* background-color:red; */
    margin-bottom: 0px;
    
}

#sidebarleft {
    height:245px;
    margin-bottom: 0px;
    display:block;
}

#sidebarright {
    height:245px;
    margin-bottom: 0px;
    display:block;
}

.centerwindow {
  max-width:100%;  
}

#mobilecommpage {
  display:inline;
}

#desktopcommpage {
  display:none;
}

}


/* font import */
@font-face {
  
    font-family: 'NewRodinB';
    src: url('../font/FOTNewRodin%20Pro%20B.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NewRodinEB';
    src: url('../font/FOTNewRodin%20Pro%20EB.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


/* chattable window*/
#chattable{
   position: absolute;
   left: 10px;
   bottom: 15px;
}


/* copy pasted GAAARBAAAAAAAGE for comms page */

    #verticdiv{ 
      display: flex; 
    } 
    .col{ 
      color: white; 
      height: 100px; 
      padding: 10px; 
      flex: 50%; 
    } 
    .col:nth-child(2){ 
    } 
    
    
.vl {
  border-left: 4px solid #85FFF9;
}


/* copy pasted GAAARBAAAAAAAAAAAAGE for art page */

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 32.3%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}


/*status cafe */

#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    line-height: 22px;
}

body {

/* background-color: #CBD8FF; */

color: black;

overflow: hidden;

font-size:14px;

}