body{
    background: linear-gradient( 45deg, #161616, #242424 );
    background-size: 600%;
    background-position: 0%,50%;
    overflow: hidden;
    animation: aa 5s alternate infinite;
    transition: 0.3s;  
    }
    @keyframes aa{
    0%{background-position: 0% 50%;
    }
    100%{background-position: 100% 50%;
    }
    }
    html{
        overflow: hidden;
    transition: 0.3s;

    }
    #textarea{
    width: 90vw;
    height: 60vh;
    resize: none;
    position: absolute;
    border: 4px solid hsl(0, 0%, 15%);
    border-radius: 4px;
    bottom: 0%;
    background-color: rgb(244, 248, 252);
    transition: height 0.3s ease-in-out,
                width 0.3s ease-in-out,
                text-shadow 0.3s ease-in-out;
    }


    #container_sum{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 2%;
    }
    .sum{
    padding: 1.5vw;
    height: 3vh;
    border: 1px solid white;
    border-radius: 10px;
    color: white;
    background-color: #161616;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
    }
    .sum:hover{
        
        background-color:hsl(0, 0%, 30%) ;
        border: 1px solid #161616;
    }
    .p_sum{
    font-size: clamp(10px, 2vw, 30px);
    }
    .sum:hover .p_sum{
        transition: 0.4s;
    transform: rotate(360deg);
    color: #faeeee;
    }
#inp3{
position: absolute;
left: 80%;
width: 12%;
height:6%;
font-size: 25px;
border: none;
box-shadow: 0 0 5px rgb(0, 0, 0);
border-radius: 5px;
background-color: rgb(255, 255, 255);
color: rgb(47, 47, 47);
top: 5%;

}
#labsize{
position: absolute;
top:5%;
left: 75%;
font-size: 233%;
color: azure;
text-shadow: 0 0 5px black;

}
#size{
background-color: rgba(255, 255, 255, 0.518);
width: 20%;
height: 14%;
position: fixed;
z-index: -99;
pointer-events: none;
left: 74%;
border-radius: 10px;
top: 2.6%;

}
#textcolor{
background-color: rgba(255, 255, 255, 0.518);
width: 13%;
height: 14%;
position: fixed;
z-index: -99;
pointer-events: none;
left: 59.5%;
top: 2.6%;
border-radius: 10px;

}

#inp2{
position: absolute;
left: 65%;
top:2.5%;
width:80px;
height: 80px;
background-color: rgba(130, 12, 12, 0); 
border: none;
cursor: pointer;


}
#p2{
position: absolute;
left: 60%;
top:4.8%;
font-size: 20px;
color: azure;
text-shadow: 0 0 5px black;
}
#inp1{
position: absolute;
left: 52%;
top:2.5%;
width:80px;
height: 80px;
left: 36%;
top:8.5%;
width:60px;
height: 60px;
background-color: rgba(130, 12, 12, 0); 
border: none;
background-color:       rgba(0, 0, 128, 0);
cursor: pointer;

}
#p1{
position: absolute;
left: 47%;
top:4.8%;
font-size: 20px;
color: azure;
text-shadow: 0 0 5px black;
}
#baccolor{
background-color: rgba(255, 255, 255, 0.518);
width: 13%;
height: 14%;
position: fixed;
z-index: -99;
pointer-events: none;
left: 45.5%;
top: 2.6%;
border-radius: 10px;

}
#btn1{
position: absolute;
left: 39%;
top:3.85%;
width:5%;
height: 10%;
background-color: rgba(130, 12, 12, 0); 
border: none;
background-color:       rgba(0, 0, 128, 0);
border-radius: 50%;
font-size: 40px;
font-weight: bold;
border: solid white;
color: white;
text-shadow: 0 0 5px black;
cursor: pointer;

}

#inp4{
position: absolute;
left: 33%;
top:2.5%;
width:80px;
height: 80px;
background-color: rgba(130, 12, 12, 0); 
border: none;
cursor: pointer;
}
#ch{
background-color: rgba(255, 255, 255, 0.518);
width: 13%;
height: 14%;
position: fixed;
left: 31.7%;
top: 2.4%;
border-radius: 10px;
pointer-events: none;
}
#btn2{
width: 8%;
height: 10%;
position: absolute;
left: 22%;
top: 4%;
border: 3px solid black;
border-radius: 10px;
text-align: center;
font-size: 37px;
background-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
animation: btn2 5s alternate infinite;
text-shadow: 0 0 5px black;
cursor: pointer;
font-weight: bold;
}
#modgash{
background-color: rgba(255, 255, 255, 0.518);
width: 10%;
height: 14%;
position: fixed;
left: 21%;
top: 2.4%;
border-radius: 10px;
pointer-events: none;
}
#summary_fonts{
    position: absolute;
