:root{
  --text-color: #3B3B3B ;
  --body-bg-color: #FAFAFA;
  --btn-hover-bg-color: #0E77FF;
  --result-bg-color:#CBCBCB;
  --textarea-bg: #E8E8E8;
  --textarea-text: #494949;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box
  }
body{
  font-family: Arial, Helvetica, sans-serif;
  width: 100dvw;
  height: 100dvh;
  user-select: none;
  background: var(--body-bg-color);
  color: var(--text-color)
}
.head{
  text-align: center;
  font-size: 2rem;
  color: #FF0000E8;
  background: #FBD039DE;
}
.btn{
  padding: 10px;
  color: var(--btn-hover-bg-color);
  border-radius: 10px;
  font-size: 1.3rem;
  border: 3px double #0EFBFF;
  transition: 0.4s 0.9ms ease-in;
  background-color: var(--body-bg-color)
}
.btn:hover{
  background: var(--btn-hover-bg-color);
    transition: 0.4s 0.9ms ease-in;
    color: var(--body-bg-color)
}
.container{
  display: flex;
  flex-direction: column;
}
label{
  font-size: 25px;
  color: #30D9FFE8;
}
.result{
  width: 100%;
  height: 30%;
  background: var(--result-bg-color);
  margin-top: 20px;
  border-radius: 10px;
  user-select: none;
  font-size: 1rem;
  text-align: center;
  position: relative;
}
textarea{
  border: 2px solid #000000;
  font-size: 20px;
  width: 97%;
  height: 100px;
  font-family: Arial, Helvetica, sans-serif;
  outline: none;
  margin-top: 10px;
  border-radius: 5px;
  margin-left: 1.5%;
  padding: 5px;
  background: var(--textarea-bg);
  color: var(--textarea-text);
}
textarea:focus{
  border-color: #0382FF;
  box-shadow: 0 0 0.5rem #0382FF;
}
.copy{
  float: right;
  padding: 10px;
  background: #00000000;
width: 35px;
border: none;
height: 35px;
 stroke: none
}
.copy:hover{
 transition: 0.4s 0.1s linear;
 fill: #0083FF;
}
.clear{
  font-size: 2rem;
  background: transparent;
  border: none;
  position: absolute;
  right: 3%;
  top: 65%;
  color: #08A2FF;
}
.clear:hover{
  color: #FF0000;
}
.select{
  display: grid;
  justify-content: center;
  grid-template-rows: repeat(4,1fr)
}
.top{
  position: relative;
}
.result-text{
  word-spacing: 3px;
  overflow-y: auto;
  width: 90%;
  margin:  auto;
  aspect-ratio: 16/6
}
.footer{
  position: relative;
  bottom: 0;
  text-align: center;
  background: #A1A1A1;
  width: 100%;
  height: auto;
  color: #0093FCF0;
}
.social{
  width: 100%;
}
.pic{
  width: 50px;
  margin-left: 20px;
}
#copyright {
  background: #E2BEBE;
 margin-top: 15px;
 font-size: 1rem
}
.follow{
  color: #FFED00;
  padding: 5px;
  font-size: 1.1rem
}
header{
  background: linear-gradient(50deg,#00A5FF,#0065FF,#FFB700,#F5FF00);
  width: 100%;
 color: #00FFF4;
}
.logo{
  margin-left: 10px;
  font-size: 2.4rem;
  -webkit-text-stroke: 2px #FFFC00;
  color: #01B9FF;
  font-family: "Sevillana",cursive
}
.sign-in{
 background: #FFBE27;
  color: var(--text-color);
  border: 2px solid #0FF2FF;
 padding: 5px;
  border-radius: 9px;
  transition: 0.4s 0.1s ease-out;
  font-size: 1rem;
}
.sign-in:hover{
  background: #0F86FF;
}
.Header{
  width: 100%;
  display: flex;
  justify-content: space-between
}
.more{
  text-decoration: none;
  font-size: 30px;
  color: black;
  margin-top: 5px;
  display: inline-block;
}
   .div-switch{
  height: 60px;
  width: 40%;
  background: var(--body-bg-color);
  display: none;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 6px;
  transition: all 0.4s linear;
  animation: fade-in 0.4s linear;
  color: var(--text-color);
   }
.cross{
    color: var(--text-color); 
    padding: 10px;
    font-size: 1.8rem;
    position: relative;
    top: -20px;
    left: 80%;
}
.div-switch #toggle-switch{
  display: none
}
.div-switch .switch{
  width: 55%;
  height: 15px;
  background: #CACACA;
 border-radius: 20px;
  transition: all 0.4s linear;
}
.div-switch .switch::after{
  content: "";
  width: 15%;
  height: 36%;
  background: #FFFFFF;
  position: absolute;
  border-radius: 50%;
 transition: 0.4s all linear;
 transform: translateY(-4px);
 border: 1px solid;
}
 #toggle-switch:checked + .switch{
  background: #82C9FF
}
#toggle-switch:checked + .switch::after{
  background: #2DB0FF;
  transform: translate(140%,-4px)
}
.div-switch .dark{
  font-size: 0.9rem;
  width: 50%;
  display: inline-block;
}
.more-content{
  display: flex;
  transition: all 0.4s linear;
  align-items: center;
  justify-content: center;
}
@keyframes fade-in{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
.done{
  background: var(--text-color);
  position: absolute;
  top: -17%;
 right: 0;
 border-radius: 4px;
 color: var(--body-bg-color);
 visibility: hidden;
 transition: 0.4s 0.1s linear;
 width: 20%;
 animation: fade-in 0.4s 0.1s linear
}
.show:hover ~ .done{
 visibility: visible;
 transition: 0.4s 0.1s linear;
  }
.radio{
      width: 25px;
      height: 25px;
      display: inline-block;
      position: relative;
      border-radius: 50%;
      border: 1px solid #BBBBBB;
    transition: all 0.4s linear;
    margin-top: 5px
    }
    .radio::after{
      content: "";
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      top: 6px;
      right: 6px;
      background: #DDDDDD;
      transition: all 0.4s linear
    }
    .Radio:checked + .radio::after{
      background: #fff
    }
    .Radio{
      display: none
    }
    .Radio:checked + .radio{
      background: #077AFF;
      border: 1px solid #077AFF
    }
.Radio:checked ~ .radio{
  box-shadow: 3px 3px 2px #79D0FF,3px -3px 2px #79D0FF,-3px -3px 2px #79D0FF, -3px 3px 2px #79D0FF;
}
.home, .pic{
  margin-top: 15px
}
.dark-mode{
    --text-color: #FAFAFA;
  --body-bg-color: #303030;
  --btn-hover-bg-color: #0E77FF;
  --result-bg-color: #8F8686;
  --textarea-bg: #5F5F5F;
  --textarea-text: #DCDCDC
}
.dark-mode textarea{
  box-shadow: 0 0 0.7rem #FFFFFF;
}
.dark-mode textarea::placeholder{
  color: var(--text-color);
}