@import url(https://fonts.googleapis.com/css?family=Lato);



html { 
  background: url(/images/background.webp) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  text-align: center;
}


conteiner{
  width: 50%;
  margin: auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

p{
  color: #9ffabd;
 
}
link:hover{
  color: aqua;
}
 h3{
  color: #ecf0f1;
  
}

h2{
 color: #ecf0f1;
 
}
h3:hover{
  color: #ecf0f1;
  
}

h1{
  color: #ecf0f1;
  
}




h1:hover{
color: aqua;
}

#inicio {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* background: #053f29 opacity:30%; */
}

#groups {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* background: #053f29; */
}

ul {
    position: absolute;
   top: 1%;
  display: flex;
  flex-direction: lines;
  align-items: start;
  list-style-type: none;
  border-color: yellowgreen;
  
  

  li {
    padding: 6px 0;
    margin:5px;

    a {
      position: relative;
      display: block;
      padding: 4px 0;
      font-family: Lato, sans-serif;
      color: #ecf0f1;
      text-decoration: none;
      text-transform: uppercase;
      transition: 0.5s;

      &::after {
        position: absolute;
        content: "";
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background: #3498db;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s;
      }

      &:hover {
        color: #95a5a6;
      }

      &:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }
    }
  }
}


.largura{
  align-items: center;
}


/* 
GRUPOS */

 
#gridd {
  padding: 40px 0;
  top:5%;
} 

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
}

.grid > article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(250, 245, 245, 0.63);
  background-color: rgb(33, 39, 21);
  

}

.grid > article img {
  max-width: 100%;
}

.grid .text {
  padding: 20px;
  
}