/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    margin: 100px;
    background: linear-gradient(#a2d2ff, #bde0fe, #ffc8dd, #ffafcc);
    min-height: 100vh;
    position: relative;
    font-family: "Itim";
}

/*font*/ 
  .itim-regular {
  font-family: "Itim";
  font-weight: 400;
  font-style: normal;
    color: black;
}

/*header*/ 
header {
	font-size: 2em;
	font-family: monospace;
	border-bottom: 2px dashed #829ECD;
}

header img {
	float: right;
	width: 25%;
}

/*footer*/
footer {
	font-family: monospace;
	border-top: 2px dashed #829ECD;
}
/*grid*/
 .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    max-width: 1000px;
    margin: 0 auto;
 }

 .box {
    background: #ffd4fb;
    padding: 0px;
    text-align: center;
    font-family: "Itim";
 border: 2px solid #FFFFFF; /* white */
  box-shadow: 10px 5px 5px #a2d2ff;
  position: relative;
  height: 1000px;
  }

  .color-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: #4bbdff; /* Change color as needed */
}

 .row1-col1 {
    grid-column: 2 / 3;
    }

    .grid-item {
  position: relative;
} /*use this for overlayed image*/

.float-img-left {
  position: absolute;
  bottom: -16px;
  left: 16px;
  transform: translate(-70%, 25%);
  /* or use negative margins/offsets */
  /* left: -16px; bottom: -16px; */
}/*positioning of overlayed image*/

.float-img-right {
  position: absolute;
  bottom: 0px;
  right: 16px;
  transform: translate(70%, 25%);
  /* or use negative margins/offsets */
  /* left: -16px; bottom: -16px; */
}/*positioning of overlayed image*/



.float-gif1 {
    position: absolute;
    top: -15px;
    left: -20px;
}
.float-gif2 {
    position: absolute;
    top: 5px;
    left: 50px;
}

.float-gif3 {
    position: absolute;
    top: -50px;
    left: -80px;
}


    .myButton {
color: rgb(255, 0, 195); font-size: 40px; line-height: 30px; padding: 10px; border-radius: 5px; 
font-family: monospace; font-weight: bold; text-decoration: none; font-style: normal; 
font-variant: normal; text-transform: none; background-image: linear-gradient(to right, #ffc8dd, #ffafcc); 
border: 2px thick double; display: inline-block; border-color: #fffafd;}
.myButton:hover {
background: #a41c8b; }
.myButton:active {
background: #720953; }

/* Light Pink Pointer - https://www.cursors-4u.com/cursor/light-pink-pointer */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/light-pink-pointer-586da373-32.webp') 40 37, auto !important;
}
/* End www.Cursors-4U.com Code */

/*** scrollbar ***/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #2E2326;
  border: 1px solid;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #4bbdff;
  border: 1px solid;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffd4fb;
}

::-webkit-scrollbar-button {
  background: #9D8189;
}

::-webkit-scrollbar-button:hover {
  background: #F4ACB7;
}

::-webkit-scrollbar-button:single-button {
  border: 1px solid;
  height: 12px; 
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}