* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background-color: #2f9395;
    color: #000000;

}

.con {
    height: 100vh;
    width: 60vw;
    margin: auto;
    cursor: default;
}

.nameCon {
    margin: 0 auto;
    height: 55px;
    width: 80%;
    border-bottom: 1px solid rgba(63, 63, 63, 0.842);
    display: flex;
    justify-content: center;
    align-items: center;
}

.nameCon p {
    padding: 12px 0px 8px 7px;
    font-weight: 500;
    font-family: 'poppins';
    font-size: 18px;
}
 
.clockCon {
    height: 60vh;
    width: 60vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    font-family: 'Times New Roman';
}
 
.timeNow {
    font-size: 20vmin;
    text-align: center;
}

.dateNow {
    font-weight: 500;
}

@media (max-width: 770px) {
    .con {
        width: 90vw;
        margin: auto;
    }

    .clockCon {
        width: 90vw;
        margin: auto;
    }

    .nameCon {
        width: 85%;
    }
}

@media (min-width: 1441px) and (max-width: 2560px) {
    .nameCon {
        width: 60%;
    }
}
@media (min-width: 1025px) and (max-width: 1440px) {
    .nameCon { 
        margin: 0 auto;
        width: 80vmin;
    }
}
@media (min-width: 770px) and (max-width: 1024px) {
    .nameCon {
        width: 90%;
    }
}


@media (max-width: 425px){
    .nameCon{
        width: 100%;
        background-color: #07a8b38a;
    }
    .con{
        width: 100vw;
        margin: 0 auto;
    }
    .clockCon{
        width: 97vw;
    }
    .ap{
        width: 87vmin;
    }
}
@media  (max-width: 380px) {
   .dateNow{
    font-size: 15px;
   } 
}

@media  (max-width: 320px) {
   .dateNow{
    font-size: 13px;
   }
    
}