@font-face {
    font-family: 'script';
    src: url("https://cdn.jsdelivr.net/gh/dearcoeur/coeur-assets@main/fonts/PF%20Pixelscript%20Pro%20Regular.ttf");
  }
@font-face{
font-family: 'spirit';
src:url(https://dl.dropbox.com/scl/fi/bqitfm4rr6tfgt3ea2jrq/Spirit.ttf?rlkey=r8hrj9c01d3cmv2iqt3vxm9tp&dl=0);
}
@font-face {
  src: url(https://kkul.store/fonts/angel.woff2);
  font-family: 'angel';
  font-display: swap;
}

::selection {
    background-color: #ffedf5;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #fff7fa;
  -webkit-border-radius: 0ex;
  border: 1px dotted #edaecb;
}


a {
  color: #767676;
  text-decoration: none;
}

p {
  margin:5px 0px 5px 0px;
}
ul {
  margin:5px 0px 5px 0px;
}

body {
  font-family: 'angel';
  color:#767676!important;
  font-size: 13px;
  letter-spacing: 0.3px;
  background-color: #f5f5f5;
  background-image: radial-gradient(circle, #ffffff 18%, transparent 20%), radial-gradient(circle, #ffffff 18%, transparent 20%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.main {
  position: relative;
  margin: 0 auto;
      border-radius: 14px 14px 0 0 !important;
  height:500px;
  width:800px;
}

.head {
  width: auto;
  height: 90px;
  background: linear-gradient(to bottom, #fff 0%, #eaeaea 50%, #dcdcdc 51%, #eaeaea 100%) !important;
      border-radius: 12px 12px 0 0 !important;
      border: 1px solid #ccc !important;
  padding:10px 0px 0px 50px;
}

#title {
  font-family: script;
  font-size: 20px;
}

.chain {
  position: absolute;
  width: 300px;
  height: auto;
  right: -160px;
  bottom: 220px;
  z-index: 1001;
  transform-origin: top center;
    animation: keychain-swing 3.5s ease-in-out infinite;
}

@keyframes keychain-swing {
  0% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(-5deg);
  }
}

.decoright {
  position: absolute;
  width: 300px;
  height: auto;
  right: -70px;
  bottom: 190px;
  transform: scaleX(-1) rotate(180deg) translateZ(0) !important;
  z-index: 1000;
  pointer-events: none;
}

.decorleft {
  position: absolute;
  width: 300px;
  height: auto;
  left: -70px;
  bottom: 190px;
  transform: rotate(180deg) translateZ(0) !important;
  z-index: 1000;
  pointer-events: none;
}

#uh {
 background: linear-gradient(to bottom, #fff 0%, #eaeaea 100%) !important;
  padding:10px 10px 10px 50px;
  border: 1px solid #ccc !important;
}

.middle {
  display: flex;
  margin-bottom:10px;
}

#left {
  width:25%;
}

.catt {
  position: absolute;
  width: 110px;
  height: auto;
  left: 120px;
  bottom: 20px;
  z-index: 500;
  transform: rotate(-7deg);
}

#nav {
  background-color: #e5e5e5;
  border: 1px solid #ccc !important;
}

#boxtitle {
    font-weight: bold;
    text-align: center;
  padding: 10px 15px !important;
  background: linear-gradient(to bottom, #fff 0%, #eaeaea 100%) !important;
  border-bottom: 2px solid #ccc !important;
}

#botton {
  padding: 3px;
  border-bottom: 1px solid #ccc !important;
  padding: 7px 10px !important;
}

.button-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

#middle {
  width:50%;
  background-color:#eeeeee;
}

.yeah {
  display: flex;
  height:170px;
  width:auto;
  border: 1px solid #ccc !important;
}

#todo {
  height:auto;
  width:200px;
}

#logtext {
  overflow-y: auto;
  overflow-y: scroll;
    overflow-x: hidden;
  background-color:#eeeeee;
  height:134px;
  width:auto;
  padding-left:5px;
}

#dailypic {
  background-image: url('https://64.media.tumblr.com/d3ca85ce92172f198ed839ab107fc263/378de9796e8b29af-f5/s2048x3072/bbf840b89f88ddeb0176087fc32ffdd4bf64aa5c.pnj');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center -16px;
  border-left: 1px solid #ccc !important;
  height:auto;
  width:200px;
}

#knives {
   width: auto;
  height: 93px;
  background-image:url(https://64.media.tumblr.com/a6a4c4bfd0926497d9586a4444255c45/ec7c358be5ac4724-51/s1280x1920/67ec423e4082bce70107ec704af70970dc4a12f8.gifv);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center -10px;
  border: 1px solid #ccc !important;
}

#hey {
  height: 95px;
  width:auto;
  background-color: #eeeeee;
  padding:10px;
}

#right {
  width: 25%;
}

#me {
  height:200px;
  background-color: #eeeeee;
  padding:10px;
  border: 1px solid #ccc !important;
}

.meo{
  position: absolute;
  width: 70px;
  height: auto;
  right: 135px;
  bottom: 175px;
  z-index: 500;
  transform: rotate(-10deg);
}

#pic {
  text-align: center;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000002d);
}

#music {
  height: 193px;
  width:auto;
  background-color: #eeeeee;
  border: 1px solid #ccc !important;
}

#oh {
  padding:5px;
  overflow-y: auto;
    height: 130px;
}