@keyframes fadeOut {
  from { opacity:1; }
  to { opacity:0; }
}
 
@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}
 
.modeleft { text-align:left; font-size: 15px; }
               .modenotice {font-size: 15px}
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: rgba(255,192,203,0.5);
}
.fadeout {
animation: fadeOut 1s;
}
.fadein {
animation: fadeIn 1s;
}
.modal-content {
background-image:url(https://img.freepik.com/premium-vector/diagonal-lines-seamless-pattern-light-blue-stripes-background-abstract-minimalistic-wallpaper_497399-1123.jpg);
background-size:100px auto;
margin: auto;
padding: 10px;
border: 1px solid black;
width: 600px;
}

.white {
background-color: white;
margin: auto;
padding: 10px;
border: 1px solid black;
max-width: 100%;
}

.close {
color: black;
float: right;
font-size: 20px;
font-weight: bold;
}

.close:hover, .close:focus {
color: red;
text-decoration: none;
cursor: pointer;
position:relative;
}

.popcontent {
    width:100%;
    text-align:center;
    height:400px;
    overflow-y:auto;
}

.pinkbgadj {
width:100%;
height:95vh;
display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    
    
          a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  font-style: italic;
}

a:active {
  color: blue;
}

.navlink3 {
  color: blue;
  }
  
  .navlink3:hover {
  font-style: italic;
  }
          body { 
            background-image:url(https://layercake.neocities.org/styles/spring%20picnic/field.png);
            background-size:cover;
            font-size: 16px;
            font-family: 'ms ui gothic';
            padding:0;
            margin:0 auto;
            }
            
            .container { 
              width:770px;
              padding:6px;
              margin:0 auto;
              border-width: 12px;
              border-style: solid;
              border-image: url("https://layercake.neocities.org/styles/spring%20picnic/border.png") 11 fill round;
            }
            
            
            .flex { 
              display:flex;
              border:1px solid black;
              border-width: 1px 0 0 0;
              width:100%;
            }
            
            .flex2 {
              display:flex;
              width:100%;
            }
            /* HEADER STUFF */
            
            .header {
              background-image: url(https://layercake.neocities.org/styles/spring%20picnic/tmmbanner.png);
              background-size: 770px 312px;
              background-position: bottom;
              background-repeat: no-repeat;
              background-color: #f6d4e5;
              width: 770px;
              height: 472px;
              border: black 1px solid;
            }
            
            .layerlogo {
              background-image:url(https://layercake.neocities.org/styles/landing/logo.png);
              background-size:cover;
              margin: 0 auto;
              width: 400px;
              height:219px;
              text-align: center;
              display: block;
              position: relative;
              z-index: 1;
              filter: drop-shadow(0px -1px 0 #fff) drop-shadow(1px 0px 0 #fff) drop-shadow(0px 1px 0 #fff) drop-shadow(-1px 0px 0 #fff) drop-shadow(0px -1px 0 #fff) drop-shadow(1px 0px 0 #fff) drop-shadow(0px 1px 0 #fff) drop-shadow(-1px 0px 0 #fff);
            }
            
            .tmmim { display:none; }
            
            /* MARQUEE LINE STUFF */
            
            .line {
              background-image: linear-gradient(#f6d4e5 35%, white);
              border: 1px solid black;
              width: 100%;
              height: 25px;
              padding: 5px 0 5px 0;
              border-width: 0px 1px 0 1px;
            }
            
            .marquee {
              position: relative;
              width: 100vw;
              max-width: 100%;
              height: 25px;
              overflow-x: hidden;
            }
            
            .track {
              position: absolute;
              white-space: nowrap;
              will-change: transform;
              animation: marquee 100s linear infinite;
            }
            
            @keyframes marquee {
              from { transform: translateX(0); }
              to { transform: translateX(-50%); }
            }
            
            
            /* INTRO BOX */
            .june {
              background: white;
              border:1px solid black;
              border-width: 0 1px 0 1px;
              width: 162px;
              padding: 5px;
              margin:0 auto;
            }
            
            .ic {
  width: 158px;
  height: 158px;
  border: 1px solid black;
  margin: 0 auto;
  background-image: url(https://i.imgur.com/Vhd4xne.jpg);
  background-size: cover;
              margin:0 auto;
}

.space {
  height: 5px;
              margin:0 auto;
}

.jtext {
  width: 158px;
  height: 50px;
  border: 1px solid black;
  margin: 0 auto;
  text-align: center;
  background-color: #f6d4e5;
  line-height: 1.5;
}
            
            /* CALENDAR */
        
        .calen {
            display: flex;
        }
        
        .calendar-container {
            background: white;
            background-image: linear-gradient(white 90%, #f6d4e5 100%); 
            width: 172px;
            height:213px;
            border:1px solid black;
            border-width:1px;
        }
        
        .calendar-container header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:3px;
            height:20px;
            border:1px solid black;
            border-width: 0 0 1px 0;
  background-image: linear-gradient(90deg, rgba(255,188,188,1) 0%, rgba(247,224,185,1) 25%, rgba(255,246,201,1) 50%, rgba(204,252,195,1) 75%, rgba(198,206,247,1) 100%); 
        }
        
        header .calendar-navigation {
            display: flex;
        }
        
        .fa-chevron-right, .fa-chevron-left {
            position:relative;
            top:4px;
            }
          
        header .calendar-navigation span {
            height: 20px;
            width: 20px;
            margin: 0 1px;
            cursor: pointer;
            text-align: center;
            user-select: none;
            font-size: 12px;
        }
        
        header .calendar-navigation span:hover {
            color: #e296bb;
            font-weight:bold;
        }
        
        header .calendar-current-date {
            font-size: 15px;
            position:relative;
            font-weight:bold;
        }
        
        
        .calendar-body ul {
            list-style: none;
            flex-wrap: wrap;
            display: flex;
            text-align: center;
        }
        
        
        .calendar-body li {
            width: calc(100% / 7);
            font-size: 12px;
            color: #414141;
        }
        
        
        .calendar-body .calendar-weekdays li {
            cursor: default;
            width:18px;
        }
        
        .calendar-body .calendar-weekdays li:not(:first-child)  {
            margin-left:7px;
        }
        
        .calendar-body .calendar-weekdays li:first-child  {
            margin-left:-1px;
        }
        
        .calendar-dates {
        margin:0;
        padding: 0px;
        position:relative;
        bottom:10px;}
            
        .calendar-body .calendar-dates {
            margin-bottom: 15px;
        }
        .calendar-body .calendar-dates li {
            margin-top: 15px;
            position: relative;
            z-index: 1;
            cursor: pointer;
        }
        
        .calendar-dates li.inactive {
            color: #aaa;
        }
        
        .calendar-dates li.active {
            color:black;
        }
        
        .calendar-dates li::before {
            position: absolute;
            content: "";
            z-index: -1;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            transform: translate(-50%, -50%);
        }
        
        .calendar-dates li.active::before {
            background: #f6d4e5;
            border:1px solid black;
        }
        
        .calendar-dates li:not(.active):hover::before {
            background: #f6d4e580;
        }
        
/* MID WELCOME TEXT */

.welcomeflex { display:flex; }
.rahrah { 
  padding:5px; 
  border:1px solid black;
  border-width: 0px 1px 1px 0px;
  height:180px;
  width:400px;
  font-size:15px;
  }
  
  .grad { 
  background-image: linear-gradient(90deg, rgba(255,188,188,1) 0%, rgba(247,224,185,1) 25%, rgba(255,246,201,1) 50%, rgba(204,252,195,1) 75%, rgba(198,206,247,1) 100%); 
  text-align:center;  
  font-weight:bold;
  }
  
    .welc { float:right; width:200px; height:163px;
  filter: drop-shadow(1px 1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white);
  order:2;}


/* BLACKBOARD */
.bbhol {padding:0px;}

.borbord { border:1px solid black;
border-width: 0 1px 1px 0;
    background: rgb(0,58,25);
    background: radial-gradient(circle, rgba(0,58,25,1) 0%, rgba(1,35,1,1) 100%); }
    
    .bbborder {
    border: 10px solid transparent;
    border-image-slice: 100 100 100 100;
    border-image-width: 10px 10px 10px 10px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("https://i.imgur.com/Uwow9ud.png");
}

.bb {
    background: rgb(0,58,25);
    background: radial-gradient(circle, rgba(0,58,25,1) 0%, rgba(1,35,1,1) 100%);
    height:220px;
    width:372px;
    color:white;
    padding:5px;
    overflow:auto;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }
  
  @font-face {
    font-family: 'Chalk';
    src: url(https://layercake.neocities.org/styles/fonts/central/chalk.ttf);
    }
  
   .chalktitle, .chalktitle2, .minichalktitle, .monthchalktitle {    
font-family: 'Chalk';
}

.chalktitle2 {
font-size:65px;
color:#afc9dd;
    filter: drop-shadow(1px 1px black) drop-shadow(-1px 1px black) drop-shadow(1px -1px black) drop-shadow(-1px -1px black) drop-shadow(1px 1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white) drop-shadow(0 0 1px black);
    -webkit-text-stroke: 1px white;
}
.chalktitle {
font-size:55px;
    text-align:center;
}
 .minichalktitle { font-size:35px; }
 .monthchalktitle { font-size:25px; }
 
/* NAV */
.navlink, .navlink2, .navlink3 {
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width:calc(100%-2px);
  display:block;
  border:1px solid black;
}

.navlink {
  border-width: 1px 1px 1px 0px;
}

.navlink2 { 
  border-width:0 1px 0 0;}
  
  .navlink3 { border-width:0 1px 1px 0;}
  
.navlink::before, .navlink2:before, .navlink3:before {
  content: url('https://layercake.neocities.org/styles/images/floatingbow.gif');
  display: inline-block;
  width:17px;
  height:16px; 
  position:relative;
  top:4px;
  margin-right: 20px;
  margin-left: 6px;
}
  .navlink:hover, .navlink2:hover, .navlink3:hover { background:#f6d4e580}
  
  .personal, .sitely, .offsite, .retired { border:1px solid black;
  border-width: 0 1px 0 0;
  font-size:16px;
  padding:5px;
  text-align:center;
  width:177px;}
  
  
  .personal { background:#ffbebc; box-shadow: -2px -2px 1.7px #00000020 inset, 2px 2px 1.7px #ffffff90 inset; }
  .links { background:white;}
  .sitely { background:#fff5c8; box-shadow: -2px -2px 1.7px #00000020 inset, 2px 2px 1.7px #ffffff90 inset; }
  .retired { background:#ccfcc3; box-shadow: -2px -2px 1.7px #00000020 inset, 2px 2px 1.7px #ffffff90 inset;}
  .offsite { background:#c7d5f0; box-shadow: -2px -2px 1.7px #00000020 inset, 2px 2px 1.7px #ffffff90 inset;}
  
  
  
  

.imhol { height:0 !important; width:100%;}

.pmpm {
  background-image:url(https://layercake.neocities.org/styles/spring%20picnic/pompom.png);
  background-size:cover;
  width:130px;
  height:130px;
  position:relative;
  z-index:4;
  bottom: 100px;
  left: 330px;
  filter: drop-shadow(1px 1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white);
}

  .pmpm:hover { animation: twitch5 1.5s infinite;
animation-timing-function: steps(2, jump-none);}


@keyframes twitch5 { 
0%, 12%, 25%, 50% { 
transform: rotate(0deg);
} 
55% {
transform: rotate(-2.5deg); 
} 
65% { 
transform: rotate(3.5deg); 
} 
75% {
transform: rotate(-7deg); 
} 
95%, 100% { 
transform: rotate(0deg);
}
}


.navi { position:relative;
background:white;
z-index:33;}
.bg {
background-image:url(https://i.imgur.com/Wy0Pm6R.jpg);
background-size:cover;
          background-color:#f6d4e5;
padding:12px; /* make number bigger/smaller for a bigger/smaller border */
border:1px solid black;
border-width: 0 1px 1px 1px;
width:fit-content;
height:fit-content;
}

.inner {
background: #FFF;
padding:5px;
border:1px solid black;
height:126px;
width:300px;
}

.chainholder3 {
  width: 415px;
  height: 36px;
  display: flex;
  justify-content: space-between;
  margin-left:20px;
  }
  
  .thirdc, .fourthc {
  background-image: url(https://layercake.neocities.org/styles/spring%20picnic/pinkchain.png);
  background-size: 14px 100px;
  background-repeat: repeat-y;
  width: 300px;
  height: 36px;
}

.chainholder2 {
  width: 337px;
  height: 70px;
  display: flex;
  justify-content: space-between;
  }
  
  .firstc, .secondc {
  background-image: url(https://layercake.neocities.org/styles/spring%20picnic/pinkchain.png);
  background-size: 14px 100px;
  background-repeat: repeat-y;
  width: 300px;
  height: 70px;
}

.firstc, .thirdc { 
  background-position: left;
  margin-left:10px;
}

.secondc, .fourthc { 
  background-position: right;
  margin-right:10px;
}


.fullbutton { 
  margin-left:20px; }
  
  
.chainholder {
  width: 415px;
  height: 70px;
  display: flex;
  justify-content: space-between;
}

.left {
  background-image: url(https://layercake.neocities.org/styles/spring%20picnic/pinkchain.png);
  background-size: 14px 100px;
  background-repeat: repeat-y;
  background-position: left;
  width: 415px;
  height: 70px;
}

.center {
  background-image: url(https://layercake.neocities.org/styles/spring%20picnic/pinkchain.png);
  background-size: 14px 100px;
  background-repeat: repeat-y;
  background-position: center;
  width: 415px;
  height: 70px;
}

.right {
  background-image: url(https://layercake.neocities.org/styles/spring%20picnic/pinkchain.png);
  background-size: 14px 100px;
  background-repeat: repeat-y;
  background-position: right;
  width: 415px;
  height: 223px;
  position:relative;
  bottom: 153px;
}

.buttonbox {
box-shadow: #edb3d0 inset 0 0 30px;
  background-image: url(https://i.imgur.com/QeUmIoU.png);
padding:20px; /* make number bigger/smaller for a bigger/smaller border */
border:1px solid black;
width:fit-content;

}

.butinner {
background: #FFF;
padding:5px;
border:1px solid black;
height:fit-content;
width:362px;
text-align:center;
}

.strawbhold {
  height: 0;
  width: 100%;
  position: relative;
  z-index: 1000;
  margin:0 auto;
}

.strawberry {
  position: relative;
  z-index: 12;
  bottom: 29.75px;
  margin:0 auto;
  background-image: url(https://layercake.neocities.org/styles/spring%20picnic/bigsta.png);
  background-size: 33px 32px;
  width: 396px;
  height: 29.75px;
}

.webboxhold { border:1px solid black;}

.webbox {
    height:400px;
    border: 20px solid transparent;
    border-image-slice: 100 100 100 100;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("https://i.imgur.com/Uwow9ud.png");
}

.webinner {
background: #012301;
height:100%;
width:100%;
border:1px solid black;
text-align:center;
}



.cboxiframe {
  width:100%;
  height:100%;
}


.strawbhold2 {
height:0;
width:100%;
position:relative;
text-align:center;
margin:0 auto;
bottom: 40px;
z-index:1000;
}

.wiiring {
  width:200px;
  margin: 0 auto;
}

.webspacer { height:10px; }


.results {
  width: 185px;
  background-color: #fff;
  color: #000;
  display: block;
  padding: 10px;
  border: 1px solid;
  margin: 0 auto;
  font-size: '15pt';
}

.flexxx { display:flex;
            justify-content: space-between;
  background-image: linear-gradient(90deg, rgba(255,188,188,1) 0%, rgba(247,224,185,1) 25%, rgba(255,246,201,1) 50%, rgba(204,252,195,1) 75%, rgba(198,206,247,1) 100%); 
}

.closing {
  height:3px;
  width: 3px;
  position:relative;
  z-index:99999999999999;
  right:10px;
}



 #solidcbox { right: 40px;
bottom: -360px;
z-index: 9999;
position: fixed;
-webkit-transition: all 0.8s ease-in-out;
border:1px solid black;
background:#012301;
}

#cbox {
    border: 10px solid transparent;
    border-image-slice: 100 100 100 100;
    border-image-width: 10px 10px 10px 10px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("https://i.imgur.com/Uwow9ud.png");
}

#solidcbox:hover {
bottom: -16px;
}

#cboxtitle {
width: 290px;
height: 30px;
    background: rgb(0,58,25);
    background: radial-gradient(circle, rgba(0,58,25,1) 0%, rgba(1,35,1,1) 100%);
padding: 10px 5px 10px 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
text-align: center;
font-size: 30px;
letter-spacing: 10px;
color: #fff;
text-transform: uppercase;
font-family: 'Chalk';
}

#transring { margin: 0 auto; }


body::-webkit-scrollbar, .popcontent::-webkit-scrollbar, .webinner::-webkit-scrollbar {
  display: none;
}

body, .popcontent, .webinner {
  -ms-overflow-style: none;
  scrollbar-width: 0; 
} 
            /* MOBILE ADJUST */
@media only screen and (max-width: 770px) {
  
  .fullbutton { 
  margin-left:0px; }
  
		.flex, .flex2 { display:flex;
		flex-wrap: nowrap;
		flex-direction:column;
		width:100%; }
		
		.imhol, .chainsec, .chainholder3, .chainholder2 { display:none; }
		
		 .personal, .sitely, .offsite, .retired { width:calc(100% - 10px);
		 border-width: 0 1px 0 1px;}
		 .navlink, .navlink2, .navlink3 { width:100%; }
		 
		 .navlink {
  border-width: 1px;
}

.navlink2 { 
  border-width:0 1px 0 1px;}
  
  .navlink3 { border-width:0 1px 1px 1px;}
  
		.header, .line, .container, .jtext { width:100%; }
		
		.modal-content { width:calc(100% - 30px); }
		
		.ic {
              background-position: center;
              height: 200px;
              width: 100%;
              
              }
		
		.line { border-width:0 1px 0 1px }
		.layerlogo { width:290px;
              height:159px; }
		
		.header {
      background-image:none;
      background-color:#f6d4e5;
      border-width: 1px 1px 0 1px;
      height:fit-content;
		}
		
		.tmmim {
		  width:100%;
		  height:fit-content;
		  background-color: #f6d4e5;
		  border: black 1px solid;
		  border-width: 0 1px 1px 1px;
		  display:block;
		}
		
		.calendar-container {
            width: 100%;
            height:fit-content;
            border:1px solid black;
            border-width:1px;
        }
        
        .june {
            width: 90%;
            height:fit-content;
            border:0;
        }
        
        .rahrah { height:fit-content;
        width:calc(100% - 10px);
        border-width: 0 1px 0 1px;}
        
        

.bb {
    height:220px;
    width:calc(100% - 10px);
  }
  
  .borbord { border-width:1px;
  width:100%}
  
  .secondcol { order:1; }
  .firstcol { order:3; }
  
  .bg { 
        width:calc(100% - 25.5px);
        }
        
        .inner { width:calc(100% - 12px);
        height:fit-content;
        }
        
  .buttonbox { border-width: 0 1px 1px 1px; width:calc(100% - 41px); }
  .butinner { width:calc(100% - 15px); }
  
  .webboxhold { border-width: 0 1px 1px 1px; }
  .webbox {width:calc(100% - 40px);}
  .webinner {width:100%}

  #solidcbox { display:none; }
}