/*fonts*/ 
@font-face { 
	font-family: "Yusei Magic"; 
	src: url("./fonts/YuseiMagic-Regular.woff2") format("woff2"), 
		url("./fonts/YuseiMagic-Regular.woff") format("woff"), 
		url("./fonts/YuseiMagic-Regular.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal;
}
@font-face { 
	font-family: "Dela Gothic"; 
	src: url("./fonts/DelaGothicOne-Regular.woff2") format("woff2"), 
		url("./fonts/DelaGothicOne-Regular.woff") format("woff"), 
		url("./fonts/DelaGothicOne-Regular.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal;
}
@font-face { 
	font-family: "Hachi Maru"; 
	src: url("./fonts/HachiMaruPop-Regular.woff2") format("woff2"), 
		url("./fonts/HachiMaruPop-Regular.woff") format("woff"), 
		url("./fonts/HachiMaruPop-Regular.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal;
}
.yusei-magic-regular {
  font-family: "Yusei Magic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.dela-gothic-one-regular {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.hachi-maru-pop-regular {
  font-family: "Hachi Maru Pop", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*styling*/
body {
  background-image: url("/wallpaper.png");
  font-family: "Yusei Magic", sans-serif;
  cursor: url("icons/cursor1.png"), auto;
  padding-top: 40px;
}

p {
  color: #140303;
}

a {
    color: #6f99ed;
    cursor: pointer;
    text-decoration: underline;
}
a:hover, 
a:active, 
a:focus {
 color: #F1F2DA;
cursor: url('icons/cursor2.png'), auto;
}

#usagidance {
  display:flex;
  position:fixed;
  right:-170px;
  width:750px;
  bottom:-34px;
}

#root {
  display:flex;
  width:auto;
  height:auto;
}
#container {
  position: relative;
  margin: 0 auto;
  width: 960px;
  border-color: #35110a;
  border-style:solid;
  border-width:5px;
  border-radius:12px;
  }

#main {
  background-image: url("/mainbg.png");
  background-size:cover;
  padding:7px;
  box-shadow:inset 0 3px 7px #300808a4;
  overflow:hidden;
}

#banner {
  height: 185px;
  background-image: 
  linear-gradient(135deg, #ff8cd9 22.73%, #ffa6e6 22.73%, #ffa6e6 50%, #ff8cd9 50%, #ff8cd9 72.73%, #ffa6e6 72.73%, #ffa6e6 100%);
  background-size: 77.78px 77.78px;
}
#banner-title {
  left: 0;
  top:75px;
  position: absolute;
  font-style: italic;
  font-size: 100px;
  color: #f5e49f;
  font-family: "Dela Gothic";
  -webkit-text-stroke: 3px #2e0e08;
  text-shadow:4px 4px 2px #1f050571;
}

#banner-title span {
    display: inline-block;
    animation: wave 2s ease-in-out infinite, letterShine 2s linear infinite;
}
#banner-title span:nth-child(1) {
    animation-delay: 0s;
}
#banner-title span:nth-child(2) {
    animation-delay: 0.2s;
}
#banner-title span:nth-child(3) {
    animation-delay: 0.4s;
}
#banner-title span:nth-child(4) {
    animation-delay: 0.6s;
}
#banner-title span:nth-child(5) {
    animation-delay: 0.8s;
}
#banner-title span:nth-child(6) {
    animation-delay: 1s;
}

 .banner-border {
  height:3px;
  background-color: #310825;
 } 

 .banner-pic {
  width:180px;
  height:180px;
  margin-left:50px;
  bottom:0;
  position:absolute;
  transform-origin: center;
 }
 .banner-pic:hover {
  animation: shake 5s linear infinite;
  animation-timing-function: ease;
 }

