@charset "UTF-8";
/* CSS Document */

.sc{
    width: 3.5em;
    position: relative;
    height: 12em;
    margin-top: 2.5em;
}

.sc p{
margin-left: -0.4em;
 font-family: "MonteCarlo", cursive;
  font-weight: 400;
  font-style: normal;
    font-size: 1.5em;
      background: linear-gradient(90deg, #f7e2b9, #8c7b48 50%,#847336 60%, #f2dba3);
  background: -webkit-linear-gradient(90deg, #f7e2b9, #8c7b48 50%,#847336 60%, #f2dba3);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scroll {
    position  : absolute;
    font-size : 13px;
    writing-mode : vertical-rl;
    top : 20%;
    left : 50%;
    transform: translateX(-50%) translateY(-50%);
}
.scroll::after {
    content : '';
    display : inline-block;
    position : absolute;
   background: linear-gradient(90deg, #f2dba3 50%, #8c7b48);
  background: -webkit-linear-gradient(90deg, #f2dba3 50%, #8c7b48);
    right : 50%;
    top : 0;
    transform : translateX(-50%);
    width : 1px;
    height : 7.5em;
    animation: scroll 1.5s infinite;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}