code {
    color: #ffffff !important;
}

.codelike {
    background: #000000;
}

span.ifelse {
    color: #ffffff;
}

span.rbraket {
    color: #f3b713;
}

span.cbraket {
    color: #4f90fd;
}

span.return {
    color: #e4e4e4;
    margin-left: 40px;
}

span.or,
p.or {
    color: #f7eb00;
}

pre code,
code {
    font-size: 24px;
}

.btn-close {
    background-color: #fff;
}

.scrollwrap {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.leftscroll {
    width: 69px;
    height: 241px;
    background-image: url(assets/webp/scrollleft.png);
    background-repeat: no-repeat;
    background-position: 1px 0px;
    background-size: contain;
}

.midscroll {
    width: 0px;
    height: 270px;
    background-image: url(assets/webp/golden.png);
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 1000px 270px;
    padding: 0px;
}

.rightscroll {
    width: 62px;
    height: 269px;
    background-image: url(assets/webp/golden.png);
    background-repeat: no-repeat;
    background-size: 1000px 269px;
    background-position: right;
}

.scrolltext {
    font-size: 24px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    display: inline-block;
    color: #D5AD6D;
    background: -webkit-linear-gradient(transparent, transparent), -webkit-linear-gradient(top, rgba(213, 173, 109, 1) 0%, rgba(213, 173, 109, 1) 26%, rgba(226, 186, 120, 1) 35%, rgba(163, 126, 67, 1) 45%, rgba(145, 112, 59, 1) 61%, rgba(213, 173, 109, 1) 100%);
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.scrolltext1 {
    position: relative;
    padding: 0 39px;
}

.scrolltext2 {
    position: relative;
    padding: 0 76px;
}

.scrolltext3 {
    position: relative;
    padding: 0 14px;
}

.scrolltext4 {
    position: relative;
    padding: 0 33px;
}
.leftbraket{margin-left: -16px;}

@media (max-width: 768px) {
    .midscroll {
        padding: 14.5% 0px;
    }

    .leftscroll,
    .rightscroll {
        display: none;
    }
}
 .codee {
     display: block;
     margin: 0px auto 0 auto;
     width: 836px;
     font-weight: 500;
     font-family: 'Open Sans', sans-serif;
 }

 .wrrapdiv {
     position: relative;
     margin: 10px;
 }

 .scrollit {
     position: relative;
     padding-left: 16px;
     margin-top: -10px;
     height: 0px;
     overflow: hidden;
 }

 .lastbraket {
     margin-top: -15px;
 }

 .scrollit>p {
     font-weight: 500;
 }

 p.or {
     color: #f7eb00;
     opacity: 0.9;
 }

 .showthen, .showtitle1, .showtitle2, .showtitle3, .showtitle4, .showtitle5, .showtitle6, .showtitle7 {
     opacity: 0;
 }

 .animationstart .showtitle1 {
    animation: showw 0.2s 1.5s forwards;
    -webkit-animation: showw 0.2s 1.5s forwards;
}
.animationstart .showtitle2 {
    animation: showw 0.2s 2s forwards;
    -webkit-animation: showw 0.2s 2s forwards;
}
.animationstart .showtitle3 {
    animation: showw 0.2s 2.5s forwards;
    -webkit-animation: showw 0.2s 2.5s forwards;
}
.animationstart .showtitle4 {
    animation: showw 0.2s 3s forwards;
    -webkit-animation: showw 0.2s 3s forwards;
}
.animationstart .showtitle5 {
    animation: showw 0.2s 3.5s forwards;
    -webkit-animation: showw 0.2s 3.5s forwards;
}
.animationstart .showtitle6 {
    animation: showw 0.2s 4s forwards;
    -webkit-animation: showw 0.2s 4s forwards;
}
.animationstart .showtitle7 {
    animation: showw 0.2s 4.2s forwards;
    -webkit-animation: showw 0.2s 4.2s forwards;
}

 .animationstart .showthen {
     animation: showw 0.5s 6.2s forwards;
     -webkit-animation: showw 0.5s 6.2s forwards;
}

 .animationstart .scrollwrap {
     animation: showw 1s 6s forwards;
     -webkit-animation: showw 1s 6s forwards;
}

 .animationstart .scrollit {
     transition: height 1s 5s ease-in-out;
     height: 180px;
     -webkit-transition: height 1s 5s ease-in-out;
     -moz-transition: height 1s 5s ease-in-out;
     -ms-transition: height 1s 5s ease-in-out;
     -o-transition: height 1s 5s ease-in-out;
}

 .animationstart .midscroll {
     transition: width 1s 6.5s ease-in-out;
     width: 936px;
     -webkit-transition: width 1s 6.5s ease-in-out;
     -moz-transition: width 1s 6.5s ease-in-out;
     -ms-transition: width 1s 6.5s ease-in-out;
     -o-transition: width 1s 6.5s ease-in-out;
}

 @keyframes showw {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes pulseandcolor {
     from {
         opacity: 1;
         color: #f7eb00;
     }

     10% {
         opacity: 1;
         color: #ffffff;
     }

     90% {
         opacity: 1;
         color: #ffffff;
     }

     to {
         opacity: 0.9;
         color: #f7eb00;
     }
 }

 @keyframes gotop {
     from {
         top: 30px;
     }

     to {
         top: 0px;
     }
 }

 @keyframes blure {
     from {
         opacity: 0.1;
     }

     90%,
     to {
         opacity: 1;
     }
 }

 @keyframes divwidth {
     from {
         width: 0px;
     }

     to {
         width: 100%;
     }
 }

 .nedeco {
     list-style: none;
 }

 .nedeco>li::before {
     content: '✔';
     margin-left: -18px;
     position: absolute;
 }

 @media (max-width: 1199.98px) {
     .customwidth {
         max-width: 96vw;
     }

     .midscroll {
         background-size: calc(100% + 49px) 270px;
     }
 }

 @media (max-width: 768px) {
     .codelike {
         height: 92vh;
     }

     .codee {
         width: 100%;
     }

     pre code,
     code {
         font-size: calc(0.715rem + 0.7vw);
     }

     .scrollit {
         margin-left: 0px;
         padding-left: 10px;
     }

     .scrollit>p {
         text-indent: -9px;
         font-weight: 600;
     }

     span.return {
         color: #e4e4e4;
         margin-left: 10px;
         display: block;
         font-weight: 700;
         text-align: center;
     }

     .scrollwrapmob {
         opacity: 0;
     }

     .midscroll {
         display: none;
     }

     .midscrollmob {
         width: 96%;
         background-image: url(assets/webp/splashmobile.png);
         background-repeat: no-repeat;
         background-position: 0 0;
         background-size: 100%;
         margin: 0 auto;
         padding-bottom: 35px;
     }

     .midscrollmobbottom {
         width: 96%;
         height: 36px;
         background-image: url(assets/webp/splashmobile.png);
         background-repeat: no-repeat;
         background-position: 0 calc(75% - 62px);
         background-size: 100%;
         padding: 0px;
         margin: 0 auto;
         margin-top: 0px;
     }

     .animationstart .scrollwrapmob {
         animation: showw 1s 4s forwards;
     }

     .animationstart .midscrollmob {
         transition: padding 1s 4.5s ease-in-out;
         padding-bottom: calc(75% - 40px);
     }
 }

 .height {
     height: auto !important;
 }

 .opecity {
     opacity: 1 !important;
 }

 .fillwidth {
     width: 1000px !important;
 }

 .padding {
     padding-bottom: 325px !important;
 }