html, body { height: 100%; }

body {
background-image: url('https://dl.glitter-graphics.com/pub/1309/1309647bo3cj4kxyx.png');
background-attachment: fixed;
background-repeat: repeat;
font:11px 'arial';
}

.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
  max-width: 910px;
  max-height: 1020px;
  padding: 8px;
  z-index: 4;
  margin: auto;
  border: 10px solid lightskyblue;
  border-radius: 15px;
  background-color: #f0f8ff;
  align-content: space-between;
  justify-content: space-around;
  position:relative;
}

.div1 {
    grid-column: span 3 / span 3;
    max-width: 890px;
    height: 430px;
    width: 100%;
    border: 2px dotted lightgray;
    padding: 8px;
position: relative;
background-image: url('images/header.avif');
background-size:cover;
background-repeat: no-repeat;
background-position:center;
background-color:#daf8f8;
}

.div2 {
    grid-column: span 1;
  grid-row: span 3;
    grid-row-start: 2;
    height: 300px;
    width: 175px;
    padding: 5px;
    border: 10px solid transparent;
    border-image: url('images/blue-lace-border.avif') 8 fill round;
    background-clip: padding-box;
    position: absolute;
    margin-left: 1%;
}

.div3 {
    grid-column: span 2 / span 2;
    grid-row: span 2;
    grid-row-start: 2;
    padding: 10px;
    border: 5px solid lightskyblue;
  border-radius: 10px;
    margin-left: 35%;
    margin-right:0%;
    width:640px;
    max-height: fit-content;
  background-image: url('https://dl3.glitter-graphics.net/pub/1997/1997583dm5ylllxuy.gif');
  background-size: contain;
  background-attachment: fixed;
  background-repeat: repeat;
  position: relative;
}

.div4 {
    grid-row-start: 4;
    grid-column: 1;
    height: 190px;
    padding: 8px;
    justify-content: center;
    border: 2px dotted lightpink;
    background-color: #daf8f8;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: rgb(154, 195, 233) transparent;
  scrollbar-width: thin;
  width: 230px;
  float: left;
}

.div5 {
    grid-row-start: 4;
    grid-column-start: 2;
    height: 190px;
    padding: 8px;
    justify-content: center;
    border: 2px dotted lightpink;
    background-color: #daf8f8;
        background-image: url('images/bgpearl1c_blue.gif');
    background-attachment: fixed;
    background-repeat: repeat;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: rgb(154, 195, 233) transparent;
  scrollbar-width: thin;
  flex: 33%;
  width: 210px;
}

.div6 {
    grid-row-start: 4; 
    grid-column: 3;
    height: 190px;
    padding: 8px;
    justify-content: center;
    border: 2px dotted lightpink;
    background-color: #daf8f8;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: rgb(154, 195, 233) transparent;
  scrollbar-width: thin;
  flex: 33%;
  width: 210px;

}
.div7 {
  grid-row-start: 4; 
    grid-column: 3;
    height: 190px;
    padding: 8px;
    justify-content: center;
    border: 2px dotted lightpink;
    background-color: #8ddcf5;
  overflow-y: hidden;
  overflow-x: hidden;
  scrollbar-color: rgb(154, 195, 233) transparent;
  scrollbar-width: thin;
  flex: 33%;
  width: 210px;
}


#cutebox {
      overflow-y: scroll;
      overflow-x: hidden;
      max-height: 10em;
      max-width: 500px;
      padding: 1rem;
      background-image: url('images/polka.jpg');
      background-attachment: fixed;
      background-repeat: repeat;
      background-color: #ffebf9;
      scrollbar-color: #add8e6 transparent;
      scrollbar-width: thin;
    }

#cutebox::-webkit-scrollbar {
  width: 10px;
}

#cutebox::-webkit-scrollbar-track {
  background: transparent;
}

#cutebox::-webkit-scrollbar-thumb {
  background: #add8e6;
  border-radius: 10px;
}

    #cutebox2 {
      overflow: scroll;
      overflow-x: hidden;
      max-height: 13em;
      max-width: 300px;
      padding: 1rem;
      background-image: url('images/polka.jpg');
      background-attachment: fixed;
      background-repeat: repeat;

    }

 .cutebox-inner::-webkit-scrollbar {
  width: 10px;
  background: #ffe0e0;
}
.cutebox-inner::-webkit-scrollbar-thumb {
  background: #ffa3a3;
  border-radius: 0px;
}
.cutebox-inner::-webkit-scrollbar-track {
  background: #ffe0e0;
  border-radius: 0px;
}   

ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  background-color: #fdd4f2;
  border: 1px solid gray;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

li a {
  display: inline-block;
  color: black;
  padding: 15px 19px;
  text-decoration: none;
}
li a:hover {
  background-color: gray;
  color: white;
  text-decoration: underline;
}
h1{
  display: flex;
    font-family: georgia;
    font-weight: lighter;
    justify-content: space-between;
    border-bottom: 1px dashed;
    border-top: 1px dashed;
    padding: 5px;
    letter-spacing: 2px;
    background: linear-gradient(to left, #97e1ff 0%, #fef0f000 90%);
    text-shadow: var(--shad3);
}

h2{    
    display: flex;
    font-family: georgia;
    font-weight: lighter;
    justify-content: center;
    border: 1px solid;
    padding: 5px;
    letter-spacing: 1px;
    background: linear-gradient(to left, #aadcff 100%, #fef0f000 0%);
    background-image: url('images/cloud divider.avif');
    background-size: cover;
    text-shadow: var(--shad2);
}

h3 {
  font-size: 16px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #507acf;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #fcc0ea,
               1px 2px 0px #c497c0,
               1px 3px 0px #c497c0,
               1px 4px 0px #c497c0,
               1px 5px 0px #c497c0,
               1px 6px 0px #c497c0;
  text-align:left;
}
.gallery { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  width:650px; /* this can be modified to make the gallery wider */
  overflow-y: scroll;
  overflow-x: hidden;
  height: 430px;
  scrollbar-color: lightblue transparent;
  scrollbar-width: thin;
}

.gallery img {
  width:200px; /* this sets the width for every image */
  height:150px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.gallery > div {
  width:200px; /* this should match the image height */
  height:150px; /* this should match the image width */
  margin-right:10px; /* this controls the gaps between the images */
  margin-bottom:10px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.gallery img:hover {
  transform:scale(2.5); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}
    textarea {
  padding: 10px;
  max-width: 100%;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 1px #999999;
}
.image-holder {
    position:absolute;
    left: 67%; 
    top: 3%;
}

.image-holder img 
{
    width: 100%;  
}

.sticker-links {
  display:flex;
  flex-wrap:wrap;
  width:650px; /* this can be modified to make the gallery wider */
  overflow-y: scroll;
  overflow-x: hidden;
  height: 430px;
  scrollbar-color: lightblue transparent;
  scrollbar-width: thin;
}

.sticker-links img {
  width:200px; /* this sets the width for every image */
  height:150px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.sticker-links > div {
  width:200px; /* this should match the image height */
  height:150px; /* this should match the image width */
  margin-right:10px; /* this controls the gaps between the images */
  margin-bottom:10px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.sticker-links img:hover {
  border: 3px solid lightpink;
  object-fit:cover; /* this keeps the aspect ratio of the original images*/
}