/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root {
    --primary-color:  #f6f7fb;
    --white-color: #fff;
    --black-color: #18191a;
    /* --red-color: #e74c3c; */
    --red-color: rgb(253, 3, 3);
    --second-color: rgb(253, 3, 3);
    --minute-color : rgb(60, 102, 163);
    --hour-color: rgb(0, 0, 0);
    --container-height: 200;
    --container-width: 200;
    /* color: rgb(60, 102, 163); */
}

body{
    display: flex;
    min-height:  calc(var(--container-height) * 1px);
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
}

.container{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container .min_sec{   
    display: flex;
    height: calc(var(--container-height) * 1px);
    width:  calc(var(--container-width) * 1px);
    border-radius: 50%;    
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    box-shadow:  0 15px 25px rgba(0,0,0,0.1), 0 25px 45px rgba(0,0,0,0.1);
    position: relative; 
}

.min_sec label{
    position: absolute;
    inset: 2px;
    font-weight: 600;
    font-size:  calc(var(--container-height) * 0.03px);
     /* background-color: red; */
    text-align: center;
    transform: rotate(calc(var(--i) * ( 360deg / 60)));
}

.min_sec .bold{
    font-size:  calc(var(--container-height) * 0.04px);
    font-weight: 800;
    color: var(--red-color);
}

.container .min_sec .clock label span {
    display:inline-block; 
    font-size:   calc(var(--container-height) * 0.04px);
    font-weight: 500;
    color: var(--black-color);
    transform: rotate(calc(var(--i) * ( -360deg / 12)));
    /* border: 1px solid red; */
}

.clock label{
    position: absolute;
    inset: calc(var(--container-width) * 0.068px);    
    /* background-color: red; */
    text-align: center;
    transform: rotate(calc(var(--i) * ( 360deg / 12)));
    font-size: 8px;
}

.container .min_sec .indicator {
    position:  relative; 
    height: calc(var(--container-height) * 0.02px);
    width:  calc(var(--container-width) * 0.02px);
    /* height: 10px;
    width: 10px; */
    border-radius: 50%;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.indicator::before{
    content: "";
    position: absolute;
    height: calc(var(--container-height) * 0.02px);
    width:  calc(var(--container-width) * 0.02px);   
    /* height: 5px;
    width: 5px; */
    border-radius: 50%;
    z-index: 100;
    background: var(--black-color); 
    border: 3px solid var(--red-color);
}

.indicator .hand {
    position: absolute;
    /* height: 142px; */
    height: calc(var(--container-height) * 0.36px);
    width: calc(var(--container-width) * 0.008px);
    bottom: 4px;
    border-radius: 25px;
    transform-origin: bottom;
    background: var(--second-color);     
}

.indicator .minute {
    /* height: 126px;
    width: 6px; */
    height: calc(var(--container-height) * 0.32px);
    width: calc(var(--container-width) * 0.016px);
    /* transform: rotate(45deg);  */
    background: var(--minute-color); 
}
    

.indicator .hour {
    /* height: 90px; 
    width: 8px; */
    height: calc(var(--container-height) * 0.25px);
    width: calc(var(--container-width) * 0.024px);
    /* transform: rotate(45deg); */
    background: var(--hour-color);
}




/* Digital Clock Settings */

.digital_clock {
    margin-top: 20px;
    display: flex;
}

.digital_clock div {
    margin: 5px;    
    position: relative;
}

.digital_clock span{
    width: 80px;
    height: 60px;
    background: slateblue;
    opacity: 0.8;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    text-shadow: 2px 2px 4px rgba(0,0,0,.3);
    overflow: hidden;
}



/* HEADER - MEDIA QUERRIES */

@media only screen and (max-width: 706px) {
    /* styles for browsers smaller than 706px; */


    /* :root {        
        --container-height: 300;
        --container-width: 300;
    }
    
    body {
        align-items: center;
        justify-content: center;
    }  
    
    .digital_clock div {
        margin: 5px;    
        position: relative;
    }
    
    .digital_clock span{
        width: 100px;
        height: 80px;
        font-size: 40px;
        font-weight: 700;
    }  */
}

@media only screen and (min-width: 706px) {
    /* styles for browsers larger than 706px; */
    
    :root {
        --container-height: 400;
        --container-width: 400;
    }

    body {
        margin: 20px 20px;
    }

    .digital_clock {
        margin: 20px 10px;
        width: 700px;
        height: 200px;
        justify-content:space-around;        
    }

    .digital_clock span{        
        width: 200px;
        height: 100%;
        font-size: 100px;
        font-weight: 400;
        justify-content:center;        
        
    }    
}


@media only screen and (min-width: 960px) {
    /* styles for browsers larger than 960px; */
}

 @media only screen and (min-height:1024px) and (min-width:1024px){
    :root {
        --container-height: 800;
        --container-width: 800;
    }

    body {
        margin: 20px 20px;
    }

    .digital_clock {
        margin: 20px 10px;
        width: 700px;
        height: 200px;
        justify-content:space-around;        
    }

    .digital_clock span{        
        width: 200px;
        height: 100%;
        font-size: 100px;
        font-weight: 400;
        justify-content:center;        
        
    }     
}

@media only screen and (min-width: 1440px) {
    /* styles for browsers larger than 1440px; */

    /* :root {        
        --container-height: 800;
        --container-width: 800;
    }
    
    .digital_clock div {
        margin: 30px;    
        position: relative;
    }
    
    .digital_clock span{
        width: 200px;
        height: 200px;
        font-size: 60px;
        font-weight: 800;
    }  */
}

@media only screen and (min-width: 2000px) {
    /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {  /* Maximum width upto 480px */
   /* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width: 768px) {
   /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}