.marquee {
   background: #ffd382;
   overflow: hidden;
   background: linear-gradient(0deg,rgba(255, 216, 148, 1) 0%, rgba(242, 205, 104, 1) 48%, rgba(255, 216, 110, 1) 51%, rgba(255, 239, 191, 1) 100%);
   box-shadow: inset 0 0 6px #ffffff;
   color: rgb(255, 255, 255);
   height: 30px;
   border-top-left-radius:8px;
   border-top-right-radius:8px;
   border-color: #2e0e08;
   border:5px;
 }

 .marquee-content{
  color: #461a12;
  width: 100%;
  height: 100%;
  line-height: 28px;
  font-family: "Hachi Maru", sans-serif;
  text-shadow: 1px 1px 2px #440b0b;
  font-weight:bold;
  text-align: center;
  transform: translateX(100%);
  animation: scroll-left 16s linear infinite;
 }

 #boxes {
  display:flex;
  width:960px;
  height:405px;
 }

 .inbox-divider{
  display:flex;
  position:absolute;
  margin-left:18px;
  margin-top:15px;
  height:0px;
  width:260px;
  background-color:#310825;
  border-width:1px;
  border-style:solid;
  border-color: #310825;
  border-radius:10px;
 }

 #leftcol {
  height:500px;
  width:300px;
  margin-right:10px;
  display:flex;
 }
 #update-log {
  display:flex;
  position:relative;
  margin-left:10px;
  width:310px;
  height:400px;
  background-image: linear-gradient(135deg, #f7e9ac 27.27%, #f0dd92 27.27%, #f0dd92 50%, #f7e9ac 50%, #f7e9ac 77.27%, #f0dd92 77.27%, #f0dd92 100%);
  background-size: 77.78px 77.78px;
  border-width:3px;
  border-color:#310825;
  border-style:solid;
  border-radius:10px;
  box-shadow: inset 0 0 6px #69100d;
  transition: transform 0.3s;
 }

 #update-log:hover{
  transform: scale(1.01);
 }

 .box-title {
  font-family:"Hachi Maru", sans-serif;
  font-weight:bold;
  font-size:larger;
  padding-top:5px;
  padding-left:15px;
  height:20px;
  position:relative;
  width:310px;
  text-shadow: 1px 1px 2px #440b0b;
  display:flex;
 }

 .ul-box {
  overflow-y:scroll;
  background-color:#fff2be;
  height:300px;
  width:270px;
  position:absolute;
  margin-bottom:15px;
  border-radius:12px;
  border-style:solid;
  border-color:#310825;
  bottom:10px;
  left:17px;
  box-shadow: 0 3px 6px #774c13;
 }

 .update{
  width:245px;
  max-height:300px;
  border-width:2px;
  border-style:solid;
  border-color:#310825;
  border-radius:6px;
  margin-left:6px;
  margin-top:4px;
  margin-bottom:5px;
  font-size:small;
  box-shadow: 0 2px 4px #a57446;
  transition:transform 0.8s ;
  overflow:hidden;
 }
 .update:hover {
  transform:scale(1.03);
 }
 .updatehead {
  font-family: "Yusei Magic", sans-serif;
  display:flex;
  padding-right:200px;
  display:block;
  color:#1a0207;
  width:max-content;
  border-width:0;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  background: linear-gradient(0deg,rgba(255, 216, 148, 1) 0%, rgba(242, 205, 104, 1) 48%, rgba(255, 216, 110, 1) 51%, rgba(255, 239, 191, 1) 100%);
 }

 .active, .updatehead:hover {
  cursor: url(icons/cursor2.png), auto;
 }

 .updatehead::before{
  content: url('icons/after.png');
 }


 .updatetext {
  transition: max-height 0.2s ease-out;
  display:block;
  box-shadow: inset 0 2px 3px #2e0707a4;
  color: #1a0207;
  padding-left:3px;
  padding-bottom:3px;
  border-top: 2px dashed #310825;
  animation-name: ulClose;
  animation-duration: 600ms;
  animation-fill-mode:both;
 }

 #about-me{
  display:block;
  position:absolute;
  width:310px;
  height:240px;
  background-image: linear-gradient(135deg, #f7e9ac 27.27%, #f0dd92 27.27%, #f0dd92 50%, #f7e9ac 50%, #f7e9ac 77.27%, #f0dd92 77.27%, #f0dd92 100%);
  background-size: 77.78px 77.78px;
  border-width:3px;
  border-color:#310825;
  border-style:solid;
  border-radius:10px;
  box-shadow: inset 0 0 6px #69100d;
  color: #1a0207;
  transition: transform 0.3s;
 }

 #about-me:hover {
  transform: scale(1.01);
 }

 .am-button {
  overflow:hidden;
  display:flex;
  margin-left:22px;
  height:35px;
  width:270px;
  text-align:center;
  border-color:#140303;
  border-radius:8px;
  font-family:"Yusei Magic", sans-serif;
  color: #1a0207;
  background-image: linear-gradient(0deg,rgb(255, 193, 212) 0%, rgb(255, 142, 195) 46%, rgb(255, 181, 205) 50%, rgb(255, 222, 244) 100%);
  box-shadow: 0 2px 5px #350610;
  transition: transform 0.6s ease;
  
 }
 .am-button:hover{
  cursor:url('icons/cursor2.png'), auto;
  background-image: linear-gradient(0deg,rgba(250, 157, 219, 1) 0%, rgba(235, 117, 194, 1) 48%, rgba(247, 136, 212, 1) 51%, rgba(255, 179, 230, 1) 100%);
  transform:scale(1.05);
 }

 #badge-scroll {
  display:flex;
  position:absolute;
  margin-top:250px;
  width:310px;
  height:150px;
  background-image: linear-gradient(135deg, #f7e9ac 27.27%, #f0dd92 27.27%, #f0dd92 50%, #f7e9ac 50%, #f7e9ac 77.27%, #f0dd92 77.27%, #f0dd92 100%);
  background-size: 77.78px 77.78px;
  border-width:3px;
  border-color:#310825;
  border-style:solid;
  border-radius:10px;
  box-shadow: inset 0 0 6px #69100d;
  transition: transform 0.3s;
 }

 #badge-scroll:hover {
  transform: scale(1.01);
 }

 .bs-scroller {
  position:absolute;
  left:22px;
  top:30px;
  height:80px;
  width:260px;
  overflow:hidden;
 }

 .bs-content {
  width: 500px;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  text-align:start;
  transform: translateX(100%);
  animation: scroller 10s linear infinite;
  margin-top: 10px;
  white-space: nowrap;
 }

 #rightcol {
  overflow:hidden;
  height:350x;
  width:300px;
  margin-left:5px;
  display:flex;
  background-image: linear-gradient(135deg, #f7e9ac 27.27%, #f0dd92 27.27%, #f0dd92 50%, #f7e9ac 50%, #f7e9ac 77.27%, #f0dd92 77.27%, #f0dd92 100%);
  background-size: 77.78px 77.78px;
  border-width:3px;
  border-color:#310825;
  border-style:solid;
  border-radius:10px;
  box-shadow: inset 0 0 6px #69100d;
  transition: transform 0.3s;
 }

 #rightcol:hover {
  transform:scale(1.01)
 }

 #funfact {
  display:flex;
  position:relative;
  width:300px;
  height:240px;
 }
 
 #fact-box {
  position:absolute;
  margin-left:15px;
  margin-top:50px;
  height:120px;
  width:235px;
  background: linear-gradient(0deg,rgba(250, 217, 140, 1) 0%, rgba(247, 233, 172, 1) 100%);
  border-radius:15px;
  border-style:solid;
  border-color:#310825;
  box-shadow: inset 0 1px 7px #583e04;
  text-align:center;
  color:#1a0207;
  padding-left:15px;
  padding-top:5px;
  font-weight:bold;
  overflow:hidden;
  padding-right:15px;
 }

