@charset "UTF-8";
@font-face{
    font-family: "equestria";
    src:url(fonts/Equestria.ttf)
}
@font-face{
    font-family: "genshin impact";
    src:url(fonts/Genshin\ Impact\ DRIP\ FONT.ttf)
}
@font-face{
    font-family: "crayon";
    src:url(fonts/Rawrote\ Demo.ttf)
}
@font-face{
    font-family: "playfair";
    src:url(fonts/PlayfairDisplay-VariableFont_wght.ttf)
}
@font-face{
    font-family: "starborn";
    src:url(fonts/Starborn.otf)
}
@font-face {
    font-family: "bell mt";
    src: url(fonts/bell-mt.ttf);
}
::-webkit-scrollbar {
width: 12px
}
 
::-webkit-scrollbar:horizontal {
height: 17px
}
 
::-webkit-scrollbar-corner {
background: #eee
}
 
::-webkit-scrollbar-track {
background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%);
}
 
::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
 
::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}
 
::-webkit-scrollbar-button:vertical {
height: 17px
}


::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png");
border: 1.5px solid #888888;
border-radius: 5px;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png");
border: 1.5px solid #888888;
border-radius: 5px;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
    font-family:"bell mt";
    margin: 0;
}
main{
    width:1900px;
    height:1035px;
    margin:0 auto;
    display:flex;
    justify-content: center;
}
html{
    background-image: url(image/gimp.gif);
    background-repeat: no-repeat;
    background-size: cover;
}
.full-img{
    width:700px;
    border:1px darkred solid
}
#full{
    width:715px;
    height:1035px;
    overflow:scroll;
    position:relative;
    margin-top:30px;
    margin-right:20px
}
.crop-img{
    width:500px;
    border:1px darkred solid
}
#crop{
    width:515px;
    height:1035px;
    overflow:scroll;
    position:relative;
    margin-top:30px;
    margin-left:20px
}
#note{
    background-color: white;
    padding:5px;
    width:480px;
    height:max-content;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 2px dashed skyblue;
    box-shadow:greenyellow 0px 0px 15px 1px inset;
}
#center{
    position:relative;
    width:500px;
    height:1000px;
    margin-top:55px;
    overflow:hidden;
}
#header h3{
    position:absolute;
    text-align: center;
    z-index: 10;
    width:max-content;
    margin-top:0px;
    margin-left:40px
}
#note p{
    padding:10px;
    color: #555;
    font-size: 17px;
    line-height: 30px;
}
#figure{
    height:500px;
    margin-left: 20px;
    margin-top: 10px;
}
.div{
    width:92px
}
#home{
    position:absolute;
    z-index: 100;
    width:200px
}
#home:hover{
    width:210px;
}