@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;900&display=swap");

:root {
  --white: #fff;
  --black: #000;
  --maincolor: rgb(26, 255, 171);
}

body {
     font-family: Montserrat, sans-serif;
     font-size: 14px;
     height: 100vh;
     margin: 0px;
     overflow: hidden;
     position: absolute;
     top: 24vh;
     right: 1vh;
     user-select: none;
}

.custom::-webkit-scrollbar {
    display: none;
  }

.erroricon {
    text-align: center;
    margin-top: 7vh;
}

.erroricon i {
    font-size: 8vh;
    color: var(--maincolor);
}
 .phone-frame {
     background-color:var(--black);
     border-radius: 51px;
     box-shadow: rgba(0, 0, 0, 0.03) 0px 0.4px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2.3px, rgba(0, 0, 0, 0.07) 0px 1.9px 4.4px, rgba(0, 0, 0, 0.09) 0px 3.4px 7.8px, rgba(0, 0, 0, 0.14) 0px 6.3px 14.6px, rgba(0, 0, 0, 0.25) 0px 15px 35px;
     width: 34.6vh;
     height: 68vh;
     padding: 0.4vh;
}
 .phone-screen {
     align-items: center;
     background-color: var(--black);
     border-radius: 5vh;
     display: flex;
     flex-direction: column;
     height: 68vh;
     overflow: hidden;
     perspective: 460px;
     position: relative;
     width: 34.6vh;
}
 .imageContainer {
     overflow: hidden;
     transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
     width: 37vh;
}
 .active .imageContainer {
     transform: rotateX(-45deg);
}
 .image {
     left: -2.1vh;
     position: relative;
     width: 41vh;
}
 .overlay {
     background: linear-gradient(rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.624) 80%, rgba(0, 0, 0, 0.75) 100%);
     height: 100%;
     opacity: 0;
     position: absolute;
     transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
     top: 0px;
     width: 100%;
}
 .active .overlay {
     opacity: 1;
}
 .button-menu {
     border-radius: 50%;
     position: absolute;
     transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
 .button-menu1 {
     bottom: 3vh;
     cursor: pointer;
     fill: none;
     height: 1vh;
     border-radius: 1vh;
     text-align: center;
     background: var(--white);
     -webkit-tap-highlight-color: transparent;
     width: 11vh;
}
 .button-menu1 i {
     color: var(--white);
     letter-spacing: 0px;
     margin-top: 0.7vh;
     font-size: 2vh;
}
 .bg {
     fill: rgb(40, 40, 40);
}
 .button-menu1:active .bg {
     fill: rgb(85, 85, 85);
}
 .line {
     stroke: var(--white);
     stroke-width: 2;
     transition: stroke 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
     transform-origin: 50% center;
}
 .active .line1 {
     stroke: var(--maincolor);
     transform: translateX(-2.5px) translateY(3px) rotate(45deg);
}
 .active .line2 {
     stroke: var(--maincolor);
     transform: scale(0);
}
 .active .line3 {
     stroke:var(--maincolor);
     transform: translateX(-2.5px) translateY(-3px) rotate(-45deg);
}
 .active .button-menu {
     transform: translateY(-27vh);
}
 .menu {
     background-blend-mode: screen;
     bottom: 0px;
     display: flex;
     flex-wrap: wrap;
     height: 27vh;
     position: absolute;
     transform: translateY(192vh);
     transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
     width: 37vh;
}
 .option {
     align-items: center;
     border-top: 0.1vh solid var(--maincolor);
     box-sizing: border-box;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
     -webkit-tap-highlight-color: transparent;
     width: 12.2vh;
     text-align: center;
     background: #080808;
}
.option:hover {
  background: var(--black);
  transition: all .6s ease;
}
 .option i {
     color: var(--maincolor);
     font-size: 2vh;
}
 .food {
     height: 40px;
     width: 40px;
}
 .active .menu {
     transform: translateY(0px);
}
 .japanese {
     font-weight: 600;
     font-family: sans-serif;
}
 .text {
     font-size: 1.1vh;
     color: var(--white);
     margin-top: 1.5vh;
}
 .custom {
     margin-top: 10vh;
     overflow-y: scroll;
     max-height: 35vh;
}
 div.custom p {
     color: var(--white);
     text-align: center;
     text-transform: uppercase;
}
 #progress {
     color: var(--maincolor);
     font-size: 5vh;
}
 .notify {
    text-align: center;
    color: var(--maincolor);
    font-size: 1.2vh;
    font-family: Inconsolata, monospace;
    text-shadow: rgba(0, 0, 0, 0.36) 0px 0px 1vh;
    animation: 10s steps(50) 0s 1 normal none running type, 0.8s ease 0s infinite normal none running caret-blink;
    border-right: 1vh solid var(--maincolor);
    overflow: hidden;
    margin: 0px;
    white-space: nowrap;
}
 .list-item {
     text-align: center;
     color: var(--white);
     font-size: 1.3vh;
     font-family: Inconsolata, monospace;
     text-shadow: rgb(200, 200, 200) 0px 0px 1vh;
}
 .list-item ul {
     list-style-type: none;
     text-align: left;
     font-size: 2.3vh;
}
 .uyuyorumterminal {
     font-size: 1vh;
     text-align: center;
     color: var(--white);
     border-right: 1vh solid var(--maincolor);
     animation: 20s steps(50) 0s 1 normal none running type, 0.8s ease 0s infinite normal none running caret-blink;
}
 @keyframes type {
     0% {
         width: 0px;
    }
     20% {
         width: 100%;
    }
}
 @keyframes caret-blink {
     0% {
         border-color: transparent;
    }
     100% {
         border-color: var(--maincolor);
    }
}
 

.item {
    background: var(--maincolor);
    color: var(--black);
    padding: 1px;
    border-radius: 1.5vh;
    margin: 3vh;
}

button {
    padding: 1vh;
    margin: 1vh;
    background: var(--black);
    color: var(--white);
    font-weight: 600;
}