.fact-button-bg {
  position:absolute;
  height:70px;
  width: 250px;
  left:22px;
  top:160px;
  background: linear-gradient(0deg,rgb(255, 193, 212) 0%, rgb(255, 142, 195) 46%, rgb(255, 181, 205) 50%, rgb(255, 222, 244) 100%);
  border-width: 3px;
  border-style:solid;
  border-color:#310825;
  border-radius:12px;
  box-shadow: inset 0 -2px 5px #8f5a70;
}
 .fact-button {
  position:absolute;
  width:240px;
  height:30px;
  top: 190px;
  left: 30px;
  font-family: 'Yusei Magic', sans-serif;
  font-weight:bold;
  color:#2e0707;
  background: linear-gradient(0deg,rgba(255, 216, 148, 1) 0%, rgb(245, 203, 87) 48%, rgb(255, 219, 121) 51%, rgba(255, 239, 191, 1) 100%);
  border-style:dashed;
  border-radius:8px;
  border-color:#140303;
  transition: transform 0.6s;
  box-shadow:0 2px 4px #2e0707;
 }

  .fact-button:hover {
    cursor: url('icons/cursor2.png'), auto;
    transform: scale(1.032);
    background: linear-gradient(0deg,rgba(242, 205, 104, 1) 0%, rgba(219, 169, 88, 1) 48%, rgba(224, 183, 94, 1) 51%, rgba(255, 216, 110, 1) 100%);
  }

  .hitcount {
    position:absolute;
    margin-left:130px;
    margin-top:360px;
    font-family:'Yusei Magic', sans-serif;
    color:#2e0707;
    font-weight:bold;
    font-size:small;
    background: linear-gradient(0deg,rgba(255, 216, 148, 1) 0%, rgb(245, 203, 87) 48%, rgb(255, 219, 121) 51%, rgba(255, 239, 191, 1) 100%);
    width:150px;
    height:23px;
    border-width:2px;
    border-style:solid;
    border-radius:8px;
    border-color:#310825;
    text-align:center;
    line-height:21px;
  }
  .hc-pic{
    position:absolute;
    width:158px;
    margin-top:228px;
    margin-left:-3px;
  }

  /*Navbar*/
  #nav-bar{
    display:block;
    position:absolute;
    height:fit-content;
    width:210px;
    border: 4px solid #2e0e08;
    border-radius:20px;
    background-color: #ffc1b5;
    top:230px;
    left:240px;
    box-shadow: 0 2px 10px #79630f;
    overflow:hidden;
  }

  #nb-title {
    position:absolute;
    margin-left:180px;
    margin-top:250px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing:5px;
    color: #f5e49f;
    font-weight:bold;
    font-size:30px;
    font-family: "Dela Gothic", sans-serif;
    -webkit-text-stroke: 0.5px #2e0e08;
    text-shadow: 0 0 8px #5f091e;
  }

  .navtitle, .restitle, .recipetitle, .pc1title, .revtitle, .pc2title, .pc3title, .pc4title {
    height:50px;
    width:210px;
    border-bottom: 4px dashed #2e0e08;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    transition: height 0.6s ease, letter-spacing 0.6s ease;
  }

  .navtitle:hover, .restitle:hover, .recipetitle:hover, .pc1title:hover, .revtitle:hover, .pc2title:hover, .pc3title:hover, .pc4title:hover {
      cursor: url(icons/cursor2.png), auto;
      height:60px;
      letter-spacing:1px;
  }
  .navtitle {
    border-top-left-radius:16px;
    border-top-right-radius:16px;
    background:linear-gradient(0deg,rgba(255, 216, 148, 1) 0%, rgb(245, 203, 87) 48%, rgb(255, 219, 121) 51%, rgba(255, 239, 191, 1) 100%);
  }
  .restitle{background:linear-gradient(0deg,rgb(255, 193, 212) 0%, rgb(255, 142, 195) 46%, rgb(255, 181, 205) 50%, rgb(255, 222, 244) 100%);}
  .recipetitle {background: linear-gradient(0deg,rgba(208, 153, 240, 1) 0%, rgba(173, 122, 245, 1) 48%, rgba(201, 157, 245, 1) 52%, rgba(212, 184, 252, 1) 100%);}
  .revtitle {background: linear-gradient(0deg,rgba(158, 218, 255, 1) 0%, rgba(108, 186, 235, 1) 48%, rgba(150, 213, 250, 1) 52%, rgba(222, 242, 255, 1) 100%);}
  .pc1title { background: linear-gradient(0deg,rgba(245, 234, 201, 1) 0%, rgba(242, 225, 167, 1) 48%, rgba(255, 243, 201, 1) 52%, rgba(255, 251, 240, 1) 100%);}
  .pc2title {background: linear-gradient(0deg,rgba(191, 132, 92, 1) 0%, rgba(176, 109, 65, 1) 48%, rgba(194, 130, 91, 1) 52%, rgba(227, 172, 143, 1) 100%);}
  .pc3title {background: linear-gradient(0deg,rgba(247, 181, 119, 1) 0%, rgba(235, 143, 63, 1) 48%, rgba(247, 171, 99, 1) 52%, rgba(255, 208, 163, 1) 100%);}
  .pc4title {
    height:46px;
    border-width: 0;
    border-bottom-right-radius: 16px; 
    border-bottom-left-radius: 16px;
    background: linear-gradient(0deg,rgba(250, 180, 188, 1) 0%, rgba(255, 148, 160, 1) 48%, rgba(255, 171, 181, 1) 52%, rgba(255, 209, 214, 1) 100%);
  }
  .navpic{
    margin-left:-6px;
    margin-top:-5px;
    display:flex;
    height:46px;
    width:46px;
  }

  .navhead {
    margin-left: 43px;
    margin-top:-35px;
    position:absolute;
    font-size:15px;
    font-weight:bolder;
    color:#1a0207;
    font-family: "Hachi Maru", sans-serif;
    text-shadow: 1px 1px 2px #440b0b;
  }

