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

body {
  font-family: 'ModBolda_Alterna', sans-serif;
  background-color: #121212;
  padding: 30px;
  background-size: 100%;
}

.container__item {
  display: block;
  width: 100%;
  height: 100vh;
  border-radius: 5px;
  padding: 40px;
  margin-bottom: 30px;
}

.conteiner__item__head{
  color: #fff;
  width: 100%;
  height: 100px;
  background-color: rgba(65, 65, 65, 0.5);
  border-radius: 5px;
}









ul {list-style-type: none;}

/* Month header */
.month {
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
    text-align: center;
}

/* Month list */
.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
    float: left;
    padding-top: 10px;
}

/* Next button */
.month .next {
    float: right;
    padding-top: 10px;
}

/* Weekdays (Mon-Sun) */
.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color:#ddd;
}

.weekdays li {
    display: inline-block;
    width: 13.6%;
    color: #666;
    text-align: center;
}

/* Days (1-31) */
.days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

/* Highlight the "current" day */
.days li .active {
    padding: 5px;
    background: #1abc9c;
    color: white !important
}









#calendar {
    width: 100%;
    font: monospace;
    line-height: 2.5em;
    font-size: 3vh;
    text-align: center;
    color: rgb(221, 217, 217);
  }
  #calendar thead tr:last-child {
    font-size: 4vh;
    color: rgb(232, 219, 246);
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: rgb(190, 190, 190);
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover, #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: rgb(255, 255, 255);
    font-size: 3.5vh;
  }
  #calendar tbody td:nth-child(n+6), #calendar .holiday {
    color: rgb(226, 93, 31);
  }
  #calendar tbody td.today {
    background: rgb(190, 190, 190);
    color: rgb(246, 49, 49);
  }

  .CalendarDiv {
    align-items: center;
    width: 60%;
  }

  #clock {  
    font-family: sans-serif;  
    color: rgb(255, 255, 255);  
    text-align: center;  
    position: absolute;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);  
    /* color: #daf6ff;   */
    /* text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);   */
  }  
    
  #clock .time {  
    letter-spacing: 0.05em;  
    font-size: 4em;  
    padding: 5px 0;  
  }  
    
  #clock .date {  
    letter-spacing: 0.1em;  
    font-size: 24px;  
  }  
    
  #clock .text {  
    letter-spacing: 0.1em;  
    font-size: 12px;  
    padding: 20px 0 0;  
  }
  .clock__div {
    display: block;
    position: relative;
    width: 100%;
    height: 120px;
  }