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

.heading {
 font-family : 'cooper', 'cursive';
 text-align : center;
 font-size : 60px;
 color : red;
 text-shadow : 4px 3px 0px black, 9px 8px 0px rgba(0,0,0,0.15);
 }

p {
 font-family : 'cooper', 'cursive';
 font-size : 38px;
}

.analog-clock {
 margin-top : 8%;
 align-items : center;
 width : 350px;
 height : 350px;
 display : flex;
 flex-wrap : wrap;
 justify-content : center;
 border : 15px solid #091921;
 border-radius : 50%;
 box-shadow :  0 -15px 15px rgba(255,255,255,0.05),
                        inset 0 -15px 15px rgba(255,255,255,0.05),
                        0 15px 15px rgba(0,0,0,0.3),
                        inset 0 15px 15px rgba(0,0,0,0.3);
 }

.analog-clock::before {
 content : " ";
 position : absolute;
 width : 15px;
 height : 15px;
 background : #fff;
 border-radius : 50%;
 z-index : 10000;
 }

.analog-clock .hour,
.analog-clock .minute,
.analog-clock .second {
 position : absolute;
 }
 
.analog-clock .hour, .hr {
 width : 150px;
 height : 150px;
}

.analog-clock .minute, .min{
 width : 180px;
 height : 180px;
 }

 .analog-clock .second, .sec {
 width : 220px;
 height : 220px;
 }

 .hr, .min, .sec {
 display : flex;
 justify-content : center;
 position : absolute;
 border-radius : 50%;
 }

.hr:before{
    content: ' ';
    position: absolute;
    width: 8px;
    height: 90px;
    background: #ff105e;
    border-radius: 6px 6px 0 0;
    z-index: 10;
}

.min:before{
    content: ' ';
    position: absolute;
    width: 4px;
    height: 100px;
    background: #fff;
    border-radius: 6px 6px 0 0;
    z-index: 11;
}

.sec:before{
    content: ' ';
    position: absolute;
    width: 2px;
    height: 160px;
    background: #fff;
    border-radius: 6px 6px 0 0;
    z-index: 12;
}

.clock {
    color: #17D4FE;
    font-size: 50px;
    letter-spacing: 7px;
 }

.calendar {
 margin-top : 5%;
 position : relative;
 width : 300px;
 height : 300px;
 background : #fff;
 text-align : center;
 border-radius : 8px;
 overflow : hidden;
 }

.calendar #month {
 position : relative;
 padding : 5px 10px;
 background : #ff6331;
 color : #fff;
 font-size : 40px;
 font-weight : 700;
 }

.calendar #day {
 margin-top : 20px;
 font-size : 30px;
 font-weight : 500;
 color : black;
 }

.calendar #number {
 font-family : 'TimesNewRoman';
 margin-top : 0px;
 line-height : 1em;
 font-size : 90px;
 font-weight : 700;
 color : #333;
 }

.calendar #year {
 font-family : 'TimesNewRoman';
 margin-bottom : 20px;
 font-size : 20px;
 font-weight : 600;
 color : black;
 }