#woke:hover {cursor: url(pixels/heartcursorclick.png), auto;   transform: scale(1.05); transition: 0.2s }
      
/* The Modal (background) */
.modal {
 display: none;

  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.55);

}

/* Modal Content */
.modal-content {
  position: relative;
  z-index: 1000;
  margin: auto;
margin-top:26px;
  width: 900px;

}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}


/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



 

.flexsection {padding-left:18px; padding-right:18px; display:flex; align-items: center;
  justify-content: center; }
      
      .instagramholder {width:328px;  margin: auto; margin-top: 10px; margin-bottom:10px}
      
        .bebidora {width:205px; height: 135px; background-image: url(images/bebidora.png); background-size:contain; background-repeat:no-repeat;  bottom:0%; margin-left:864px; position:fixed; z-index:50}
      
      
      .memberpics {height:250px; border-width: 10px;
                border-style: solid;
                border-image: url(borders/cloudlace2.png) 8 fill round; background-clip: padding-box; margin-left:5px}
      
       #tiktokholder {display: flex; align-items: center;
  justify-content: center;  height:260px;  margin:auto;  margin-bottom:10px }
      
     
      
        #tiktokholder iframe {border-width: 10px;
                border-style: solid;
                border-image: url(borders/cloudlace2.png) 8 fill round; background-clip: padding-box; margin:5px}
      
        .gallery img {
      width: 100%;
  height: 100%;
  /* This is key: scales the image to cover the container while maintaining aspect ratio */
  object-fit: cover; 
        padding: 5px;
        margin: 0;
        overflow: hidden;
      }

     
      .gallery {
        display: flex;
        width: calc(100% + 5px + 5px);
        margin-left: -5px;
        margin-right: -5px;
        align-items: center;
      }
      
      .descriptors {
        display: flex;
        width: calc(100% + 5px + 5px);
        margin-left: -5px;
        margin-right: -5px;
      justify-content: center;
       
      }

      .descriptor { margin:auto; width: 200px;
        height: 22px;
        padding: 5px;
        overflow: hidden;
    }
      
      
      #ytiframe  {margin:auto; margin-top:16px; margin-bottom:6px; border-width: 10px;
                border-style: solid;
                border-image: url(borders/cloudlace2.png) 8 fill round; background-clip: padding-box; }
      
       main {
  
        padding:14px 14px 0px 14px;
        grid-area: main;
        overflow-x: hidden;
       margin-top:10px;

      }
      
    th, td {
        
  border: 1px solid #2076b9;
        padding:4px;
        padding-top:5px;
        margin:auto;
}
      
     table td:first-child {background:#e0f0ff}
      
      th {background:#badbfd}
 
      table { font-size:15px; margin:auto; 
        width:224px;
        background:white; 
        border-width: 10px;
                border-style: solid;
                border-image: url(borders/cloudlace2.png) 8 fill round; background-clip: padding-box; margin-left:4px;  }


#imagechanger {font-size:13.5px;
   letter-spacing:-0.5px;
  width:219px;
  margin:auto;
        background:white; 
      border:none;
cursor: url(pixels/heartcursorclick.png), auto;
  
}

#imagechanger   th, td {
        
        padding:2px;
        margin:auto;
}
      

#darkbutton {background:#badbfd}


.concealerbutton {background:white}


.active{
     background-color:#badbfd;   
}
.inactive{
     background-color:white!important;   
}


      
        .main-title {  font-size: 3em;
  font-weight:bolder;
  font-style:italic;
 color: #63a5e6;
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
width:320px;
margin-bottom:-30px;       
z-index:99;}
      
    .alt-title {margin-top:10px;
      margin-bottom:5px;
     font-size:1.3em;
  font-weight:bolder;
  font-style:italic;
 color: #63a5e6;
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
width:420px;}



            #nametitle {font-size: 2.8em;
  font-weight:bolder;
  font-style:italic;
 color: #63a5e6;
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
         z-index:99;
         margin-bottom:-30px;
              margin-top:5px;
    margin-left:10px;
position:relative;
              letter-spacing:-4px; }
      
      
      .wikititle { margin-bottom:-36px;
        font-size: 3.5em; 
   margin-left:20px;
        position:relative;
        z-index: 99;
      text-align:left;
        font-weight:bolder;
  font-style:italic;
 color: #63a5e6;
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;   
       }
      
        
        .subunit-title {  font-size: 2.8em;
  font-weight:bolder;
  font-style:italic;
 color: #63a5e6;
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
    position:relative;
     margin-left:10px;
      margin-bottom:-15px;
          width:200px;
z-index:99;}
      
      
        #introbox {background-image:url(bg/bluegingham.png); height:620px; overflow-y:scroll; 
           
        border-radius: 10px;
        width: 505px;
          margin:auto; 
        text-align: center;
          
  
      }
      
      .profilepic {width:220px; 
        height: 315px;
        margin:auto;
                }
      
      .profilepic img {margin:auto;}
      
      #introimage {width: 450px; height:330px; margin:auto; position:relative; 
      display: flex;
 flex-direction: row; margin-top:15px; margin-bottom:-10x;
}