#divbar {
  padding: 10px 0 10px 0;
  height:12px;
  width:100%;
  background-position:center;
  background-image: url(images/usagidiv.png);
  background-size: 360px 30px;
}

#dbscroll {
  margin-top:7px;
  padding: 6px 0 6px 0;
  border-top: 2px solid #2c0802;
  border-bottom: 2px solid #2c0802;
  width:100%;
  height:20px;
  overflow:hidden;
  text-align:center;
  white-space: nowrap;
}

#dbcontent {
  width:100%;
  height:100%;
  animation: blinkieLeft 45s linear infinite;
}
#status-bar {
  width:100%;
  height:80px;
  background-image: linear-gradient(135deg, #ffa8ce 28.57%, #ff99c7 28.57%, #ff99c7 50%, #ffa8ce 50%, #ffa8ce 78.57%, #ff99c7 78.57%, #ff99c7 100%);
  background-size: 49.50px 49.50px;
  border-top: 4px dashed #180101;
  box-shadow:inset 0 0 6px #801660;
  animation: bgLeft 40s linear infinite;
  font-family: "Yusei Magic", sans-serif;
  color:#180101;
}

#status {
  position:absolute;
  height:fit-content;
  width:300px;
  text-shadow:1px 1px 2px #a04737;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s ease ;
  background: linear-gradient(0deg, rgba(250, 217, 140, 1) 0%, rgba(247, 233, 172, 1) 100%);
  z-index:1;
  border-radius: 16px;
  box-shadow:0 2px 7px #0a0200;
  text-align:left;
  margin-left: -240px;
  margin-top:-50px;
  padding-top:5px;
  transform:scale(0.3);
}
#status strong:before{
  content: url('icons/after.png');
  padding-left:10px;
}
#statustext {
  position:relative;
  font-weight:bold;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), #ffd19c);
  border-bottom-left-radius:16px;
  border-bottom-right-radius: 16px;
  box-shadow:0 5px 6px #2e0e08;
  text-shadow:none;
  text-align:center;
  width: 200px;
  height:50px;
  left:380px;
  margin-top:-63px;
  padding-top:20px;
  transform-origin: center;
}
#status p{
  padding-left:10px;
  text-shadow:none;
}
#status-ts {
  font-family: "Yusei Magic", sans-serif;
}

