*{
  box-sizing: border-box;
}
body{
  margin: 0 3em 0 3em;
  font-family: IRANSans;
  font-weight: 300;
}
.body{
  font-family: Roboto,sans-serif;
  background: #f0f2f7;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rgb-border{
  background: #020024;
  background: linear-gradient(155deg,#020024 0%, red 0%, #ffab00 12%,#e0ff00 24%,#00ff08 36%,#00e4ff 48%,#0005ff 60%,#fe00e7 72%, red 84%,#ffa200 96%);
  width: 11em;
  height: 4em;
  margin: 1em;
  position: relative;
  animation: gradient 55s linear infinite;
}
.rgb-border::before{
  content: '';
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  background: inherit;
  position: absolute;
  filter: blur(4px);
}
.rgb-border .btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #000000;
  background-image: linear-gradient(147deg, #000000, #1f1f1f 74%);
  width: 9.8em;
  height: 3.3em;
  text-align: center;
  text-decoration: none;
  padding: 1.1em;
  color: #fff;
  font-size: 1.1em;
  letter-spacing: 1px;
}
@keyframes gradient{
  0% {
    background-position: 0 0;
  }
  50%{
    background-position: 18.75em 31.25em;
  }
  100%{
    background-position: 0.1em 0.1em;
  }
}
p{
  font-size: 1.5vw;
}
.mobile-container {
  width: 60vw;
  margin: auto;
  background-color: #555;
  height: 3vh;
  color: white;
  border-radius: 1rem;
  position: fixed;
  right: 3%;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #04AA6D;
  color: white;
}
.active {
  background-color: #04AA6D;
  color: white;
}
body{
  margin: 0 3em 0 3em;;
  font-family: Arial, Helvetica, sans-serif;
  background: #f0f2f7;
}
.p0{
  font-size: 1.5rem;
}
.p02{
  font-size: 5rem;
}
.p03{
  background-color: #ebdada;
  font-size: 1.5rem;
  color: #007bff;
}
.p04{
  font-size: 1.5rem;
}
.p05{
  background-color: #84e5a9;
  font-size: 1rem;
  width: 65%;
  color: #6b6fb0;
}
.p06{
  font-size: 2rem;
  width: 65%;
  color: #6b6fb0;
}
.comment-container {
  width: 100%;
  margin: 0 auto;
  border: 2px solid #007bff;
  border-radius: 10px;
  padding: 20px;
  background-color: #f8f9fa;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
input[type="text"], textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}
.buttonf {
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  color: #333;
}
li:last-child {
  border-bottom: none;
}

.Dirty-p{

    position: relative;
    bottom: 50px;
}
.photo{
  position: relative;
  width: 20rem;
  left: 0rem;
  top: 0.6rem;
}
.Go-to-site,.Go-to-site2,.Go-to-site3,.Go-to-site4,.Go-to-site5,.Go-to-site6{
  color: white;
  background-color: rgb(140, 213, 247);
  height: 5%;
  width: 15%;
  border: none;
  font-size: 2vw;
  border-radius: 4%;
  position: relative;
}
.Go-to-site{
  left: 15%;
  top: -2vh;
}
.Go-to-site2{
  left: 2.1rem;
  top: 2rem;
}
.Go-to-site3{
  left: 1rem;
  top: 4.8rem;
}
.Go-to-site4{
  left: -9%;
  top: 20%;
  width: 10%;
}
.Go-to-site5{
  left: -55%;
  top: -2rem;
  width: 20%;
}
.Go-to-site6{
  left: 0%;
  top: -20%;
  width: 20%;
}
.Go-to-channel,.Go-to-channel2,.Go-to-channel3{
  color: white;
  background-color: rgb(140, 213, 247);
  height: 50%;
  width: 17vw;
  border: none;
  font-size: 1.9vw;
  border-radius: 5%;
  position: relative;
}
.Go-to-channel{
  left: -22%;
  top: 0.2rem;
  width: 60vw;
  font-size: 2rem;
}
.Go-to-channel2{
  left: -10%;
  top: -3rem;
  width: 60vw;
  font-size: 2rem;
}
.Go-to-channel3{

  left: -44%;
  top: -0.5rem;
  width: 25%;
}
.Go-to-karzar,.Go-to-karzar2,.Go-to-karzar3{
  height: 6vw;
  border: none;
  font-size: 2vw;
  color: white;
  position: relative;
  background-color: rgb(8, 237, 8);
}
.Go-to-karzar4,.Go-to-karzar5{
  height: 10%;
  border: none;
  font-size: 2vw;
  color: white;
  position: fixed;
  background-color: rgb(8, 237, 8);
}
.Go-to-karzar{
  width: 26vw;
  left: -15%;
  top: 0vh;
}
.Go-to-karzar2{
  width: 15vw;
  left: 20%;
  top: -9vh;
}
.Go-to-karzar3{
  font-size: 2rem;
  width: 18rem;
  left: 0.5rem;
  height: 8vh;
}
.Go-to-karzar4{
  width: 16%;
  left: 33%;
  top: 35%;
  position: fixed;
}
.Go-to-karzar5{
  width: 23%;
  left: 55%;
  top: 36%;
  position: fixed;
}
.Go-to-karzar6{
  height: 10%;
  border: none;
  top: 0.1rem;
  font-size: 3rem;
  color: white;
  position: relative;
  background-color: rgb(8, 237, 8);
}
.Next-page{
  position: relative;
  left: -100px;
  top:50px;
}
.Down,.Dirty-i{
  width: 100%;
  height: auto;
}
.ping{
  width: 40%;
  max-width: 50%;
}
.poutput{
  font-size: 3rem;
  color: gray;
  margin-top: 12rem;
  position: relative;
}
.start{
  left: 50%;
}
.start,.container,.container2,.container3,.container4,.container5,.container6,.container7,.container8,.container9,.container10,.container11,.container12,.container13,.container14{
  max-width: 60%;
  width: 30%;
  min-width: 250px;
  position: relative;
}
.app,.L1,.L2,.L3,.L4{
  position: relative;
  left: 0em;
  font-size: 1.75rem;
}
.app{
  top: 2rem;
}
.L1{
  top: 4rem;
}
.L2{
  top: 7rem;
}
.L3{
  top: 2rem;
}
.L4{
  top: 12rem;
}
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
 .container{
    left:4rem;
     top: 7rem;
     transform: translate(-50%,-50%);
  }
  .container2{
    top:17rem;
    left:4rem;
    transform: translate(-50%,-50%);
  }
  .container3{
    top:4.5rem;
    left:4rem;
    transform: translate(-50%,-50%);
  }
  .container4{
    top:2.4rem;
    left:4rem;
    transform: translate(-50%,-50%);
  }
  .container5{
    top:2.5rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
  .container6{
    top:4rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
  .container7{
    top:2.2rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
  .container8{
    top:5rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
  .container9{
    top:2.9rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
  .container10{
    top:2rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
  .container11{
    top:3rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
  .container12{
    top:3rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
  .container13{
    top:1rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
  .container14{
    top:16rem;
    left:8rem;
    transform: translate(-50%,-50%);
  }
.label{
  padding: 10px;
  font-size: 18px;
  color: #111;
}
.copy-text,.copy-text2,.copy-text3,.copy-text4,.copy-text5,.copy-text6,.copy-text7{
  position: relative;
  padding:1vh;
  background: #fff;
  border:0vh solid #ddd;
  border-radius: 3%;
  display: flex;
}
.copy-text input.text,.copy-text2 input.text,.copy-text3 input.text,.copy-text4 input.text,.copy-text5 input.text,.copy-text6 input.text,.copy-text7 input.text{
  padding: 1vh;
  font-size: 3vh;
  color: #555;
  border: none;
  outline: none;
}
.copy-text button,.copy-text2 button,.copy-text3 button,.copy-text4 button,.copy-text5 button,.copy-text6 button,.copy-text7 button{
  padding: 10px;
  background: #5784f5;
  color: #fff;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}
.copy-text button :active,.copy-text2 button :active,.copy-text3 button :active,.copy-text4 button :active,.copy-text5 button :active,.copy-text6 button :active,.copy-text7 button :active{
  background: #809ce2;
}
.copy-text button:before,.copy-text2 button:before,.copy-text3 button:before,.copy-text4 button:before,.copy-text5 button:before,.copy-text6 button:before,.copy-text7 button:before{
  content: "Copied";
  position: absolute;
  top: -45%;
  right: 0px;
  background: #5c81dc;
  padding: 8px 10px;
  border-radius: 5%;
  font-size: 2.5rem;
  display: none;
}
.copy-text button:after,.copy-text2 button:after,.copy-text3 button:after,.copy-text4 button:after,.copy-text5 button:after,.copy-text6 button:after,.copy-text7 button:after{
  content: "";
  position: absolute;
  top:-20px;
  right: 25px;
  width: 10px;
  height: 10px;
  background: #5c81dc;
  transform: rotate(45deg);
  display: none;
}
.copy-text.active button:before,.copy-text2.active button:before,.copy-text3.active button:before,.copy-text4.active button:before,.copy-text5.active button:before,.copy-text6.active button:before,.copy-text7.active button:before,
.copy-text.active button:after,.copy-text2.active button:after,.copy-text3.active button:after,.copy-text4.active button:after,.copy-text5.active button:after,.copy-text6.active button:after,.copy-text7.active button:after{
  display: block;
}