:root{
  --bg-color:#f5f7fa;
  --gray-dark:#51565d;
  --gray-light:#ccc;
  --html-color:#fd490c;
  --html-color-light:#fbe9e3;
  --css-color:#2298f8;
  --css-color-light:#dbefff;
  --javascript-color:#ffd93a;
  --javascript-color-light:#fbf6e1;
}

.{
  box-sizing:border-box;
}

body{

}

.calendar-container{
  width: 100%;
  max-width: 1200px;
  background-color: white;
  box-shadow: 0 2px 20px var(--gray-light);
  border-radius: 10px;
  overflow: hidden;
  margin: auto;
}
.calendar-header{
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--css-color);
}

.calendar-header p{
  font-size: 18px;
  margin: 5px;
  color: var(--gray-light);
  font-weight: bold;
}
.calendar{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  grid-template-rows: 50px;
  grid-auto-rows: 120px;
}
.day{
  text-align: right;
  padding: 7px 10px;
  border-bottom:1px solid var(--gray-light);
  border-right:1px solid var(--gray-light);
  font-size:12px;
  color: var(--gray-dark);
}
.day:nth-of-type(7n + 7){
  border-right: none;
}
.day:nth-of-type(n+1):nth-of-type(-n+7){
  grid-row: 2;
}
.day:nth-of-type(n+8):nth-of-type(-n+14){
  grid-row: 3;
}
.day:nth-of-type(n+15):nth-of-type(-n+21){
  grid-row: 4;
}
.day:nth-of-type(n+22):nth-of-type(-n+28){
  grid-row: 5;
}
.day:nth-of-type(n+29):nth-of-type(-n+35){
  grid-row: 6;
}
.day:nth-of-type(n+36):nth-of-type(-n+42){
  grid-row: 7;
}
.day:nth-of-type(7n+1){
  grid-column: 1/1; 
}
.day:nth-of-type(7n+2){
  grid-column: 2/2;
}
.day:nth-of-type(7n+3){
  grid-column: 3/3;
}
.day:nth-of-type(7n+4){
  grid-column: 4/4; 
}
.day:nth-of-type(7n+5){
  grid-column: 5/5;
}
.day:nth-of-type(7n+6){
  grid-column: 6/6;
}
.day:nth-of-type(7n+7){
  grid-column: 7/7;
}
.day-name{
  font-size: 12px;
  text-transform: uppercase;
  color: var(--css-color);
  text-align: center;
  line-height: 60px;
  font-weight: bold;
  border-bottom:1px solid var(--gray-light);
}
.day-disabled{
  background-image:url(../images/);
  cursor: not-allowed;
  color: var(--gray-light);
}
.task{
  border-left: 3px solid;
  padding: 8px 12px;
  margin: 10px;
  font-size: 14px;
}
.task-cuatro{
  
}
.task-seis{

}
.task-siete{
 
}
.task-ocho{
  
}
.task-nueve{
  
}
.task-diez{
  
}
.task-once{
  
}
.task-doce{
  
}
.task-trece{
  
}
.task-catorce{
  
}
.task-quince{
  
}
.task-dieciceis{
  
}
.task-diecisiete{
  
}
.task-dieciocho{
  
}
.task-diecinueve{
  
}
.task-veinte{
  
}
.task-veintidos{
  
}
.task-veintitres{
  
}
.task-veinticuatro{
  
}
.task-veinticinco{
  
}
.task-veintiseis{
  
}
.task-veintisiete{
  
}
.task-treinta{
  
}
.task-treintauno{
  
}
.task-detail{
  opacity: 0;
  transition: all 0.3s;
  position: absolute;
  margin-top: 15px;
  background-color: white;
  border: 1px solid var(--gray-light);
  padding: 20px;
  border-radius: 4px;
}
.task-detail h2{
  font-size: 15px;
  margin:0px;
  color: black;
}
.task-detail p{
  margin-top: 4px;
  font-size: 12px;
  margin-bottom: 0;
  color: black;
}
.task:hover .task-detail{
  opacity: 1;
 
}