#statustext:hover #status {
  opacity:1;
  transform:scale(1);
}
#streaming, #watching{
  padding-left:100px;
  padding-top:8px;
  width:fit-content;
  font-weight:bold;
  transition: letter-spacing 0.4s ease, transform 0.4s ease;
}
#playing {
  position:absolute;
  margin-top:-64px;
  left:700px;
  width:fit-content;
  font-weight:bold;
  transition: letter-spacing 0.4s ease, transform 0.4s ease;
}
#favourite  {
  position:absolute;
  margin-top:-32px;
  left:700px;
  width:fit-content;
  font-weight:bold;
  transition: letter-spacing 0.4s ease, transform 0.4s ease;
}

#streaming:before, #watching:before, #playing:before, #favourite:before{
  content: url(icons/bpoint.png);
  padding-right:7px;
}

#streaming:hover, #watching:hover, #playing:hover, #favourite:hover{
  transform: skewX(-15deg);
  letter-spacing:2px;
}

.statustt{
  opacity:0;
  position:absolute;
  border-radius:8px;
  box-shadow: 0 2px 8px #460505;
  height:fit-content;
  width:fit-content;
  background: linear-gradient(0deg,rgba(255, 216, 148, 1) 0%, rgba(242, 205, 104, 1) 48%, rgba(255, 216, 110, 1) 51%, rgba(255, 239, 191, 1) 100%);
  padding:4px 8px 4px 8px;
  transition: opacity 0.2s ease, transform 0.4s ease;
  margin-top:-28px;
  transform:scaleY(0);
}

