/* Define para todo documento HTML as propriedades */
* { 
    margin: 0;
    padding: 0;
    font-family: 'Golos Text', sans-serif;
}

html{
    scroll-behavior: smooth;
    background-image: linear-gradient(#012e53, #010f4e, #46036d);
    
}
/* 
body{
    background-size:50%;
    background-color: #030124;
    background-image: url("img/cabecalho.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
} */

/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #030124;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* Change background on mouse-over */
  .navbar a:hover {
    background: #ddd;
    color: black;
  }
  
  /* Main content */
  .main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
  }

.programacao {
    color: white;
    display:flex;
    justify-content:center;
    align-items: center;
    padding: 24px 0;
}

.programacao-titulo {
    padding: 24px 0;
}

.programacao-texto {
    padding: 6px 0;
}

.programacao-conteudo {
    text-align: justify;
    width: 50%;
}

.programacao-imagem {
    width: 30%;
    padding-left: 5%;
}

.ferramenta {
    color: white;
    justify-content:center;
    align-items: center;
    padding: 24px 0;
}

.ferramenta-titulo{
    text-align: center;
    padding: 50px 0;
}

.ferramenta-grid {
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.ferramenta-imagem{
    width: 75%;
}

.ferramenta-imagem:hover{
    filter: drop-shadow(0 0 0.75rem white);
}

.ferramenta-div {
    text-align: center;
    align-self: center;
    padding-bottom: 20%;
}

.aula {
    color: white;
    justify-content:center;
    align-items: center;
    padding: 24px 0;
}

.aula-titulo{
    text-align: center;
    padding: 50px 0;
}

.aula-grid {
    display:grid;
    grid-template-columns: 33% 34% 33%;
}

.aula-imagem{
    width: 50%;
}

.aula-div{
    text-align: center;
    padding: 32px ;
}

.aula-list-div{
    text-align: left;
    padding: 0px 64px;
}

.aula-icone{
    vertical-align: middle;
    width:32px;
    padding: 16px;
}

.aula-icone:hover{
    filter: invert(1);
}

@media (max-width: 720px){
    .ferramenta-grid {
        display:grid;
        grid-template-columns: 50% 50%;
    }
  }

  @media (max-width: 300px){
    .ferramenta-grid {
        display:grid;
        grid-template-columns: 100%;
    }
}