#wikiimage {display: block;
  margin:auto;
        width:218px; 
        height: 284px;
        max-width: 100%;
background-image:url(images/tsuyoshi/tsuyoshiprofile.jpeg);
background-size:cover;
background-repeat:no-repeat;
  background-position:center;
border-width: 10px;
                border-style: solid;
                border-image: url(borders/cloudlace2.png) 8 fill round; background-clip: padding-box; }
      
      .wikiholder { width: 450px; height:325px; margin:auto; margin-bottom:150px;}
     
      .socials {color: #63a5e6; width: 212px; height:28px; font-size:18px; font-weight:bold ; margin-top:-10px; margin-left:4px; text-align:left; }
      
      .fa {color: #63a5e6;}
      
      .profilebox {width:230px;  margin:auto; margin-top:4px;}
    
     .profileholder {background:white; width: 430px; margin:auto; border-radius:8px; padding:16px; margin-top:10px; margin-bottom:10px; border: 1px solid #2076b9}
      
      .profiletext {text-align:center; line-height:20px;  margin:auto; font-size:15px; margin-top:10px}
      
        .introphoto { width:120px; height:120px; margin-left:10px; background-image:url(images/amadora.png); background-size: cover;}
    

      
      
         .images {
        display: flex;
        width: 475px;
        margin:auto;
        align-items: center;
        justify-content: center;
           
      }

      .profileholder .images {
        display: flex;
        margin:auto;
        align-items: center;
        justify-content: center;
          width: auto;
      }
      
      
      
       /* MEMBER PROFILES */

       #memberclick {
        font-size:15px;
        background:#ffebf6;
      
        padding: 15px;
      
        border-radius: 10px;
         width: 180px;
         margin: 1em auto;
         margin-bottom:5px;
         
      }

      
      #firstmain {padding-top:7px;
      height: 660px;
        overflow-y:scroll;overflow-x:hidden; 
        background: white; 
        border-radius: 14px; 
      margin-top:20px;
padding-bottom:15px;
      }
      
      aside {padding-bottom:0px}
    
    .guide {line-height:15px; text-align:left; margin-top:6px; font-size:14px;
       text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff; z-index:99; width:200px; margin-left:8px
    }
    
    #guidetext {margin-top:3px; margin-left:5px}
      
    .members-outer {
  position:relative;
   width:190px;
margin:auto;
      text-align: center;
background:white;
      height:36px;
  
border: 1px solid #5395d7;
      border-radius:15px;
      margin-top:3px;
margin-bottom:8px;
}

  .amadora { position:relative;
      display: flex;
 flex-direction: row;  width:190px;  margin:auto; }
      
          .hero {width:86px; height:86px;
    margin:5px;
    border-width: 7px;
          border-style: solid;
          border-image: url("borders/blue%20lace.png") 8 fill round; background-clip: padding-box;
             transition: filter .2s; background:white; flex-wrap:wrap
    }
      
      .hero:hover {filter: brightness(114%);}
      


.sidebarmenutext {font-size: 1.2em}

.sidebarheader {font-size: 1.5em;
  font-weight:bolder;
  font-style:italic;
 color: #63a5e6;
 text-shadow: -1px -1px 0 #ebf7ff, 1px -1px 0 #ebf7ff, -1px 1px 0 #ebf7ff, 1px 1px 0 #ebf7ff;
 margin:auto; 
 margin-top:4px;
 margin-bottom:4px;
 height:28px; 
}

      
   .heroname {z-index:99; position:absolute; font-weight:bolder;
  font-style:italic;
  color: #e7f6ff;
   text-shadow: -1px -1px 0 #2076b9, 1px -1px 0 #2076b9, -1px 1px 0 #2076b9, 1px 1px 0 #2076b9; font-size:14px; margin-top:11px;}
      
    #reoname,  #hyomaname, #jeanname, #sougoname, #rakuname    {margin-left:3px; }
 #tsuyoshiname, #hayatename,  #tomoyaname, #kokiname, #bebiname  {margin-left:98px; }
    
      
      :root {--sidebar-width: 250px;}
      
       .layout {
     
        margin: 65px 305px 65px 65px;
        border-width: 16px;
                border-style: solid ;
                border-image: url(borders/cloudlace3.png) 12 fill round ;
        background-clip:padding-box;
        width: 840px;
        display: grid;
        grid-template: "header header header" auto "leftSidebar main main" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width);
        /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */

      }