.statustt:before {
  content: "";
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent rgba(255, 216, 148, 1);
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
}

#streaming:hover .statustt, #watching:hover .statustt, #playing:hover .statustt, #favourite:hover .statustt {
  opacity:1;
  transform:scaleY(1);
}



/*Scrollbar*/
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px rgb(153, 119, 75); 
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #5f1f1f;
  box-shadow: inset 0 1px 5px rgb(87, 32, 22);
  transition: background-color 1s linear;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #2e0707; 
}

/*Footer*/
.footer {
  display:flex;
  height:30px;
  width:100%;
  padding: 4px 0 4px 0;
  background: linear-gradient(0deg,rgba(255, 210, 105, 1) 0%, rgba(255, 227, 176, 1) 100%);
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  border-top: 4px solid rgb(53, 17, 10);
  box-shadow:inset 0 0 6px #61043d;
  color: #b16763;
  text-shadow:0 0 7px #d6896b;
  font-weight:bolder;
  justify-content:center;
  align-items: center;
}
.footer p {
  display:flex;
  color:inherit;
  letter-spacing:6px;
  padding: 0 120px 0 120px;
}
.footer span {
  display:flex;
  text-shadow:0 0 2px #d6896b;
}
/*Keyframes*/
 @keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
 }

 @keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

  @keyframes scroller {
  0% {
    transform: translateX(80%);
  }
  100% {
    transform: translateX(-150%);
  }
 }

 @keyframes shake {
  0% {
    transform:rotate(0) scale(1);
  }
  25% {
    transform:rotate(-10deg) scale(1.05);
  }
  75% {
    transform:rotate(10deg) scale(1.05);
  }
  100% {
    transform:rotate(0) scale(1);
  }
 }

 @keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes letterShine {
  0%, 85%, 100% {
    filter:brightness(1);
  }
  90% {
    color: #fff;
  }
}

