html {
    background-color: white;
}

body {
    background-image: url(https://files.catbox.moe/vhboic.jpg);
    display: flex;
    margin: 0px;
    background-size: cover;
    justify-content: center;
    align-items: center;
}


:root {
    --white: #eeeeee;
    --vig: #4c4c4c;
}

.textbox {
    height: 100%;
    overflow-y: scroll;
    -webkit-font-smoothing:none;
    font-smooth:never;
}

@font-face {
    font-family: angelic peace;
    src: url(https://files.catbox.moe/ogg5n1.ttf) format(truetype);
}

@font-face {
    font-family: norefund;
    src: url(https://files.catbox.moe/p4r7j6.ttf) format(truetype);
}

.maincont {
    display: grid;
    grid-template-areas: 'title title funfact funfact'
                        'syn box1 box1 box1'
                        'pic1 box1 box1 box1'
                        'back back tenko tenko'
                        'back back pic2 pic2';
    grid-template-columns: 350px 150px 125px 200px;
    grid-template-rows: 130px 200px 200px 200px 235px;
    gap: 15px;
}

.maincont > * {
    padding: 10px;
}

#title {
    grid-area: title;
    position: relative;
}

#title .sh1 {
    z-index: 2;
    position: absolute;
    right: 90px;
    font-family: norefund;
    font-size: 30px;
    color: var(--vig);
    text-shadow: 0 0 2px black, 2px 2px black, -2px 2px black, 2px -2px black, -2px -2px black, 0 2px black, 0 -2px black, 2px 0 black, -2px 0 black, 
                0 0 4px var(--white), 4px 4px var(--white), -4px 4px var(--white), 4px -4px var(--white), -4px -4px var(--white), 0 4px var(--white), 0 -4px var(--white), 4px 0 var(--white), -4px 0 var(--white),
                5px 5px 3px black, 0 0 5px black, 0 0 6px black;
}

#title .sh2 {
    z-index: 2;
    position: absolute;
    font-family: norefund;
    font-size: 30px;
    left: 30px;
    bottom: 0;
    color: var(--vig);
    text-shadow: 0 0 2px black, 2px 2px black, -2px 2px black, 2px -2px black, -2px -2px black, 0 2px black, 0 -2px black, 2px 0 black, -2px 0 black, 
                0 0 4px var(--white), 4px 4px var(--white), -4px 4px var(--white), 4px -4px var(--white), -4px -4px var(--white), 0 4px var(--white), 0 -4px var(--white), 4px 0 var(--white), -4px 0 var(--white),
                5px 5px 3px black, 0 0 5px black, 0 0 6px black;
}

#title .title {
    position: absolute;
    width: 100%;
    font-size: 60px;
    top: 35px; left: 60px;
    text-shadow: 0 0 4px var(--white), 4px 4px var(--white), -4px 4px var(--white), 4px -4px var(--white), -4px -4px var(--white), 0 4px var(--white), 0 -4px var(--white), 4px 0 var(--white), -4px 0 var(--white),
                5px 5px 3px black;
    font-family: angelic peace;
}

#funfact {
    -webkit-font-smoothing:none;
    font-smooth:never;
    padding: 5px;
    grid-area: funfact;
    border-width:7px;
    border-style:solid;
    border-image: url(https://moekkis.neocities.org/pics/blacklace.png) 7 fill round;
}

#synopsis {
    grid-area: syn;
    border-width:7px;
    padding: 17px;
    z-index: 2;
    position: relative;
    border-style:solid;
    border-image: url(https://moekkis.neocities.org/pics/blacklace.png) 7 fill round;
}

#synopsis .textbox {
    overflow-y: auto;
    margin-top: auto;
    height: auto;
}

#pic1 {
    padding: 0px;
    position: relative;
    grid-area: pic1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pic1 #bg1 {
  width: 370px;
  height: 220px;
  background-image: url('https://i.pinimg.com/originals/e2/b1/91/e2b19173890478a53efb787ff8a4cc7d.gif'); /* Replace this */
  mask-image: url('https://files.catbox.moe/ifweqy.png');
  -webkit-mask-image: url('https://files.catbox.moe/ifweqy.png');
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-size: cover;
}

#pic1 #overlay {
    position: absolute;
    top:0;
    width: 100%;
    z-index: 0;
    left:0;
}

#pic1 #tomu1 {
    height: 120%;
    border: 1px solid black;
    position: absolute;
    right: 15px;
}

#pic1 #tomu2 {
    position: absolute;
    height: 100%;
    right: 30px;
    bottom: -15px;
}

#pic1 #yumeanni {
    color: white;
    -webkit-font-smoothing:none;
    font-smooth:never;
    text-shadow: 0 0 2px black, 0 0 5px black, 0 0 3px black;
    position: absolute;
    bottom: -10px;
    left: 0;
}

#box1 {
    grid-area: box1;
    padding: 25px;
    border-image-source: url(https://i.postimg.cc/VkLqKy07/sjdgf2.png);
    border-image-slice: 20%;
    background-color: var(--white);
    box-shadow: inset 0 0 50px var(--vig), inset 0 0 30px var(--vig), inset 0 0 25px var(--vig);
    border-image-width: 20px;
    border-image-repeat: round;
    position: relative;
}

#box1 .title {
    position: absolute;
    font-family: angelic peace;
    font-size: 40px;
    top:-25px;
    right:-20px;
    text-shadow: 0 0 4px var(--white), 4px 4px var(--white), -4px 4px var(--white), 4px -4px var(--white), -4px -4px var(--white), 0 4px var(--white), 0 -4px var(--white), 4px 0 var(--white), -4px 0 var(--white),
                5px 5px 3px black;
}

#tenko {
    grid-area: tenko;
    border-width:7px;
    border-style:solid;
    position: relative;
    border-image: url(https://moekkis.neocities.org/pics/blacklace.png) 7 fill round;
}

#tenko .title {
    position: absolute;
    font-family: angelic peace;
    font-size: 40px;
    bottom:-30px;
    right:-20px;
    z-index: 100;
    text-shadow: 0 0 4px var(--white), 4px 4px var(--white), -4px 4px var(--white), 4px -4px var(--white), -4px -4px var(--white), 0 4px var(--white), 0 -4px var(--white), 4px 0 var(--white), -4px 0 var(--white),
                5px 5px 3px black;
}

#tenko .textbox {
    height: 150px;
}

#img2 {
    overflow: hidden;
    grid-area: pic2;
    position: relative;
}

#backstory {
    position: relative;
    z-index: 2;
    grid-area: back;
    padding: 25px;
    border-image-source: url(https://i.postimg.cc/VkLqKy07/sjdgf2.png);
    background-color: var(--white);
    box-shadow: inset 0 0 50px var(--vig), inset 0 0 30px var(--vig), inset 0 0 25px var(--vig);
    border-image-slice: 20%;
    border-image-width: 20px;
    border-image-repeat: round;
}