@font-face {
  font-family: "Magica";
  src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}
#magica {
  font-family: "Magica";
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #f896c8 #feecf5;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 5px;
  }

  *::-webkit-scrollbar-track {
    background: #feecf5;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #f896c8;
    border-radius: 10px;
    border: 1px solid #e664ae;
}
:root {
  --dk-color: #f896c8;
  --mid-color: #ffdaed;
  --lt-color: #feecf5;
  --dkest-color: #e664ae;
  --accent: #885FAA;
}
#float {
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
  color: #fff;
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}
html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url(/Decorations/DecoNoteBackground.png);
  background-color: var(--mid-color);
  background-repeat: repeat;
}
body {
  width: 1080px;
  position: relative;
  font-size: 18px;
  font-family: "magica";
  color: var(--accent);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 36px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 100px;
}
h1, h2, h3 {
  font-family: "magica";
  text-decoration: underline;
  text-align: center;
  line-height:1px;
  color: var(--dkest-color);
  margin-top: 80px;
}
.notice {
  background-image: url(/Decorations/DecoStarBackground.png);
  box-shadow:3px 3px 5px #666;
  box-sizing:border-box;
  margin:45px auto 20px;
  position:relative;
  width:80%;
  text-align: center;
  padding:30px;
}
.content {
  padding:30px;
  background-color: #fff;
}
.note{
  background-image: url(/Decorations/DecoMyMelodyNote.png);
  background-size: cover;
  background-position: top; 
  box-shadow:3px 3px 5px #666;
  box-sizing:border-box;
  display: block;
  height: 550px;
  width: 450px;
  padding: 25px;
  margin: 20px 10px;
}
.tape{
  background:url(/Decorations/TapeMask1.png) no-repeat center;
  height:50px;
  position:absolute;
  top:-25px;
  width:90%;
}
.tape2{
  background:url(/Decorations/TapeMask2.png) no-repeat center;
  height:50px;
  position:absolute;
  top:-25px;
  width:90%;
}
pre {
  height: 230px;
  font-size: 18px;
  font-family: "magica";
  overflow-y: scroll;
  margin: 0;
  word-break: break-word;
}
#backbutton{
  position: absolute;
  top: -75px;
  left: -50px;
  z-index: 50;
}
#pen {
  position: absolute;
  top: 150px;
  left: 30px;
  z-index: 50;
  transform: rotate(-10deg);
}
#gallery { 
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: center;
  width:100%
}
.zoom {
  transition: transform .2s;
  height: 200px;
  margin: 15px;
  object-fit:cover;
  box-shadow:3px 3px 5px #666;
}
.zoom:hover {
  transform: scale(1.5);
  object-fit:contain;
  background: #fff;
}