body{
  
 background-color: #403e43;
 background-image: url(ltgraystripes.png);
  background-attachment: fixed;
  font-family: "nunito";
  color: #470a68;
}
a{
color: #ee2dbc;
}

.container{  border: solid #232323 3px;
  border-radius: 25px;
    background-color: #dac2f5;
  padding: 10px;
  display: grid;
  min-height: 97vh;
  max-width: 800px;
  margin:auto;
  overflow: auto;
  grid-template-columns: 1.5fr 4fr;
  grid-template-rows:  auto auto auto 1fr auto;
  
  box-shadow: -4px 5px 9px rgba(75, 46, 84, 0.83);
  
 
  grid-template-areas: 
    "banner banner"
    "navbar navbar"
    "sidebar main"
    "sidebar2 main"
    "footer footer"  ;  
}



.banner{
 grid-area: banner;
  border: solid;
  border-radius: 15px;
  max-height: 250px;
  overflow: hidden;
  max-width: 800px;
}

.bannerimg{
  max-width: 100%;
    min-height: 100%;
}
.bigtextlist{
  font-size: 15px;}

  
.bigtextlist  li{
 font-weight: bold; 
font-size: 20px;
}
.shortlist li{
  text-align: left;
  padding: 3px;}


nav{
  border: solid;
  border-radius: 15px;
  margin-top: 10px;
  grid-area: navbar;
  background-color: #403e43;
  font-family: "schoolbell";
  
  
}
  .barlist {
    text-align: center;
    
}
.barlinks {
  display: inline-block;
  padding: 1px 15px;
  margin: 1px 3px;
   background-color: #e269c3;
border: 2px solid #ffffff;
  border-radius: 15px;

}

.barlinks a{
  color: #ffffff;
  text-decoration: none;
 text-shadow: 1px 1px 2px purple;
}
.barlinks:hover{
  border: 2px inset #e5dae2;
  background-color: #c554c9;
}

aside{
  padding: 10px;
  overflow: hidden;
  font-size: 85%;
  text-align: center;
 margin-top: 10px;
  margin-right: 10px;
}

.scrollaside{
 grid-area: sidebar;
  text-align: left;
  color: #64157b;
  background-color: #e4c4f4;
  background-image: url(purplestripes2.png);
  overflow: auto;
  height: 300px;
  border: ridge #90619e 5px;
  border-radius: 15px;
}
.side2{
 grid-area: sidebar2;
}


main{
  grid-area: main;
  background-color: #5c5762;
  border: solid #000000;
  border-radius: 15px;
color: #ffe3ff;
  margin-top: 10px;
  padding: 10px 25px;
  line-height: 2;}
  
  main a{
    color: #ff5ab5;
  }

h1 {
  font-family: "schoolbell";}

h2 img{
max-height: 1.5em;
  position: relative;
  top: 8px;
}