top: 18%;
left: 80%;
font-size: 32px;
background-color: rgb(64, 176, 224);
padding: 0.3%;
text-align: center;
border-radius: 10px;
color: white;


}
#div_fonts{
position: absolute;
top: 25.5%;
left: 68%;
 display: flex;
 flex-direction: row;
 gap: 10px;
}
#bts1,#bts2,#bts3,#bts4,#bts5,#bts6{
width: 30%;
height: 43%;
background-color: rgb(215, 220, 250);
border: 2px dashed;
border-radius: 5px;
box-shadow: 5px 5px 3px black;
color:rgb(45, 45, 45);
}
#bts1{
    font-family: cursive;
}
#bts2{
    font-family: Georgia, 'Times New Roman', Times, serif;
}
#bts3{
    font-family: Arial, Helvetica, sans-serif;
}
#bts4{
    font-family: Impact, fantasy;
}
#bts5{
    font-family: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive;
}
#bts6{
    font-family: "Rubik Wet Paint", system-ui;
}

#he3{
position: absolute;
top: 22%;
left: 59%;
background-color: aliceblue;
border: 4px solid gray;
padding: 3px;
font-size: 18px;
border-radius: 5px;
color: #575252;
}
#he2{
position: absolute;
position: absolute;
top: 22%;
left: 53.5%;
background-color: aliceblue;
border: 4px solid gray;
padding: 3px;
font-size: 18px;
border-radius: 5px;
color: #575252;

}#he1{
position: absolute;
position: absolute;
top: 22%;
left: 48%;
background-color: aliceblue;
border: 4px solid gray;
padding: 3px;
font-size: 18px;
border-radius: 5px;
color: #575252;

}
#fonts_blox{
background-color: rgba(255, 255, 255, 0.518);
width: 22%;
height: 12%;
position: fixed;
left: 66%;
top: 17.5%;
border-radius: 10px;
pointer-events: none;


}
#civon_blox{
background-color: rgba(255, 255, 255, 0.518);
width: 18%;
height: 12%;
position: fixed;
left: 47%;
top: 17.5%;
border-radius: 10px;
pointer-events: none;
}
.line_up{
    background-color: #5a5a5a;
position: absolute;
top: 0;
left: 0;
margin: 0px;
width: 100dvw;
height: 35dvh;
pointer-events: none;
z-index: -100;
}
#cont_img_abuot{
        display: flex;
            justify-content: end;
}
#img_abuot{
    width: 6dvw;
    height: 11dvh;
    position: fixed;
    cursor: pointer;
}
#img_abuot:active{
    cursor:wait;
}
#p_abuot{
position: fixed;
margin-right: 1.8dvw;
margin-top: 9dvh;
color: white;
cursor:pointer;
}
#inp5{
position: absolute;
left: 25%;
top: 10%;
padding: 10px;
color: rgb(19, 19, 19);
font-weight: bold;
border-radius: 10px;
background-color: rgb(227, 225, 230);
border: #161616 thick;
}
#inp6{
position: absolute;
left: 40%;
top: 10%;
padding: 10px;
color: rgb(19, 19, 19);
font-weight: bold;
border-radius: 10px;
background-color: rgb(227, 225, 230);
border: #161616 thick;
}
#inp7{
position: absolute;
left: 56%;
top: 10%;
padding: 10px;
color: rgb(19, 19, 19);
font-weight: bold;
border-radius: 10px;
background-color: rgb(227, 225, 230);   
border: #161616 thick;
}
#inp5::placeholder, #inp6::placeholder, #inp7::placeholder{
color: rgb(33, 33, 33);
font-size: 20px
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#div_inp5_6{
    background-color: rgba(225, 225, 225, 0.437);
width: 460px;
height: 100px;
position: absolute;
left: 24%;
top: 6%;
border-radius: 15px;
pointer-events: none;
}
#div_inp7{
    background-color: rgba(225, 225, 225, 0.437);
width: 360px; 
height: 100px;
position: absolute;
left: 55%;
top: 6%;
border-radius: 15px;
pointer-events: none;
}
#inp8{
    position: absolute;
    width: 80px;
    height: 80px;
    border: none;
    background-color: #16161600;
left: 71%;
top: 7.5%;
}
#rudios{
    position: absolute;
    left: 57%;
    top: 16%;
    cursor: pointer;
    border: none;
    -webkit-appearance:none;
     border-radius: 10px;
     height: 7px;
}
.contbtnssws{
    position: absolute;
    left: 39.8%;
}
#btnsw1{
    background-color: #161616;
        height: 10px;
    transform: rotate(-20deg);
    cursor: pointer;

}
#btnsw2{
    background-color: #161616;
        height: 14px;
    transform: rotate(0deg);
        cursor: pointer;
}
#btnsw3{
    background-color: #161616;
        height: 10px;
    transform: rotate(20deg);
        cursor: pointer;}