*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
}
body
{  
    background-image: url(./img/papelazul\ com\ vermelho.jpg);
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow-x: hidden;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', 
}
.instrução
{   
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 0px 5vh 0px;
    position: relative;   
}
.instrução a
{   
    font-size: 20px; 
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: rgba(119, 118, 118, 0.73);
    color: #fff;
    padding: 5px 8px 5px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:20px 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 25px;
    text-decoration: none;
    margin-left: 10vh;

}
.instrução a:hover
{
    transform: scale(1.05, 1.05);
    background: rgb(119, 118, 118);
    
}
h1
{       
    font-size: 20px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #fff;
    text-align: center;
    background: rgba(255, 255, 255, 0.155);
    padding: 5px 8px 5px 8px;
    border-radius: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:20px 20px 50px rgba(0, 0, 0, 0.5);
}
h2{
    font-size: 15px;
}
p
{
    font-size: 15px;
}
.container
{   
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 2em;
    padding-bottom: 5rem;

}
.card
{
    width: 15em;
    height: 10em;
    background-color: rgba(72, 72, 72, 0.733);
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    
    display: flex;
    align-items: center;
    justify-content: center;



}
.card:hover
{   
    transform: scale(1.09, 1.09);
    transition: 0.5s;
}
.imagem-1
{
    width: 100%;
    height: 100%;
    background-image: url(./img/Ocupações\ Administrativas-img.jpg) ;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.imagem-2
{
    width: 100%;
    height: 100%;
    background-image: url(./img/a\ arte\ da\ sup-\ background.png) ;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.imagem-3
{
    width: 100%;
    height: 100%;
    background-image: url(./img/expressão\ verbal\ img.png) ;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.imagem-4
{
    width: 100%;
    height: 100%;
    background-image: url(./img/seguranca-da-informacao-img.jpg) ;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.imagem-5
{
    width: 100%;
    height: 100%;
    background-image: url(./img/info-basic-img.jpeg) ;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.imagem-6
{
    width: 100%;
    height: 100%;
    background-image: url(./img/manutencao-img.jpg) ;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.imagem-7
{
    width: 100%;
    height: 100%;
    background-image: url(./img/office-img.jpg) ;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.imagem-8
{
    width: 100%;
    height: 100%;
    background-image: url(./img/bus.jpg) ;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.text
{   
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    transform: translateY(20px);
    opacity: 0;
    transition: 0.5s;
    background-size: cover;
    backdrop-filter: blur(3px);
}
.container .card .text:hover 
{
    transform: translateY(0px);
    opacity: 1;
}
p
{
    text-align: center;
}
.text a
{
    text-decoration: none;
    display: inline-block;
    padding: 5px 10px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.763);
    
    color: black;
    border-radius: 20px;
    font-weight: 500;
    font-size: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.text a:hover
{   
    background: rgb(255, 255, 255);
    transform: scale(1.05, 1.05);
    transition: 0.2s;
}

@media (max-width:800px)
{
    .container
{
    display: grid;
    grid-template-columns: 1fr 1fr ;
    
    gap: 5em;

}
}
@media (max-width:600px)
{
    .container
{
    display: grid;
    grid-template-columns: 1fr ;
    
    gap: 2em;

}
.card
{
    width: 15em;
    height: 10em;
}
.instrução a
{
    padding: 5px 6px 5px 6px;
    margin-left: 3vh;
}
h1
{
    padding: 5px 6px 5px 6px;
}
}
@media (max-width:320px)
{
    #none
    {
        display: none;
    }
    .instrução a
    {
        margin-left: 0vh;
    }
}