@media screen and (max-width: 1200px) {

      #home {
        position: absolute;
        text-decoration: none;
        color: white;
        /* right: 5%; */
        top: 3%;
      }
    .container1 {
        position: absolute;
        width: 80%;
        height: 100%;
        background-image: radial-gradient(white, skyblue);
        left: 20%;
         display: flex;
         justify-content: center;
    }
    #undo {
    top: 8%;
    left: 15%;
    width: 40px;
    height: 30px;
    }
   #redo {
    top: 8%;
    left: 22%;
    width: 40px;
    height: 30px;
    }
    .controls {
        display: inline-block;
    }
    .inputImg {
        display: none;
    }
    .font {
        position: absolute;
        right: 5%;
        top: 210px;
    }
    .height {
        position: absolute;
        width: 50px;
        right: 35%;
        top: 70px;
    }
    .width {
        position: absolute;
        width: 50px;
        right: 55%;
        top: 70px;
    }
    .ratio {
        position: absolute;
        right: 10%;
        top: 180px;
    }
    .color {
        position: absolute;
        left: 2%;
        top: 200px;
    }
    .border {
        position: absolute;
        text-align: center;
        color: white;
        cursor: pointer;
        bottom: 1%;
        left: 20%;
        width: 100px;
        height: 30px;
        border-radius: 5%;
        border:  2px solid whitesmoke;
        background-color: blue;
    }
    #border-color {
        position: absolute;
        bottom: 9%;
        left: 15%;
        display: none;
    }
     #copy {  
        top: 2%;
        right: 35%;
        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: 25%;
        width: 100px;
        height: 30px;
        border-radius: 5%;
        border:  2px solid whitesmoke;
        background-color: blue;
    }
    .font-style {
        position: absolute;
        text-align: center;
        color: white;
        cursor: pointer;
        bottom: 1%;
        right: 45%;
        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: 40%;
        width: 20%;
        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: 75%;
        height: 3%;
        bottom: 20%;
        left: 20%;
        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: 75%;
        height: 3%;
        bottom: 15%;
        left: 20%;
        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: 75%;
        height: 3%;
        bottom: 10%;
        left: 20%;
        z-index: 100;
        display: none;
    }
    #flip {
        position: absolute;
        bottom: 15%;
        left: 15%;
        display: none;
    }
    .flip {
        position: absolute;
        bottom: 15%;
        left: 10%;
        display: none;
    }
    .judul {
        position: absolute;
        /*right: 290px;*/
        top: 210px;
    }
    
    
    .container2 {
        position: absolute;
        width: 20%;
        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: 1%;*/
        top: 10%;
        width: 60%;
        height: 30px;
        /* left: 10%; */
        background-color: blue;
        border-radius: 5%;
        cursor: pointer;
    }
    .uploadtext{
        position: absolute;
        top: -30%;
        left: 5%;
        color: white;
    }
    .save {
        position: absolute;
        /*left: 1%;*/
        top: 95%;
        width: 60%;
        height: 30px;
        /* right: 10%; */
        background-color: blue;
        border-radius: 5%;
        cursor: pointer;
    }
    .savetext{
        position: absolute;
        top: -30%;
        left: 5%;
        color: white;
    }
    .text {
        position: absolute;
        top: 40%;
        /*left: 20%;*/
        cursor: pointer;
        color: black;
    }
    .pencil {
        position: absolute;
        top: 50%;
        /* left: 35%; */
        cursor: pointer;
    }
    .pencilactive {
        position: absolute;
        top: 50%;
        /* left: 35%; */
        cursor: pointer;
    } 
    .ai {
        position: absolute;
        top: 65%;
        /* left: 35%; */
        cursor: pointer;
    } 
    #curved-line {
        position: absolute;
        top: 77%;
        /* left: 35%; */
        cursor: pointer;
    } 
    .eraser {
        position: absolute;
        top: 75%;
        /* left: 35%; */
        cursor: pointer;
        display: none;
    }
    .dropbtn5 {
        width: 85px;
        height: 30px;
    }

      .dropdown5 {
        left: 20%;
        top: 95%;
    }
    
    .dropdown6 {
        /*left: 20%;*/
        top: 32%;
    }
    
    .dropdown7 {
    top: 15%;
    left: 55%;
    }
    
    .dropdown8 {
      position: absolute;
      /* display: inline-block; */
      top: 18%;
      left: 20%;
    }
    .dropdown8 img{
      width: 50px;
    }
    
    .dropdown9 {
      position: absolute;
      /* display: inline-block; */
      top: 75%;
      
    }
    
}