@import url("https://fonts.googleapis.com/css2?family=Schoolbell&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap");

body {
    background-image: linear-gradient(
        45deg,
        #efc2c5 25%,
        #f7ecd4 25%,
        #f7ecd4 50%,
        #efc2c5 50%,
        #efc2c5 75%,
        #f7ecd4 75%,
        #f7ecd4 100%
    );
    background-size: 56.57px 56.57px;
}

.bigcont {
    filter: drop-shadow(0 0 1rem white);
    width: 1200px;
    height: fit-content;
    padding: 15px;
    margin: auto;
    border-style: solid;
    border-image: url(https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/tumblr_3d3b1f8342e736cfe4cb7d277311872a_36e467ea_1280.webp)
        40 fill repeat !important;
    border-image-slice: 24% !important;
    border-image-repeat: round !important;
    border-width: 40px !important;
    background-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/tumblr_517b61d902de6c34b0fab7fa8766e413_83a4b235_75%20(1)%20(2)%20(1).webp");
    background-clip: padding-box;
    background-position: center;
}

.container {
    height: 900px;
    border-style: solid;
    border-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/ct98bi%20(2).webp")
        40 fill repeat !important;
    border-image-slice: 22% !important;
    border-image-repeat: round !important;
    border-width: 15px !important;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader quoteheader"
        "pfpleft pfpleft pfpleft pfpleft scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 pfpright pfpright pfpright pfpright"
        "pfpleft pfpleft pfpleft pfpleft scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 pfpright pfpright pfpright pfpright"
        "pfpleft pfpleft pfpleft pfpleft scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 pfpright pfpright pfpright pfpright"
        "pfpleft pfpleft pfpleft pfpleft scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 pfpright pfpright pfpright pfpright"
        "pfpleft pfpleft pfpleft pfpleft scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 scrollbox1 pfpright pfpright pfpright pfpright"
        "infoleft infoleft infoleft infoleft scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 inforight inforight inforight inforight"
        "infoleft infoleft infoleft infoleft scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 inforight inforight inforight inforight"
        "infoleft infoleft infoleft infoleft scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 inforight inforight inforight inforight"
        "infoleft infoleft infoleft infoleft scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 inforight inforight inforight inforight"
        "infoleft infoleft infoleft infoleft scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 inforight inforight inforight inforight"
        "infoleft infoleft infoleft infoleft scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 inforight inforight inforight inforight"
        "infoleft infoleft infoleft infoleft scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 inforight inforight inforight inforight"
        "infoleft infoleft infoleft infoleft scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 scrollbox2 inforight inforight inforight inforight"
        "quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter quotefooter";
    background: white;
    background-clip: padding-box;
}

.quoteheader {
    grid-area: 1 / 1 / 2 / 16;
    border: 7px double white;
    background-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/tumblr_69f7258c63a2225410981194ffcf4cb2_d83421be_75%20(1)%20(3).webp");
    background-size: contain;
    background-position: center;
}

.quotefooter {
    grid-area: 15 / 1 / 16 / 16;
    border: 7px double white;
    background-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/tumblr_69f7258c63a2225410981194ffcf4cb2_d83421be_75%20(1)%20(3).webp");
    background-size: contain;
    background-position: center;
}

.pfpleft {
    grid-area: 2 / 1 / 7 / 5;
    border: 5px double #d8909a;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/tumblr_f3d4f9100ec5dd1070048e2e1e86c190_554afeed_75%20(1).jpg");
}

.pfpright {
    grid-area: 2 / 12 / 7 / 16;
    border: 5px double #d8909a;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/tumblr_f3d4f9100ec5dd1070048e2e1e86c190_554afeed_75%20(1).jpg");
}

.infoleft {
    grid-area: 7 / 1 / 15 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px double #d8909a;
    background-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/tumblr_f3d4f9100ec5dd1070048e2e1e86c190_554afeed_75%20(1).jpg");
}

.inforight {
     display: flex;
    justify-content: center;
    align-items: center;
    grid-area: 7 / 12 / 15 / 16;
    border: 5px double #d8909a;
    background-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/tumblr_f3d4f9100ec5dd1070048e2e1e86c190_554afeed_75%20(1).jpg");
}

.scrollbox1 {
    padding: 5px;
    grid-area: 2 / 5 / 7 / 12;
    border: 3px dashed #795d52;
    background-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/u02-bg-paper%20(1).webp");
    overflow-y: scroll;
            color: #503d2f;
    text-align: center;
    font-size: 1.1em;
    font-family: "Playpen Sans";
}

.scrollbox2 {
        padding: 5px;
    grid-area: 7 / 5 / 15 / 12;
    border: 3px dashed #795d52;
    background-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/u02-bg-paper%20(1).webp");
        overflow-y: scroll;
            color: #503d2f;
    text-align: center;
    font-size: 1.1em;
    font-family: "Playpen Sans";
}

.quotes {
    text-align: center;
    color: #503d2f;
    font-size: 1.1em;
    font-family: "Playpen Sans";
}

.pfp img {
    border-style: solid;
    border-image: url("https://file.garden/Zx3Clq1Z7kthf_V-/birdbrainedneocities/shrines/johnshishrine/imgborder.webp")
        40 fill repeat !important;
    border-image-slice: 22% !important;
    border-image-repeat: round !important;
    border-width: 12px !important;
    transition: all 0.5s ease-in-out;
}

.pfp img:hover {
    transform: scale(1.1);
}

.quotes a {
    color: #503d2f;
}

.box {
    background-color: white;
    width: 280px;
    border: 4px double #795d52;
    height: 90%;
    color: #503d2f;
    text-align: center;
    font-size: 1.05em;
    font-family: "Playpen Sans";
    overflow-y: auto;
}

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

/* Track */
::-webkit-scrollbar-track {
  background: white;
    border: 2px dotted #d8909a;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #DF8E9D;
background: linear-gradient(180deg, rgba(223, 142, 157, 1) 0%, rgba(239, 194, 197, 1) 50%, rgba(223, 142, 157, 1) 100%);
    border: 2px dashed #795d52;
}

.scrollbox2 a {
        color: #503d2f;
}

  @keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

.pagedoll {
    position: fixed;
    bottom: 0px;
    animation: float 5s ease-in-out infinite;
          transition: all 0.6s ease-in-out;
        opacity: 1.0; 
}

.pagedoll:hover {
    opacity: 0.0;
}