*{margin:0;padding:0;box-sizing:border-box;outline:none}.btn{padding:10px 15px;border-radius:8px;border:none;font-size:20px;font-weight:600;cursor:pointer;transition:all .5s ease}.container{width:100%;height:100vh;background-color:#000;display:flex;align-items:center;justify-content:center;padding:0}.container .wrapper{width:60%;height:50vh;background-color:#008b8b;border-radius:20px;padding:30px 25px;display:flex;gap:50px;flex-direction:column;align-items:center;justify-content:center}.container .wrapper h1{text-align:center;font-size:48px;color:azure}.container .wrapper .wrap__btn{display:flex;align-items:center;gap:20px;width:60%;justify-content:center}.container .wrapper .wrap__btn button{color:#faebd7}.container .wrapper .wrap__btn button:nth-child(1){background-color:#dc143c}.container .wrapper .wrap__btn button:nth-child(1):hover{background-color:brown;color:#fff8dc}.container .wrapper .wrap__btn button:nth-child(2){background-color:#006400}.container .wrapper .wrap__btn button:nth-child(2):hover{background-color:#228b22;color:#fff8dc}.container .wrapper .wrap__btn button:nth-child(3){background-color:#1e90ff}.container .wrapper .wrap__btn button:nth-child(3):hover{background-color:#00bfff;color:#fff8dc}.container .wrapper .clear__btn{color:brown;background-color:#5f9ea0;width:45%}.container .wrapper .clear__btn:hover{color:#0ff;background-color:#696969}@media screen and (max-width: 890px){.container{padding:20px}.container .wrapper{width:90%;height:auto;padding:20px 15px;gap:30px}.container .wrapper h1{font-size:32px}.container .wrapper .wrap__btn{flex-direction:column;width:100%;gap:15px}.container .wrapper .wrap__btn button,.container .wrapper .clear__btn{width:100%;font-size:18px;padding:12px}}@media screen and (max-width: 480px){.container .wrapper{width:100%;padding:20px 10px;gap:15px}.container .wrapper h1{font-size:24px}.container .wrapper .wrap__btn{flex-direction:column;width:100%;gap:10px}.container .wrapper .wrap__btn button,.container .wrapper .clear__btn{width:100%;font-size:16px;padding:10px}}@media screen and (max-width: 340px){.container .wrapper{padding:15px 5px;gap:10px}.container .wrapper h1{font-size:20px}.container .wrapper .wrap__btn{gap:8px}.container .wrapper .wrap__btn button,.container .wrapper .clear__btn{font-size:14px;padding:8px}}