*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  color:#FFD700;
  background:#000;
}

body{
  cursor:pointer;
  position:relative;
  font-family: Vazirmatn, sans-serif;
}

.background-pic{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  background:#000 url('/images/pic02.webp') center/cover no-repeat;
}

.code-container{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.5);
  padding:20px;
  border-radius:12px;
  width:90%;
  max-width:900px;
  height:70%;
  overflow:hidden;
  z-index:5;
}

pre{
  margin:0;
  font-size:22px;
  line-height:1.6;
  white-space:pre-wrap;
  direction:rtl;
  height:100%;
  overflow-y:auto;
  text-align:justify;
  text-align-last:right;
  font-family: Vazirmatn, sans-serif;
}

pre::-webkit-scrollbar{
  display:none;
}

#startMessage{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:28px;
  text-align:center;
  color:#FFD700;
  z-index:10;
}

.note{
  position:absolute;
  font-weight:bold;
  white-space:nowrap;
  pointer-events:none;
  z-index:20;
  animation:rise 5s linear forwards,colorShift 3s linear infinite;
}

@keyframes rise{
  0%{transform:translateY(0);opacity:0;}
  20%{opacity:1;}
  100%{transform:translateY(-300px);opacity:0;}
}

@keyframes colorShift{
  0%{color:#FF0000;}
  14%{color:#FF7F00;}
  28%{color:#FFFF00;}
  42%{color:#00FF00;}
  57%{color:#0000FF;}
  71%{color:#4B0082;}
  85%{color:#8F00FF;}
  100%{color:#FF0000;}
}

#menuContainer{
  position:relative;
  z-index:15;
}

@media(max-width:768px){
    .code-container{
        width:85vw;
        max-width:340px;
        height:65vh;
        padding:16px;
        touch-action:none;
        user-select:none;
    }

    pre{
        font-size:17px;
        user-select:text;
        -webkit-overflow-scrolling:touch;
    }

    #startMessage{
        font-size:clamp(20px,4vw,28px);
        padding:0 10px;
    }
}