*{
    box-sizing: 0;
    margin: 0;
}

@media (prefers-color-scheme: dark){
    body{
        background-color: rgb(12, 14, 24);
        color:white;
    }
    ::placeholder{
        color: rgb(189, 189, 189);
    }
    li{
        color: rgb(234, 234, 234);
    }
    #ftr{
    color:rgb(208, 208, 208);
    }
    a{
        color: rgb(186, 186, 186);
    }
}

@media (prefers-color-scheme: light){
    body{
        background-color: rgb(255, 255, 255);
        color:rgb(0, 0, 0);
    }
    ::placeholder{
        color: rgb(59, 59, 59);
    }
    li{
        color: rgb(12, 12, 12);
    }
    #ftr{
        color:rgb(23, 23, 23);
    }
    a{
        color: rgb(61, 61, 61);
    }
}

body{
    
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-size: 100% 100%;
    overflow-x: hidden;
}

.clock{
    font-family: 'Josefin Sans';
}

.list{
    display:flex;
    flex-direction: column;
    align-items: center;
    max-width: max-content;
    align-self: center;
}

.btn-1{
    background-color: rgb(149, 230, 28);
    border:1px solid rgb(149, 230, 28);
    color:rgb(252, 252, 250);
    border-radius: 0 6px 6px 0;
    height: 25px;
    box-shadow: 0 0 3px rgb(188, 188, 188);
}

.btn-2{
    background-color: rgb(244, 29, 29);
    border: 1px solid rgb(244, 29, 29) ;
    color:rgb(255, 255, 255);
    border-radius: 6px;
    padding: 1px 6px;
    box-shadow: 0 0 3px rgb(188, 188, 188);
}

.U-body{ 

    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 96vvw;
}
@media screen and (min-width:700px){
    .U-body{
        min-height:100vh;
    }


    .sec{
        display: inline-block;
        max-width:40vw;
        min-width: 30vw;
        background-color: rgba(179, 179, 179, 0.221);
        border-radius: 10px;
        padding:20px;
        position: relative;
        margin-top: 10px;
        box-shadow: 0 0 3px rgb(187, 187, 187);
    }
    
    
    .s-sec button:hover{
        cursor: pointer;
        box-shadow: 3px 3px 5px rgba(108, 108, 108, 0.9);
        opacity:0.9;
        transition: 300ms all;
    }
    
    .stick{
        display: flex;
    }
    
    li{
        
        font-family: 'Josefin Sans';
        margin-bottom: 10px;
        list-style-type: none;
    }
    
    #input{
        border: none;
        border-radius: 10px 0 0 10px;
        padding: 0 0 0 10px;
        background-color: rgba(255, 255, 255, 0.534);
        box-shadow: 0 0 3px rgba(156, 156, 156, 0.7);
        outline: none;
        height: 25px;
        margin-left: 30px;
    }
    
    ::placeholder{
        font-size:0.75rem;
        margin-bottom:5px;
        
    }
    
    .s-sec{
        display: flex;
        gap:6vw;
    }
    }

@media screen and (max-width:700px ) {
    .U-body{
        min-height:100vh;
    }

    .sec{
        display: inline-block;
        max-width:max-content;
        background-color: rgba(161, 161, 161, 0.249);
        border-radius: 10px;
        padding:20px;
        position: relative;
        margin-top:10px;
        box-shadow: 0 0 4px rgb(187, 187, 187);
    }
    
    
    .s-sec button:hover{
        cursor: pointer;
        box-shadow: 3px 3px 5px rgba(108, 108, 108, 0.9);
        opacity:0.9;
        transition: 300ms all;
    }
    
    .stick{
        display: flex;
    }
    
    li{
        
        font-family: 'Josefin Sans';
        margin-bottom: 10px;
        list-style-type: none;
    }
    
    #input{
        border: none;
        border-radius: 10px 0 0 10px;
        padding: 0 0 0 10px;
        background-color: rgba(255, 255, 255, 0.534);
        box-shadow: 0 0 3px rgba(156, 156, 156, 0.7);
        outline: none;
        height: 25px;
    }
    
    ::placeholder{
        font-size:0.75rem;
        margin-bottom:5px;
        
    }
    
    
    .s-sec{
        display: flex;
        gap:15px;
    }
}