@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Edu+NSW+ACT+Cursive:wght@400..700&display=swap');

h1{
    font-family: "Edu NSW ACT Cursive", cursive;
    text-decoration: underline;
}

.principal{
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

/* BOTÕES DE EXPORTAR E IMPORTAR LOCAL STORAGE */
#buttons{
    margin-top: 50px;
    margin-bottom: 30px;
}

#video{
    margin-bottom: 30px; 
}

#video > h2{
    font-family: "Edu NSW ACT Cursive", cursive;
    text-align: center;
}

#exportar{
 display: none;
}

.export_label{
    margin-right: 10px;
    background-color: red;
    border: 2px solid black;
    color: white;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.export_label:hover, #limpar:hover{
    background-color: white;
    color: red;
}

#importar{
  display: none;
}

.import_label{
    margin-right: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid black;
    background-color: var(--verde-principal);
    cursor: pointer;
    color: white;
}

.import_label:hover{
    background-color: var(--fundo-claro);
    color: var(--verde-principal);
}

#limpar{
    background-color: red;
    border: 2px solid black;
    color: white;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

#limpar:hover{
    background-color: white;
    color: red;
}


details{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 5px;
    width: 220px;
    margin: 10px;
    border: 3px solid red;


}
summary{
    padding: 5px;
    text-align: center;
    cursor: pointer;
}