*, ::after, ::before{margin: 0; box-sizing: border-box;}
body{font-family: sans-serif; background: rgb(26, 8, 61);}
a{text-decoration: none;}
button{cursor: pointer;}
.container{max-width: 1200px; margin: auto; padding: 0 15px;}
.row{display: flex; flex-flow: row wrap; margin: 0 -15px;}
.row [class^="col-"]{flex: 1 1 auto; padding: 0 15px;}
.row .col-1{flex-basis: 8.33%; max-width: 8.33%;}
.row .col-2{flex-basis: 16.66%; max-width: 16.66%;}
.row .col-3{flex-basis: 25%; max-width: 25%;}
.row .col-4{flex-basis: 33.33%; max-width: 33.33%;}
.row .col-5{flex-basis: 41.66%; max-width: 41.66%;}
.row .col-6{flex-basis: 50%; max-width: 50%;}
.row .col-7{flex-basis: 58.33%; max-width: 58.33%;}
.row .col-8{flex-basis: 66.66%; max-width: 66.66%;}
.row .col-9{flex-basis: 75%; max-width: 75%;}
.row .col-10{flex-basis: 83.33%; max-width: 83.33%;}
.row .col-11{flex-basis: 91.66%; max-width: 91.66%;}
.row .col-12{flex-basis: 100%; max-width: 100%;}
@font-face {
    font-family: radio;
    src: url(../fonts/radioland.slim.ttf);
}
.wrap-1{padding: 100px 0; color: #fff;}
.wrap-1 .col-4{text-align: center; }
.wrap-1 .col-4 h1{font-size: 30px; line-height: 60px; color: rgb(210, 229, 243);}
.wrap-1 .watch{border: 2px solid rgb(9, 32, 47); background: #000; height: 400px; margin-top: 10px; border-radius: 30px; box-shadow: 18px 20px 20px 5px rgb(62, 83, 96);}
.wrap-1 .watch .stopwatch{display: flex; flex-flow: column wrap; justify-content: center; align-items: center; position: relative; top: 50%; transform: translateY(-50%);}
.wrap-1 .watch .stopwatch h2{letter-spacing: 4px; font-size: 40px;line-height: 70px; font-weight: lighter;}
.wrap-1 .watch .stopwatch .btn-1{width: 80px; height: 40px; border: 2px solid #fff; background: none; text-transform: uppercase;font-family: sans-serif; font-weight: light; color: #fff; margin-top: 20px; border-radius: 5px; letter-spacing: 2px;}
.wrap-1 .time{border: 2px solid #fff; border-radius: 50%; background: transparent; background-position: center; background-size: cover; width: 250px; height: 250px; border-radius: 50%; position: relative; top: 50%; left: 50%; transform: translateX(-50%);  margin-top: -125px;}
.minute{width: 35%; height: 2px; border: 1px solid rgb(175, 202, 223); background: rgb(175, 202, 223); position: absolute; top: 50%; left: 50%; margin-top: -1.5px; transform-origin: left center;}
.second{width: 40%; height: 3px; border: 1px solid rgb(175, 202, 223); background: rgb(175, 202, 223); position: absolute; top: 50%; left: 50%; margin-top: -1px; transform-origin: left center;}
.hour{width: 25%; height: 1px; border: 1px solid rgb(175, 202, 223); background: rgb(175, 202, 223); position: absolute; top: 50%; left: 50%; margin-top: -0.5px; transform-origin: left center;}
.twelve{position: absolute; height: 10%; width: 1px; border: 1px solid rgb(175, 202, 223); background: rgb(175, 202, 223); top: 0; left: 50%; margin-left: -0.5px;}
.six{position: absolute; height: 10%; width: 1px; border: 1px solid rgb(175, 202, 223); background: rgb(175, 202, 223); bottom: 0; left: 50%; margin-left: -0.5px;}
.nine{position: absolute; width: 10%; height: 1px; border: 1px solid rgb(175, 202, 223); background: rgb(175, 202, 223); left: 0; top: 50%; margin-top: -0.5px;}
.three{position: absolute; width: 10%; height: 1px; border: 1px solid rgb(175, 202, 223); background: rgb(175, 202, 223); right: 0; top: 50%; margin-top: -0.5px;}
.point{width: 7px; height: 7px; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgb(175, 202, 223); background: rgb(175, 202, 223); position: absolute; top: 50%; left: 50%; transform: translateX(-50%); margin-top: -3.5px;}
.btn-stop{width: 80px; height: 40px; border: 2px solid #fff; background: none; text-transform: uppercase;font-family: sans-serif; font-weight: light; color: #fff; margin-top: 20px; border-radius: 5px; letter-spacing: 2px;}
.alarm{ display: flex; flex-flow: column;  align-items: center; margin-top: 20px; column-gap: 30px;}

.list-con{ height: 300px; width: 200px; margin-top: 10px; display: flex; flex-flow: column wrap; align-items: center;}
.list{list-style: none; position: relative; left: -15px; font-size: 25px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color: rgb(103, 102, 102);}
select{padding: 5px 7px; border: 2px solid #fff; border-radius: 5px; background: transparent; color: #fff;}
option{color: #fff; background: #000; border: none;}
.add{padding: 5px 7px; border: 2px solid #fff; background: transparent; color: #fff; border-radius: 5px;}
.wrap-1 .alarm-bell{position: absolute; font-size: 200px; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; transform-origin: top center; color: rgb(10, 157, 32); animation: 2s ring infinite; opacity: 0;}
@keyframes ring {
    0%{transform: rotate(0deg);}
    50%{transform: rotate(-30deg);}
    100%{transform: rotate(30deg);}
}
@media screen and (max-width: 1220px){

}
@media screen and (max-width:980px){
    .wrap-1 .watch .stopwatch h2 { font-size: 29px; line-height: 70px;}
      .wrap-1 .time {width: 180px; height: 180px;}
      .add{padding: 7px 12px; margin-top: 10px; border: 2px solid #fff; background: transparent; color: #fff; border-radius: 5px;}
      select {padding: 5px 5px;}      
      .wrap-1 .watch {height: 340px; margin-top: 10px;}
      .wrap-1 .alarm-bell{position: absolute; font-size: 200px; top: 20%; left: 50%; margin-left: -100px; transform-origin: top center; color: rgb(10, 157, 32); animation: 2s ring infinite; opacity: 0;}
}
@media screen and (max-width: 767px){
.wrap-1 .col-4{flex-basis: 100%; max-width: 100%;}
.wrap-1 .row{row-gap: 70px;}
}