@keyframes bgLeft {
  from {
    background-position-x: 960px;
  }
  to {
    background-position-x:-1060px;
  }
}

@keyframes blinkieLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-225%);
  }
}

/*Recipes Page*/

#recipe-banner {
  overflow:hidden;
  position:relative;
  height:180px;
  background-image: linear-gradient(135deg, #ba89f5 25%, #c29bf5 25%, #c29bf5 50%, #ba89f5 50%, #ba89f5 75%, #c29bf5 75%, #c29bf5 100%);
  background-size:77.78px 77.78px;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  box-shadow:inset 0 0 30px #9b38ff;
  border-bottom: 4px solid #2e0e08;
  animation: bgLeft 30s linear infinite
}

.rb-subtitle{
  position:relative;
  left:43px;
  top:135px;
  color:#bd83ff;
  text-shadow:1px 1px 2px #360477;
  -webkit-text-stroke: 0.3px #956ace;
  font-family: "Dela Gothic", sans-serif;
  letter-spacing:24px;
  font-style:italic;
  font-size: larger;
  font-weight:bold;
}
.rb-pic {
  width:300px;
  margin-left:680px;
  margin-top:-85px;
  transform-origin: center;
 }
 .rb-pic:hover {
  animation: shake 5s linear infinite;
  animation-timing-function: ease;
 }
.recipe-cont {
  position: relative;
  height:80px;
  background:linear-gradient(0deg,rgba(255, 216, 148, 1) 0%, rgb(238, 199, 92) 48%, rgb(243, 210, 118) 51%, rgba(255, 239, 191, 1) 100%);
  border-bottom: 3px solid #310825;
  box-shadow:0 5px 10px #4b300e;
  font-family: "Hachi Maru", sans-serif;
  text-align:center;
  font-weight:bolder;
  padding-left:50px;
  padding-right:50px;
  color:#180101;
  text-shadow:1px 1px 3px #2e0707;
}

.recipe-bg {
  position:relative;
  display:block;
  height:560px;
  background: linear-gradient(0deg,rgba(212, 137, 250, 1) 0%, rgba(235, 201, 255, 1) 100%);
  box-shadow:inset 0 0 22px #4e2188;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
}

#recipebook {
  position:absolute;
  margin: 0 auto;
  width: 820px;
  height:480px;
  display:flex;
  left:70px;
  top:20px;
  transition: transform 0.6s ease;
}

#recipebook:hover {
  transform: scale(1.01)
}

.page {
  width:100%;
  height:100%;
  position:absolute;
  display:none;
}

