@media screen and (max-width: 760px) {
      #home {
        position: absolute;
        text-decoration: none;
        color: white;
        /* right: 5%; */
        top: 3%;
        font-size :80%;
      }
    .container1 {
        position: absolute;
        width: 85%;
        height: 100%;
        background-image: radial-gradient(white, skyblue);
        left:15%;
        display: flex;
        justify-content: center;
    }
    #undo {
    top: 11%;
    left: -8%;
    width: 40px;
    height: 20px;
    }
    #redo {
        top: 14.5%;
        left: -8%;
        width: 40px;
        height: 20px;
    }
    .slider #size {
        position: absolute;
        bottom: 20%;
        left: 5%;
        width: 90%;
        z-index: 100;
        /*display: block;*/
    }
    .slider #rotate {
        position: absolute;
        bottom: 15%;
        left: 5%;
        width: 90%;
        z-index: 100;
        /*display: block;*/
    }
    .controls {
        display: inline-block;
    }
    .inputImg {
        display: none;
    }
    /* .row {
        margin: 1%;
        display: flex;
        justify-content: space-between;
        background-color: red;
    } */
    .font {
        position: absolute;
        left: 56%;
        top: 55px;
    }
    .height {
        position: absolute;
        width: 10px;
        left:80%;
        top: 90px;
    }
    #tinggi {
     width: 50px;
    }
    .width {
        position: absolute;
        width: 10px;
        left:60%;
        top: 90px;
    }
    #lebar {
        width: 50px;
       }
    .ratio {
        position: absolute;
        right: 13%;
        top: 128px;
    }
    .color {
        position: absolute;
        left: 0%;
        top: 55px;
    }
    .border {
        position: absolute;
        text-align: center;
        color: white;
        cursor: pointer;
        bottom: 1%;
        left: 1%;
        width: 100px;
        height: 30px;
        border-radius: 5%;
        border:  2px solid whitesmoke;
        background-color: blue;
    }
    .slider #border-width {
        position: absolute;
        bottom: 10%;
        left: 15%;
        width: 80%;
        height: 5px;
        z-index: 100;
        accent-color: yellow;
        display: none;
    }
    #border-color {
        position: absolute;
        bottom: 9%;
        left: 1%;
        display: none;
    }
     #copy {  
        top: 2%;
        right: 38%;
        width: 50px;
        height: 20px;  
    }
    #rotate2 {
        top: 8.5%;
        right: 0%;
        width: 50px;
        height: 20px;
    }
    #rotate3 {
        top: 8.5%;
        right: 0%;
        width: 50px;
        height: 20px;
    }
    #rotate4 {
        top: 8.5%;
        right: 0%;
        width: 50px;
        height: 20px;
    }
    #rotate5 {
        top: 8.5%;
        right: 0%;
        width: 50px;
        height: 20px;
    }
    .opacity {
        position: absolute;
        text-align: center;
        color: white;
        cursor: pointer;
        bottom: 1%;
        right: 1%;
        width: 100px;
        height: 30px;
        border-radius: 5%;
        border:  2px solid whitesmoke;
        background-color: blue;
    }
    .slider #opacity {
        position: absolute;
        bottom: 10%;
        left: 5%;
        width: 90%;
        height: 5px;
        z-index: 100;
        accent-color: yellow;
        display: none;
    }
    .font-style {
        position: absolute;
        text-align: center;
        color: white;
        cursor: pointer;
        bottom: 1%;
        right: 34%;
        width: 100px;
        height: 30px;
        border-radius: 5%;
        border:  2px solid whitesmoke;
        background-color: blue;
        z-index: 100;
        display: none;
    }
    #text-input {
        position: absolute;
        bottom: 25%;
        left: 25%;
        width: 50%;
        height: 5%;
        opacity: 0.8;
        z-index: 100;
        display: none;
    }
    .slider #diameter {
        position: absolute;
        bottom: 30%;
        left: 2%;
        width: 95%;
        height: 5px;
        z-index: 100;
        accent-color: yellow;
        display: none;
    }
    .diameter {
        position: absolute;
        width: 80%;
        height: 5%;
        bottom: 19%;
        left: 15%;
        z-index: 100;
        display: none;
    }
    .slider #fontSize {
        position: absolute;
        bottom: 30%;
        left: 2%;
        width: 95%;
        height: 5px;
        z-index: 100;
        accent-color: yellow;
        display: none;
    }
    .fontSize {
        position: absolute;
        width: 80%;
        height: 5%;
        bottom: 13%;
        left: 15%;
        z-index: 100;
        display: none;
    }
    .slider #kerning {
        position: absolute;
        bottom: 30%;
        left: 2%;
        width: 95%;
        height: 5px;
        z-index: 100;
        accent-color: yellow;
        display: none;
    }
    .kerning {
        position: absolute;
        width: 80%;
        height: 5%;
        bottom: 7%;
        left: 15%;
        z-index: 100;
        display: none;
    }
    #flip {
        position: absolute;
        bottom: 10%;
        left: 8%;
        display: none;
    }
    .flip {
        position: absolute;
        bottom: 10%;
        left: 0%;
        display: none;
    }
    .judul {
        position: absolute;
        /*right: 90px;*/
        top: 100px;
    }
    
    
    .container2 {
        position: absolute;
        width: 15%;
        height: 100%;
        top: 0%;
        background-color: #3498DB;
        left: 0%;
        display: flex;
        justify-content: center;
    }
    .wraper {
        position: absolute;
        width: 100%;
        height: 500px;
        top: 50px;
        left: 0%;
        display: flex;
        justify-content: center;
        /* background-color: red; */
    }
    .input {
        position: absolute;
        /*left: 5%;*/
        top: 10%;
        width: 90%;
        height: 30px;
        /* left: 10%; */
        background-color: blue;
        border-radius: 5%;
        cursor: pointer;
    }
    .uploadtext{
        position: absolute;
        top: 10%;
        left: 5%;
        color: white;
        font-size: 0.5rem;
    }
    .save {
        position: absolute;
        /*left: 5%;*/
        top: 90%;
        width: 90%;
        height: 30px;
        /* right: 10%; */
        background-color: blue;
        border-radius: 5%;
        cursor: pointer;
    }
    .savetext{
        position: absolute;
        top: 10%;
        left: 5%;
        color: white;
        font-size: 0.5rem;
    }
    .text {
        position: absolute;
        top: 32%;
        /*left: 10%;*/
        cursor: pointer;
        /* color: antiquewhite; */
    }
    .pencil {
        position: absolute;
        top: 45%;
        /* left: 35%; */
        cursor: pointer;
    }
    .pencilactive {
        position: absolute;
        top: 45%;
        /* left: 35%; */
        cursor: pointer;
    } 
    
    .ai {
        position: absolute;
        top: 60%;
        /* left: 35%; */
        cursor: pointer;
    } 
    
  #curved-line {
        position: absolute;
        top: 73%;
        /* left: 35%; */
        cursor: pointer;
    } 

    .eraser {
        position: absolute;
        top: 75%;
        /* left: 35%; */
        cursor: pointer;
        display: none;
    }

    .dropbtn5 {
        width: 60px;
        height: 30px;
    }

      .dropdown5 {
        left: 0%;
        top: 95%;
        font-size: x-small;
    }
    .dropdown6 {
        /*left: 20%;*/
        top: 32%;
    }
    .dropdown7 {
    top: 13%;
    left: 25%;
    }
        .dropdown8 {
      position: absolute;
      /* display: inline-block; */
      top: 9%;
      left: 5%;
    }
    .dropdown8 img{
      width: 30px;
    }
    .dropdown9 {
      position: absolute;
      /* display: inline-block; */
      top: 75%;
      
    }

     #warnakaos {
      position: absolute;
      left: 2.5%;
      width: 250px;
      height: 250px;
    }
    .text {
        font-size: 7px;
        color: #000;
        /* text-align: center; */
    }
    
    #warnakaos #putih2 {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 1%;
    }
    #warnakaos #hitam2 {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 20%;
    }
    #warnakaos #abumisty {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 40%;
      /* display: none; */
    }
    #warnakaos #abutua {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 60%;
      /* display: none; */
    }
    #warnakaos #color-wheel {
      position: absolute;
      left: 0%;
      top: 80%;
    }
    #color-wheel img {
      width: 30px;
    }
    #warnakaos #merah2 {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 1%;
      /* display: none; */
    }
    #warnakaos #maroon {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 20%;
    }
    #warnakaos #teracota {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 40%;
      /* display: none; */
    }
    #warnakaos #pink {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 60%;
      /* display: none; */
    }
    #warnakaos #fanta {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 80%;
    }
    #warnakaos #navy {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 1%;
      left: 38%;
    }
    #warnakaos #biruturkis {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 38%;
      top:20%;
      /* display: none; */
    }
    #warnakaos #birubenhur {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 38%;
      top: 40%;
      /* display: none; */
    }
    #warnakaos #birumuda {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 38%;
      top: 60%;
    }
    #warnakaos #hijauarmy {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 38%;
      top: 80%;
      /* display: none; */
    }
    #warnakaos #hijaubotol {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 1%;
      right: 22%;
      /* display: none; */
    }
    #warnakaos #hijaustabilo {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 20%;
      right: 22%;
      /* display: none; */
    }
    #warnakaos #hijautosca {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 40%;
      right: 22%;
      /* display: none; */
    }
    #warnakaos #hijaufuji {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 60%;
      right: 22%;
    }
    #warnakaos #mustard {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 80%;
      right: 22%;
    }
    #warnakaos #kuningkenari {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 1%;
      right: 1%;
      /* display: none; */
    }
    #warnakaos #oren {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 20%;
      right: 1%;
      /* display: none; */
    }
    #warnakaos #ungu {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 40%;
      right: 1%;
      /* display: none; */
    }
    #warnakaos #cream {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 60%;
      right: 1%;
    }
    #warnakaos #coklat {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 80%;
      right: 1%;
      /* display: none; */
    }
}