.textarea::-webkit-scrollbar {
  width: 10px;               /* width of the entire scrollbar */
}

.textarea::-webkit-scrollbar-track {
  background: transparent;        /* color of the tracking area */
}

.textarea::-webkit-scrollbar-button {
  background:transparent;
}

.textarea::-webkit-scrollbar-thumb {
  background-color: #f4f2de;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #9cd3bf;  /* creates padding around scroll thumb */
}

.body {
  background:linear-gradient(
      rgba(255, 255, 255, 0.65),
      rgba(255, 255, 255, 0.80)
    ),  url("images/background.png");
  background-position:center;
  background-size:center;
  position: relative;
  overflow:hidden;
}

p {
    font-size: 1.2em;
}
li {
    font-size: 1.2em;
}

.navarea {height:8vh;}
.bodyarea {height:92vh;

position:relative;
over-flow:hidden;}
.offcanvas-end{    border: none;
    background: linear-gradient(107deg, #f4f2de, #9cd3bf);
    box-shadow: -3px 0px 5px #000000ab;}
#offcanvasWithBothOptionsLabel {font-family: 'Bungee', cursive; }

.offcanvas-end div a {
text-decoration:none;
color:black;

}
.offcanvas-body div div {
    padding-bottom: 20px;
margin-left:10px;
min-font-size:2.9em;
font-family: 'Cutive Mono', monospace;
}

a.name.btn.btn-light {
    margin-left: -5px;
}

.textarea {
  height:100vh;
  overflow:scroll;
padding-right:25px;
  padding-left:25px;
  tezt-align:left;
}

.col-10.col-sm-10.col-lg-8.textcenter {
    padding-left: 50px;
}


.navtitle {
  font-family: 'Bungee', cursive;
  font-size:calc(22px + 1.4vw);
text-shadow:1px 2px 4px #00000050;}
.nav-link{font-family: 'Cutive Mono', monospace;
  font-size:2.1rem;
}
.navitem {
  padding:right:20px; margin-right:2vw;
}
.navbuttons {
  border: solid 1px black;
  box-shadow:1px 2px 4px #00000050;

margin-right:1vw
}
.navbuttons:hover {box-shadow:1px 2px 4px #00000011;
  background-color:#ffffff22;}

.photocontainer {
  width:100%;
height:100%;
  display:grid;
  grid-template-rows: 2fr 3fr;
  grid-template-columns: 2fr 8fr 2fr;

position:absolute;
z-index:-1;
}



.textarea {
  width:100%;
height:100%;
  display:grid;
  grid-template-columns: 3fr 8fr 3fr;
position:absolute;
z-index:-1;
}


.lowerleftcontainer {
 position:relative;}
.lowerleft1{
width:100%;
height:100%;
  max-height:280px;
position:absolute;
  bottom:0px;
  background-image:url("http://nftgaragesale.art/images/logo1.gif");
  background-position:bottom left;
  background-size: contain;
  background-repeat:no-repeat;
  filter: drop-shadow(0.45rem 0.45rem 0.4rem rgba(0, 0, 0, 0.5));
}
.lowerleft2{
width:100%;
height:100%;
    max-height:280px;
position:absolute;
bottom:0px;
z-index:4;
  background-image:url("https://i.imgur.com/tTifFTy.png");
  background-position:bottom left;
  background-size: contain;
  background-repeat:no-repeat;
  filter: drop-shadow(0.45rem 0.45rem 0.4rem rgba(0, 0, 0, 0.5));
}
.lowerleft3{
width:100%;
height:100%;
position:absolute;
  max-height:280px;
  bottom:0px;
z-index:4;
  background-image:url("https://i.imgur.com/xRgvc9O.png");
  background-position:bottom left;
  background-size: contain;
  background-repeat:no-repeat;
  filter: drop-shadow(0.45rem 0.45rem 0.4rem rgba(0, 0, 0, 0.5));
}
.lowerleft4{
width:100%;
height:100%;
    max-height:280px;
position:absolute;
  bottom:0px;
  background-image:url("https://i.imgur.com/EoeQhxm.png");
  background-position:bottom left;
  background-size: contain;
  background-repeat:no-repeat;
  filter: drop-shadow(0.45rem 0.45rem 0.4rem rgba(0, 0, 0, 0.5));
}
.lowerrightcontainer {position:relative;  height:100%; overflow:hidden;}
.lowerright1{
position:absolute;
  max-height:380px;
  bottom:0px;
width:100%;
height:100%;

  background-image:url("https://i.imgur.com/GB8saPl.png");
  background-position:bottom right;
  background-size: contain;
  background-repeat:no-repeat;
  filter: drop-shadow(0.45rem 0.45rem 0.4rem rgba(0, 0, 0, 0.5));
}
.lowerright2{
position:absolute;
  bottom:0px;
width:100%;
height:100%;
  max-height:380px;
  background-image:url("https://i.imgur.com/i2MQ297.png");
  background-position:bottom right;
  background-size: contain;
  background-repeat:no-repeat;
  filter: drop-shadow(0.45rem 0.45rem 0.4rem rgba(0, 0, 0, 0.5));
}
.textarea {
padding-top:5vh;
width:100%;
text-align:left;
font-family: 'Cutive Mono', monospace;

z-index:2;
/* display:grid;
grid-template-columns: 1fr 3fr 1fr; */
margin-bottom:20px;
}

.navbar-item {
    text-decoration: none;
    color: black;
}
.btn-light {

  box-shadow:1px 2px 4px #00000050;

margin-right:1vw
}
.btn-light:hover {box-shadow:1px 2px 4px #00000011;
  }
.flyer a img {
  width: 200px;box-shadow: 2px 1px 2px #0000006e;
      border: 2px dashed black;
}
.flyer a img:hover  {
  width: 200px;box-shadow: 1px 0px 1px #0000006e;
      border: 1px dashed black;
}
/* ANIMATION CSS */
.lowerleft {
margin-bottom:-10px;
margin-left:3px;
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.lowerleft {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

.lowerright {
margin-bottom:-10px;
margin-left:3px;
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.lowerright {
    -webkit-animation: mover2 1s infinite  alternate;
    animation: mover2 1s infinite  alternate;
}
@-webkit-keyframes mover2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-6px); }
}
@keyframes mover2 {
    0% { transform: scale(100%); }
    100% { transform: scale(98%); }
}
.lowerright2 {    -webkit-animation: mover2 1.5s infinite  alternate;
    animation: mover3 1.5s infinite  alternate;   transform-origin: bottom left;}


@keyframes mover3 {
    0% { transform: rotate(4deg); }
    100% { transform: rotate(1deg); }
}

.textarea .col {
  text-align:left;
  font-size:2.5rem;
}
.textarea h2 {margin-bottom:11px;
  margin-top:20px;
  font-size:2.2em;
}

@media only screen and (max-width: 900px) {
  .textarea {
    height:80vh;
  }
  .textarea {
  overflow:scroll;
padding-right:10px;
  padding-left:10px;
  tezt-align:left;
}
  .photocontainer {
  width:100%;
height:100%;
  display:grid;
  grid-template-rows: 2fr 3fr;
  grid-template-columns: 5fr 8fr 5fr;

position:absolute;
z-index:-1;
}
  .col-10.col-sm-10.col-lg-8.textcenter {
    padding-left: 10px;
}

}