h2{
  font-family: "schoolbell";
  color: #232323;
  padding: 1px 13px;
    background-color: #e269c3;
  background-image: linear-gradient(174deg, #ffbee2ff, #e269c3);
  border: hidden;
  border-radius: 5px;
}
footer{
  grid-area: footer;
  text-align: center;
}
.verybottom {
  background-color:transparent;
  color: #4b3855;
  padding: 13px;
}
  
  .verybottom img{
  filter:drop-shadow(-4px 5px 9px rgba(75, 46, 84, 0.83));
  } 

.divider {
display: block;
margin: auto;
  padding: 30px;
}
.imgshadow{
filter:drop-shadow(3px 3px 5px black);
}
.imgglow{
filter:drop-shadow(0px 0px 7px #e9c8f3);
}

.buttonlink{ 
  display: inline-flex;
  color: white;
background-color: #e9c8f3;
background-image: url(gifcities/purple%20glitter.gif);
font-family: "schoolbell";
  text-decoration: none;
font-size: 20px; 
  text-shadow: 0px 0px 7px #590059;
  border: solid 2px #963fa9;
  border-radius: 16px;
  padding: 4px;
  margin: 5px 2px;
  line-height: 2;
  width: fit-content;
}

.buttonlink:hover{
color:#232323;
  cursor: pointer;
}
.stickL1 {
  position: fixed;
  left: 41px;
  top: 5px;
  z-index: -1;
  rotate: -32deg;
  max-width: 200px;
}
.stickL2 {
  position: fixed;
  left: 199px;
  top: 83px;
  rotate: 14deg;
  max-width: 200px;
  z-index: -1;
}

.stickL3 {
  position: fixed;
  left: 14px;
  top: 215px;
  rotate: -3deg;
  max-width: 200px;
  z-index: -1;
}.stickL4 {
  position: fixed;
  left: 300px;
  top: 297px;
  rotate: 17deg;
  max-width: 200px;
  z-index: -1;
}.stickL5 {
  position: fixed;
  left: 152px;
  top: 360px;
  rotate: 3deg;
  max-width: 200px;
  z-index: -1;
}.stickL6 {
  position: fixed;
  left: 257px;
  top: 526px;
  rotate: -16deg;
  max-width: 200px;
  z-index: -1;
}.stickL7 {
  position: fixed;
  left: 96px;
  top: 576px;
  rotate: 24deg;
  max-width: 200px;
  z-index: -1;
}.stickL8 {
  position: fixed;
  left: 211px;
  top: 710px;
  rotate: 12deg;
  max-width: 200px;
  z-index: -1;
}

.stickR1 {
position: fixed;
  top: 1px;
right: 69px;
  rotate: 15deg;
  max-width: 200px;
  z-index: -1;
}

.stickR2 {
position: fixed;
right: 324px;
  top: 100px;
  rotate: -16deg;
  max-width: 200px;
  z-index: -1;
}
.stickR3 {
position: fixed;
right: 194px;
  top: 271px;
  rotate: 4deg;
  max-width: 200px;
  z-index: -1;
}
.stickR4 {
position: fixed;
right: -12px;
  top: 401px;
  rotate: -25deg;
  max-width: 200px;
  z-index: -1;
}.stickR5 {
position: fixed;
right: 134px;
  top: 481px;
  rotate: 30deg;
  max-width: 200px;
  z-index: -1;
}.stickR6 {
position: fixed;
right: 346px;
  top: 547px;
  rotate: 3deg;
  max-width: 200px;
  z-index: -1;
}.stickR7 {
position: fixed;
right: 248px;
  top: 721px;
  rotate: -10deg;
  max-width: 200px;
  z-index: -1;
}.stickR8 {
position: fixed;
right: 31px;
  top: 783px;
  rotate: 3deg;
  max-width: 200px;
  z-index: -1;
}
@media only screen and (max-width: 900px) {
.stickR1{
  display: none;}
  .stickR2{
  display: none;}
  .stickR3{
  display: none;}
  .stickR4{
  display: none;}
  .stickR5{
  display: none;}
  .stickR6{
  display: none;}
  .stickR7{
  display: none;}
  .stickR8{
  display: none;}
  .stickL1{
  display: none;}
  .stickL2{
  display: none;}
  .stickL3{
  display: none;}
  .stickL4{
  display: none;}
    .stickL5{
  display: none;}
  .stickL6{
  display: none;}
  .stickL7{
  display: none;}
  .stickL8{
  display: none;}
  
}
@media only screen and (max-width: 580px) {
  .container{        grid-template-columns: 100%;
  grid-template-areas:    
  "banner"
    "navbar"
    "sidebar"
    "main"
    "sidebar2"
    "footer"}
  main {
  max-width: 100%;
  }
  
  aside{
  max-height: 110px;
  overflow: auto;
    margin-right: 0px;
    border:solid;
    border-radius: 15px;
    background-color: #e8d7f5;
  }
  .side2{
  background-color: transparent;
    border-style: none;
  }
  .stickR3{
  display: none;}
  
}