@font-face {
 font-family: Poppins;
 src: url("Fontes/Poppins-Regular.ttf");
}

@font-face {
 font-family: Material-Icone;
 src: url("Fontes/Icones/Material-Icon.ttf");
}

*{
  scroll-behavior: smooth;
  -webkit-transition: background 400ms linear, color 400ms linear;
  -moz-transition: background 400ms linear, color 400ms linear;
  -ms-transition: background 400ms linear, color 400ms linear;
  -o-transition: background 400ms linear, color 400ms linear;
  transition: background 400ms linear, color 400ms linear;
}
body {
 margin: 0;
 padding: 0;
 --tema: #000;
 --texto: #555;
 --fundo: #fff;
 --texto-dias: #777;
 --desabilitado: #ccc;
 --eventos: var(--tema);
 --texto-ds: #000;
 --fundo-cor: #fff;
 background: var(--fundo);
 font-family: Poppins,sans-serif;
 overflow: hidden;
}

body.dark{
 --fundo: #000;
 --texto: #fff;
 --texto-dias: #aaa;
 --desabilitado: #555;
 --texto-ds: #D0D0D0;
 --fundo-cor: #5D5D5D;
}


.calendario{
 background: var(--fundo);
 display: flex;
 flex-direction: column;
 justify-content: center;
 font-weight: bold;
 width: 100%;
}

#ano{
 margin: 0;
 margin-top: 10px;
 margin-left: 40px;
 color: var(--texto-dias);
}

#meses{
 display: grid;
 grid-template-columns: repeat(12,1fr);
 overflow-x: scroll;
 scroll-behavior: smooth;
}

#meses span{
 width: 100px;
 text-align: center;
 font-weight: bold;
 color: #aaa;
 font-size: 20px;
 padding-bottom: 5px;
}

#meses span.atual{
 color: var(--texto);
 position: relative;
}

#meses span.atual:after{
 position: absolute;
 content: '';
 bottom: 0;
 left: 40px;
 width: 20px;
 height: 7px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 background: var(--tema);
}

#ds{
 margin-top: 15px;
 display: grid;
 place-items: center;
 grid-template-columns: repeat(7,1fr);
 font-weight: bold;
 color: var(--texto-ds);
 margin-left: 20px;
 width: calc(100% - 40px);
}

#dias{
 margin-top: 20px;
 display: grid;
 grid-template-columns: repeat(7,1fr);
 grid-template-rows: repeat(6,1fr);
 place-items: center;
 width: calc(100% - 50px);
 margin-left: 25px;
 color: var(--texto-dias);
 grid-gap: auto;
}

#dias span{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vh;
}

#dias span.hide{
 color: var(--desabilitado);
}

#dias span.atual{
 background: var(--tema);
 color: #fff;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
}


.eventos{
 background: var(--eventos);
 border-top-left-radius: 30px;
 border-top-right-radius: 30px;
 color: #fff;
 text-align: center;
 overflow-x: hidden;
 overflow-y: scroll;
}


.dark .eventos
{
 filter: grayscale(50%)
}

.eventos h1{
 font-size: 22px;
 background: var(--tema);
 z-index: 10;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-transform: uppercase;
}


.eventos .card{
 width: calc(100% - 60px);
 margin: auto;
 border-left: 2px #fff dashed;
 position: relative;
 display: flex;
 align-items: center;
}

.eventos .card:after{
 left: -65px;
 top: -20px;
 position: absolute;
 content: attr(data-dia);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 30px;
 width: 30px;
 background: #fff;
 color: var(--tema);
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 margin-right: 20px;
 margin-left: 50px;
}

.eventos .card h2{
 font-size: 17px;
 text-align: left;
 margin-left: 30px;
 margin-bottom: 28px;
}


.menu{
 position: absolute;
 top: 20px;
 left: 150px;
 width: 70px;
 display: inline-flex;
 align-items: center;
 justify-content: space-between;
}

.menu span{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 30px;
 width: 30px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
 font-family: Material-Icone;
 text-transform: lowercase;
 font-size: 20px;
 color: var(--tema);
}

.menu span:active{
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
.cores{
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
 height: 100%;
 width: 100%;
 background: rgba(0,0,0,0.2);
}

.cores .bloco{
 height: 250px;
 width: 80%;
 background: var(--fundo-cor);
 margin: auto;
 margin-top: 50px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 display: flex;
 padding-bottom: 10px;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 
}

.cores .bloco p{
 font-weight: bold;
 font-size: 19px;
 color: var(--texto);
}

.cores #cr{
 display: grid;
 grid-template-columns: repeat(4,1fr);
 grid-gap: 10px;
 width: calc(100% - 30px);
 overflow: scroll;
}

.cores #cr span{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 40px;
 width: 40px;
 -webkit-border-radius: 40px;
 -moz-border-radius: 40px;
 border-radius: 40px;
 background: var(--cor);
}

.cores #cr span.atual:after{
 content: 'done';
 font-family: Material-Icone;
 color: #fff;
}

.cores .ctr{
 margin-top: 20px;
 display: flex;
 align-items: space-evenly;
 justify-content: flex-end;
 width: calc(100% - 30px);
}

.cores .ctr .btn{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: var(--texto);
 text-transform: uppercase;
 height: 30px;
 width: 100px;
}

.cores .ctr span:nth-child(1){
 margin-right: 20px;
}

.cores .ctr .btn:active{
 -webkit-transform: scale(0.8);
 -moz-transform: scale(0.8);
 -ms-transform: scale(0.8);
 -o-transform: scale(0.8);
 transform: scale(0.8);
}