.page.active {
  display:flex;
}
.page-ing{
  width:404px;
  box-shadow:inset 2px 0 6px #360505;
  background-image: linear-gradient(135deg, #f7e9ac 27.27%, #f2e099 27.27%, #f2e099 50%, #f7e9ac 50%, #f7e9ac 77.27%, #f2e099 77.27%, #f2e099 100%);
  background-size: 77.78px 77.78px;
  border-top-left-radius:25px;
  border-bottom-left-radius:25px;
  border-top:4px solid #360505;
  border-left:4px solid #360505;
  border-bottom:4px solid #360505;
  border-right:2px dashed #360505;
}

.page-met{
  width:410px;
  box-shadow:inset -2px 0 5px #360505;
  background-image: linear-gradient(135deg, #f7e9ac 27.27%, #f2e099 27.27%, #f2e099 50%, #f7e9ac 50%, #f7e9ac 77.27%, #f2e099 77.27%, #f2e099 100%);
  background-size: 77.78px 77.78px;
  background-position-y:60px;
  border-top-right-radius:25px;
  border-bottom-right-radius:25px;
  border-top:4px solid #360505;
  border-right:4px solid #360505;
  border-bottom:4px solid #360505;
  border-left:2px dashed #360505;
  overflow-y:scroll;
  overflow-x:hidden;
}

.page-head{
  position:relative;
  display:flex;
  padding:15px;
  width:380px;
  height:80px;
}

.page-title{
  font-family: "Hachi Maru", sans-serif;
  font-size:33px;
  font-weight:bold;
  color: #180101;
  padding-left:14px;
  text-shadow:0 0 3px #1a0207;
}

.page-subtitle {
  position:absolute;
  top:75px;
  left:36px;
  font-family: "Yusei Magic", sans-serif;
  font-size:15px;
  font-weight:bold;
  color: #180101;
}
.meas{
  position:absolute;
  width:60px;
  margin-left:300px;
  margin-top:57px;
  transition: transform 0.6s ease;
}
.meas-m{
  font-family: "Yusei Magic", sans-serif;
  font-weight:bolder;
  font-size:12px;
  text-align:center;
  color: #180101;
  height:25px;
  width:25px;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  border-top: 2px solid #360505;
  border-left:2px solid #360505;
  border-bottom: 2px solid #360505;
  border-right:1px dashed #360505;
  background: linear-gradient(0deg,rgba(250, 180, 188, 1) 0%, rgba(255, 148, 160, 1) 48%, rgba(255, 171, 181, 1) 52%, rgba(255, 209, 214, 1) 100%);
}

.meas-us{
  margin-left:-6px;
  font-family: "Yusei Magic", sans-serif;
  font-weight:bolder;
  font-size:12px;
  text-align:center;
  color: #180101;
  height:25px;
  width:25px;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  border-top: 2px solid #360505;
  border-right:2px solid #360505;
  border-bottom: 2px solid #360505;
  border-left:1px dashed #360505;
  background: linear-gradient(0deg,rgba(250, 180, 188, 1) 0%, rgba(255, 148, 160, 1) 48%, rgba(255, 171, 181, 1) 52%, rgba(255, 209, 214, 1) 100%);
}

.meas-us:hover, .meas-m:hover{
  cursor: url(icons/cursor2.png), auto;;
}

.meas:hover{
  transform: scale(1.05)
}

.page-content{
  position:relative;
  font-family: "Yusei Magic", sans-serif;
  padding-right:15px;
  line-height:28px;
}

.content-metric{
  position:absolute;
  line-height:35px;
  visibility:visible;
}

.content-us{
  position:absolute;
  line-height:35px;
  display:none;
}


#page-controls {
  position:absolute;
  height:40px;
  width:200px;
  margin-left:375px;
  background: linear-gradient(0deg,rgba(250, 180, 188, 1) 0%, rgba(255, 148, 160, 1) 48%, rgba(255, 171, 181, 1) 52%, rgba(255, 209, 214, 1) 100%);
  margin-top:506px;
  border: 3px solid #3b0404;
  border-radius:12px;
  box-shadow:inset 0 0 5px #801660;
  display:flex;
}
  

#prev {
  font-family: "Yusei Magic", sans-serif;
  color:#1a0207;
  height:100%;
  width:50px;
  border:0;
  background-color:transparent;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
  font-weight:bolder;
  font-size:20px;
  position:relative;
  transition: font-size 0.8s ease-out,  margin-top 0.8s ease-out;
}

#prev:hover {
  font-size:30px;
  margin-top:-5px;
}

#next {
  font-family: "Yusei Magic", sans-serif;
  color:#1a0207;
  height:100%;
  width:50px;
  border:0;
  background-color:transparent;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  font-weight:bolder;
  font-size:20px;
  position:relative;
  transition: font-size 0.8s ease-out,  margin-top 0.8s ease-out;
}

#next:hover {
  font-size:30px;
  margin-top:-5px;
}

#page-number {
  width:100px;
  height:100%;
  font-family: "Yusei Magic", sans-serif;
  text-align:center;
  color:#1a0207;
  font-weight:bold;
  font-size:25px;
}

#prev:hover, #next:hover {
  cursor: url(icons/cursor2.png), auto;
}