/*
 ▄▄▄· ▄▄▄·  ▄▄ • ▄▄▄ .    ▄▄▌   ▄▄▄·  ▄· ▄▌      ▄• ▄▌▄▄▄▄▄
▐█ ▄█▐█ ▀█ ▐█ ▀ ▪▀▄.▀·    ██•  ▐█ ▀█ ▐█▪██▌▪     █▪██▌•██  
 ██▀·▄█▀▀█ ▄█ ▀█▄▐▀▀▪▄    ██▪  ▄█▀▀█ ▐█▌▐█▪ ▄█▀▄ █▌▐█▌ ▐█.▪
▐█▪·•▐█ ▪▐▌▐█▄▪▐█▐█▄▄▌    ▐█▌▐▌▐█ ▪▐▌ ▐█▀·.▐█▌.▐▌▐█▄█▌ ▐█▌·
.▀    ▀  ▀ ·▀▀▀▀  ▀▀▀     .▀▀▀  ▀  ▀   ▀ •  ▀█▄▀▪ ▀▀▀  ▀▀▀ 
*/

@font-face {
    font-family: "alagard";
    src: url('/fonts/alagard.ttf') format('truetype')
}

@font-face {
    font-family: "dotrix";
    src: url('/fonts/dotrix.ttf') format('truetype')
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: radial-gradient(circle, rgba(255,0,0,0) 60%, rgba(2,0,36,1) 100%), url("https://bettysgraphics.neocities.org/images/backgrounds/555.GIF") /*https://64.media.tumblr.com/7d37f1c49b250847eb5d1eca35aba349/631d5887f5d13666-c4/s1280x1920/d6e050c83c37027b0dde29067cfee61a3816964a.jpg*/, linear-gradient(0deg, hsl(310deg 60% 53%) 0%, hsl(290deg 48% 31%) 52%, hsl(273deg 7% 10%) 100%);
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: 1920px 1080px, auto, 1920px 1080px;
    font-family: 'MS Gothic';
    background-color: #000000;
    text-shadow: 0.5px 0.5px 1px rgb(67, 27, 116);
    margin-top: 20px;
}

.leftbutterfly {
    position: absolute;
    left: 333px;
    filter: brightness(0.4) contrast(200%) drop-shadow(0px 0px 5px orangered);
    pointer-events: none;
}

.title {
    position: absolute;
    left: 430px;
    rotate: -2deg;
    filter: brightness(0.5) contrast(200%) drop-shadow(0px 0px 5px orangered);
    transition: transform .2s;
}

.title:hover {
    transform: scale(1.05);
    transform-origin: 50% 50%;
    filter: drop-shadow(0px 0px 10px #ff0000);
}

.lily {
    position: absolute;
    left: 430px;
    bottom: 100px;
    rotate: -35deg;
    pointer-events: none;
}

.lefttao {
    position: absolute;
    top: 450px;
    left: 200px;
    filter: drop-shadow(0px 0px 5px #800605);
    z-index: 1;
    pointer-events: none;
}

.container {
    background-image: linear-gradient(black, rgb(32, 4, 0));
    margin: auto;
    width: 888px;
    height: 888px;
    border-radius: 15px;
    border: solid 1px #800605;
    padding: 10px;
    display: flex;
}

.columns {
    padding: 10px;
    margin-top: 110px;
}

#left{
    flex-basis: 100%;
    margin-left: 10px;
    overflow: auto;
}

#right{
    flex-basis: 100%;
    margin-right: 10px;
    overflow: auto;
}

.writing {
    height: 500px;
    overflow-y: scroll;
    padding: 10px;
    border-radius: 15px;
    border: solid 1px #800605;
}

.blurframe {
    position: absolute;
    filter: brightness(100%);
}

.bootao {
    position: absolute;
    width: 150px;
    right: 395px;
    top: 10px;
    rotate: 30deg;
    filter: drop-shadow(0px 0px 20px darkred) saturate(500%) brightness(.7) contrast(10);
}

.bootao:hover {
    transform: scale(1.1) rotate(3deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0px 0px 20px darkred) saturate(500%) brightness(.75) contrast(10);
}

.h1 {
   font-family: 'alagard';
   color: rgb(0, 0, 0);
   filter: drop-shadow(0px 0px 3px #ff000079);
   font-size: 55px;
   font-weight: bold;
   display: inline;
   -webkit-text-stroke: 1px black;
}

.h2 {
   font-family: 'alagard';
   color: rgb(228, 91, 0);
   text-shadow: 1px 3px #4e0c00;
   filter: drop-shadow(0px 0px 4px #ff0000);
   font-size: 22px;
   font-weight: normal;
   line-height: 16px;
   letter-spacing: -1px;
}

.p {
    font-family: 'dotrix';
    color: #b42400;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -1px;
}

b {
    color: rgb(255, 51, 0);
}

a {
    color: rgb(218, 80, 0);
}

a:hover {
    color: rgb(107, 21, 0);
}

.righttao {
    width: 900px;
    position: absolute;
    top: 60px;
    filter: drop-shadow(0px 0px 20px darkred) sepia(0.9) saturate(500%) hue-rotate(10deg) brightness(1.1) contrast(10);
    opacity: 0.1;
    pointer-events: none;
}

.video {
    position: absolute;
    bottom: 10px;
    right: 500px;
}

.videoframe {
    position: absolute;
    bottom: 10px;
    right: 500px;
    pointer-events: none;
}

.rightbutterfly {
    position: absolute;
    bottom: -190px;
    right: 250px;
    filter: brightness(0.5) contrast(200%) drop-shadow(0px 0px 5px orangered);
    pointer-events: none;
}

/*
.▄▄ ·  ▄▄· ▄▄▄        ▄▄▌  ▄▄▌  ▄▄▄▄·  ▄▄▄· ▄▄▄  
▐█ ▀. ▐█ ▌▪▀▄ █·▪     ██•  ██•  ▐█ ▀█▪▐█ ▀█ ▀▄ █·
▄▀▀▀█▄██ ▄▄▐▀▀▄  ▄█▀▄ ██▪  ██▪  ▐█▀▀█▄▄█▀▀█ ▐▀▀▄ 
▐█▄▪▐█▐███▌▐█•█▌▐█▌.▐▌▐█▌▐▌▐█▌▐▌██▄▪▐█▐█ ▪▐▌▐█•█▌
 ▀▀▀▀ ·▀▀▀ .▀  ▀ ▀█▄▀▪.▀▀▀ .▀▀▀ ·▀▀▀▀  ▀  ▀ .▀  ▀
*/

::-webkit-scrollbar {
    width: 2px;
}
::-webkit-scrollbar-thumb {
    background: #ff121283;
}
::-webkit-scrollbar-track {
    background: #000000;
}
::-webkit-scrollbar-thumb:hover {
    background: #ff6702;
}