body {
  background-image: url("images/wormietiles.png");
  background-color: #211136;
    background-attachment: fixed;
  background-position: center;
  color: black;
  font-family: Garamond, serif;
  animation: scrollbg 15s linear infinite;
}

html {
     box-shadow: inset 0px 0px 40px 0 black;
}


.header {
     background-attachment: fixed;
  background-image: url("images/BABYMARK.png");
   width: 100%;
   height: 250px;
   margin:auto;
   background-size: 10%;
   text-align: center;
   padding: 10px;
}

.title {
  margin:auto;
  -webkit-transition-property: all; 
-webkit-transition-duration: 0.3s; 
-webkit-transition-timing-function: ease; 
}

.title:hover {
  margin:auto;
 transform: scale(1.1); 
}

.button-allign {
  text-align: center;
   width: 70%;
   height: 10%;
  margin:auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


hr {
  border-style: dashed;
  border-color: lime;
  color: lime;
  box-shadow:  0px 0px 20px #42027a;
}

.about {
  text-shadow: 2px 2px 4px #220024;
  color: #e4f0df;
  padding: 10px;
  border-radius: 15px;
  border-style: inset;
  border-color: #640279;
  border-width: 4px;
  text-align: center;
  font-size: 20px;
  background-color: purple;
  width: 90%;
  margin:auto;
  background-image: linear-gradient(to top, #640279,#800080);
  box-shadow: inset 0px 0px 40px 0 #42027a;
}

.about2 {
  text-shadow: 2px 2px 4px black;
  color: #85f56e;
  padding: 10px;
  border-radius: 15px;
  border-style: inset;
  border-color: lime;
  border-width: 4px;
  text-align: center;
  font-size: 20px;
  background-color: #1B0028;
  width: 95%;
  margin:auto;
  background-image: linear-gradient(to top, #1B0028,#310044);
  box-shadow: inset 0px 0px 40px 0 black;
}

.main {
  border-style: outset;
  border-color: #120017;
  background-color: #1b0024;
  width: 70%;
  height: 100%;
   margin:auto;
   padding: 10px;
   box-shadow: 0px 0px 20px 0 black;
}

.textheader {
  font-weight: bold;
  text-align:center;
  width:50%;
  border:5px;
  border-radius:15px; 
  border-color:lime; 
  border-style: outset; 
  box-shadow: inset 0px 0px 20px 0 #42027a;
  }
  
  .link:hover {
  color : #85f56e;
  font-size:17px;
   transform: scale(1.5); 
}


.link-button {
  color : #00301b;
  font-size: 15px;
}
  
button {
  color: #00301b;
  font-family: Garamond, serif;
  font-weight: bold;
  box-shadow: 0px 0px 15px 0 black;
  border-radius: 15px;
  border-style: outset;
  border-color: green;
  border-width: 4px;
  background-color: lime;
  background-image: linear-gradient(to top, green, lime);
  width: 20%; 
  height: 50px;
  padding: 10px;
  margin: 10px 20px 10px 20px;
  text-align: center;
    -webkit-transition-property: all; 
-webkit-transition-duration: 0.3s; 
-webkit-transition-timing-function: ease; 
}

button:hover {
  transform: scale(1.2); 
  box-shadow: 0px 0px 20px 0 black;
  height: 40px;
  background-color: green;
  background-image: linear-gradient(to top, #006618, #00a316);
    border-width: 5px;
  
}

/* gallery stuff from w3schools */

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
     overflow-y: scroll;
     border-radius: 15px;
     border-style: inset;
     border-color: lime;
     border-width: 4px;
     background-color: #1b0024;
     width: 90%;
     height: 400px;
     margin:auto;
     padding: 20px;
     box-shadow: 0px 0px 20px 0 black;
}

.gallery-item {
  margin: 15px;
  border: 5px outset lime;
  border-radius: 5px;
  width: 250px;
  height: 250px;
  object-fit: cover;
   -webkit-transition-property: all; 
   -webkit-transition-duration: 0.3s; 
   -webkit-transition-timing-function: ease; 
   padding: 10px;
   background-image: linear-gradient(to top, #640279,#800080);
   box-shadow: inset 0px 0px 40px 0 #42027a;
}

.gallery-item:hover {
  border: 5px solid green;
  transform: scale(1.1); 
  
}

.gallery-item img {
  object-fit: cover;
  width: 100%;
  height: 80%;
}

.desc {
  padding: 15px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px black;
  color: #85f56e;
}