@font-face {
    font-family:'vcr-jp';
    src: url("https://bokukko.neocities.org/fonts/vcr-jp.ttf");
}

@font-face {
    font-family:'medodica';
    src: url("https://bokukko.neocities.org/fonts/MedodicaRegular.otf");
}

@font-face {
    font-family:'dotemp demo';
    src:url("https://bokukko.neocities.org/fonts/Dotemp-8bit.ttf")
}

body {
    text-align:center;
    background-color:#fcf7f8;
    color:#343434;
    overflow:hidden;
    font-family:'medodica';
    font-size:35px;
    cursor: url('https://cdn.cursors-4u.net/previews/small-grey-outline-pointer-6a97f823-32.webp') 32 32, auto;
}

/* scrollbar code */

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

::-webkit-scrollbar-track {
    background-color:#e0dfdf80;
    box-shadow: inset 3px 3px 3px #00000030;
}

::-webkit-scrollbar-thumb {
    border: 2px ridge #b7b7b780;
    border-radius:10%;
    background-color:#c0bfbf80;
}

::-webkit-scrollbar-thumb:active {
    background-color:#acacac80;
}

/* end scrollbar code */

.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  filter:opacity(90%);
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.main {
    width:65%;
    height:90%;
    border: 5px ridge #54e3d7;
    position:fixed;
    right:100px; 
    top:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image:url('https://bokukko.neocities.org/graphics/plaid-turquoise.jpg');
}

.mainm {
    width:75%;
    height:90%;
    border: 5px ridge #54e3d7;
    position:fixed;
    right:50px; 
    top:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image:url('https://bokukko.neocities.org/graphics/plaid-turquoise.jpg');
}

.mainhealth {
    width:60%;
    height:650px;
    margin:0 auto;
    border: 5px ridge #626262;
    background:#e1e1e1;
    overflow-y:scroll;
}

#window {
    border: 1px dashed #343434;
    background-color:#ffffff;
    width:80%;
    height:80%;
}

#windoww {
    border: 1px dashed #343434;
    background-color:#ffffff;
    width:90%;
    height:90%;
    overflow-y:scroll;
}

#info {
    border:3px outset #ffecf1;
    background-color:#ffd6e3;
    width:25%;
    height:20%;
    margin-top:10px;
    margin-left:10px;
    font-size:30px;
}

#info a {
    position:relative;
    display:inline-block;
    transition: all 0.1s ease-in-out;
    transform:scale(1);
}

#info a:hover {
    transform:scale(1.07);
}

#info a:active {
    transform:scale(.9);
}

#info img {
    filter:drop-shadow(2px 0px 0px #00000080);
}

.directory {
    width:20%;
    height:90%;
    position:fixed;
    left:20px;
    top:30px;
}

#button {
    background:linear-gradient(#ffeff4 20%,#ffd6e3,#ec95b0 80%);
    filter:drop-shadow(3px 3px 0px #00000080);
    border:3px solid white;
    border-radius:10px;
    height:50px;
    width:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'vcr-jp';
    font-size:20px;
    color:#ac395e;
    margin:30px;
    text-decoration:none;
    transition: transform 0.1s ease-in-out;
    transform:scale(1);
}

#button:hover {
    background:linear-gradient(#d4ffcd 20%,#90ff7c,#68bc59 80%);
    color:#379826;
    transform:scale(1.07);
}

#button:active {
    background:linear-gradient(#d4ffcd 20%,#90ff7c,#68bc59 80%);
    color:#379826;
    transform:scale(.9);
}

#buttonhealth {
    background:linear-gradient(#ebebeb 20%,#b8b8b8,#8d8d8d 80%);
    filter:drop-shadow(3px 3px 0px #00000080);
    border:3px solid white;
    border-radius:10px;
    height:50px;
    width:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'vcr-jp';
    font-size:20px;
    color:#1e1e1e;
    transition: transform 0.1s ease-in-out;
    text-decoration:none;
}

#buttonhealth:hover {
    background:linear-gradient(#c6c6c6 20%,#676767,#1e1e1e 80%);
    color:#ebebeb;
    transform:scale(1.07);
}

#buttonhealth:active {
    background:linear-gradient(#c6c6c6 20%,#676767,#1e1e1e 80%);
    color:#ebebeb;
    transform:scale(.9);
}

#mainimg {
    height:700px; 
    position:fixed; 
    left:250px; 
    bottom:-20px;
    filter:drop-shadow(3px 3px 0px #00000080);
}

#cbox {
    width:30%;
    height:40%;
    float:right;
}

.wmmain {
    border: 1px solid black;
    width:50%;
    height:100%;
    margin:0 auto;
}