@charset "UTF-8";

@font-face{
font-family: Gabarito;
  src: url(Gabarito-VariableFont_wght.ttf)
}

body{
  background-color:#e0f0e8;
  text-emphasis-color: #e0f0e8;
  text-align: center;
  display: flex;
  justify-content: center;
  font-family: Gabarito;
}

h1{
  color:#239d8d;
  font-size: 40px;
  text-align: center;
  margin: 19px;
}

footer{
  color: #239d8d;
  text-align: center;
  padding-top: 45px;
  padding-bottom: 20px;
  font-size: 15px;
}

.main-body{
  text-align: center;
}

/* .links{
  display: grid;
  grid-template-columns: repeat(2, 150px);
  gap: 25px;
  padding-top: 3.5%;
  padding-bottom: 1%;
  justify-content: center;
  transition: all 0.3s ease;
} */

/* .friends {
  background: #239d8d;
  color:#e0f0e8;
  padding: 1rem 2rem;
  border-radius: 10px;
  text-decoration: none;
  display: block;
  font-size: 20px;
} */

#title{
  top: 7px;
  left: 111px;
  width: 250px;
  height: auto;
  padding-top: 45px;;
}

.neuron-containers{
  padding-top: 5%;
  padding-bottom: 8%;
  display: grid;
  grid-template-columns: repeat(3, 99px);
  row-gap: 3%;
  column-gap: 107px;
  justify-content: center;
  margin-right: 117px;
  max-width: 100%;
}

.neurons{
  width: 220px;
  height: auto;
  padding-bottom: 5%;
  position: relative;
  object-fit: contain;
  transition-property: transform;
  transition-duration: 1s;
}

.neurons img{
  width: 70%;
  height:70%;
  justify-content: center;
  object-fit:contain;
  animation-name: rotate; 
  animation-duration: 2s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

a:visited{
  text-decoration: none;
  color: #e0f0e8;
}

a:hover .neuron-text{
  text-decoration: none;
  color: #e59492;
  transition: all 0.3s ease;
}

a:active{
  text-decoration: none;
  color:#239d8d;
}

.neuron-text{
  padding-top:10%;
  color:#239d8d;
  font-size: 20px;
}

a:link{
  text-decoration: none;
  color:#239d8d;
}

#button-link{
  justify-content: center;
  align-items: center;
  gap: 25%;
  width: 9rem;
  height: 4rem;
  padding: 1px;
}

button{
  font-size: 1.5rem;
  font-weight: 400;
  font-family: Gabarito;
  color: #e0f0e8;
  border: none;
  border-radius: 10px;
  background-color: #239d8d;
  text-align: center;
  transition: transform 0.2s ease-in-out;
  margin-right: 10px;
  margin-left: 10px;
}

button:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
  color: #e59492;
}

@media (max-width: 767px) {
  .neuron-containers {
    padding-top: 5%;
    padding-bottom: 8%;
    display: grid;
    grid-template-columns: repeat(2, 170px);
    row-gap: 5%;
    column-gap: 36px;
    margin-right: 45px;
  }

 #button-link{
  justify-content: center;
  align-items: center;
  gap: 25%;
  width: 9rem;
  height: 4rem;
  padding: 2px;
}

button{
  font-size: 1.5rem;
  font-weight: 400;
  font-family: Gabarito;
  color: #e0f0e8;
  border: none;
  border-radius: 10px;
  background-color: #239d8d;
  text-align: center;
  transition: transform 0.2s ease-in-out;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 20%;
}

footer{
  padding-top: 12%;
  padding-bottom: 1%;
  }
}