*{
  font-family: 'Lexend';
  padding:0;
  margin:0;

  --albastru: rgb(34, 92, 199);
  --albastru-inchis: rgb(3, 21, 48);
  --albastru-deschis: rgb(145, 184, 235);

  --turcoaz: rgb(172, 207, 240);
  --turcoaz-inchis: rgb(12, 118, 150);
}

body{
  background-color: var(--albastru-inchis);
}

h1, h2, h3, h4, h5{
  font-family: 'Oswald';
}

h1{
  font-size:36px;
  color:var(--turcoaz);
  text-shadow:0px 0px 10px var(--turcoaz-inchis);
}

nav{
  display:flex;
  flex-direction: column;
  width:100%;
  height:120px;
  justify-content:space-around;
  gap:10px;
  align-items: center;
  background-color: var(--albastru-inchis);
  /* background: linear-gradient(0deg, var(--albastru-inchis) 0%, rgb(27, 48, 92) 100%); */

  color:white;
  position:fixed;
  padding-bottom:1rem;
  z-index:99;
}

nav h1{
  /* margin-left:30px; */
  font-size:50px;
}

nav h1:hover{
  cursor:pointer;
}

.nav-right{
  display:flex;
  flex-direction:row;
  gap:10px;
  /* margin-right:30px; */
  font-size:16px;
}

.nav-right div{
  /* text-decoration: underline; */
  background-color: rgba(8, 52, 133, 0.329);
  padding:8px 14px;
  /* border: 2px solid var(--albastru); */
  border-radius: 400px;
  box-shadow: 0 0 3px var(--albastru);
}

.nav-right div:hover{
  cursor:pointer;
}

.main{
  padding-top:130px;
  padding-bottom:50px;
  background-color:var(--albastru-inchis);
  /* background: linear-gradient(180deg, rgb(3, 21, 48) 0%, rgb(17, 36, 75) 50%, rgb(27, 48, 92) 100%); */
  width:100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:60px;
}

.hero{
  margin-top:2rem;
  background-color: rgba(4, 71, 158, 0.253);
  width:85%;
  padding:1rem;
  border-radius: 1rem;
  color:rgb(228, 228, 228);

  display:flex;
  flex-direction: column;
  align-items: center;
  gap:1rem;
  font-size:20px;
  box-shadow: 0 0 3px var(--albastru);
}

.hero h1{
  font-size:50px;
}

.hero img{
  width:100%;
  height:200px;
  margin-bottom:1rem;
  object-fit: cover;
  border-radius:1rem;
}

.prezentare{
  display:flex;
  flex-direction: column;
  width:90%;
  justify-content: center;
  align-items: center;
  gap:2rem;
  font-size:18px;
}

.prez{
  display:flex;
  flex-direction: column;
  gap:2rem;
}

.prez-div-mare{
  background-color: var(--albastru-deschis);
  box-shadow:2px 2px 8px rgba(145, 184, 235, 0.562);
  color:var(--albastru-inchis);
  padding:1.5rem;
  border-radius:1rem;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:1rem;
}

.prez-litera{
  font-family: 'Oswald';
  font-size:42px;
}

.galerie{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  gap:2rem;
  width:95%;
  /* background-color: aqua; */
}

.galerie-grid{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap:10px;
  flex-wrap:wrap;
}

.galerie-grid img{
  width:47%;
  height:100px;
  background-color: white;
  box-shadow:0 0 10px var(--albastru);
  object-fit: contain;
  border-radius: 0.75rem;
}

.echipa{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:1rem;
}

.echipa-butoane{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:1rem;
}

.echipa-buton{
  width:9rem;
  height:3rem;
  font-size: 24px;
  border-radius: 10rem;
  border-style:solid;
  border-width:2px;
  border-color: var(--turcoaz);
  box-shadow:0 0 8px var(--turcoaz-inchis);
  transition:0.3s;

  background-color: var(--albastru-inchis);
  color:var(--turcoaz);
  text-shadow:0 0 8px var(--turcoaz-inchis);
  font-weight:bold;
}

.echipa-buton:hover{
  cursor:pointer;
}

.echipa-buton-activ{
  background-color: var(--albastru);
  transform: scale(1.1);
}

.echipa-grid{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap:10px;
  margin-top:0.5rem;
}

.echipa-membru{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  background-color: var(--albastru-inchis);
  border: 2px solid var(--albastru-deschis);
  box-shadow: 0 0 5px var(--albastru-deschis);

  color:var(--albastru-deschis);

  width:40%;
  height:100px;
  padding:0 10px;
  border-radius:0.5rem;
  font-family: 'Lexend';
}

.echipa-poza{
  width:90%;
  border-radius:1rem;
  margin-top:1rem;
  box-shadow: 0 0 8px var(--albastru-deschis);
}

.nota{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:1rem;
}

.nota-main{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:1rem;
  width:80%;
  padding:1.5rem;
  color:rgb(228, 228, 228);
  background-color: rgba(4, 71, 158, 0.253);
  border-radius:1rem;
  font-size:16px;
  text-align: justify;
  box-shadow: 0 0 3px var(--albastru);
}

.nota img{
  width:80%;
  border-radius: 0.5rem;
}

.nota a{
  padding:1rem;
  font-size:20px;
  border: 2px solid var(--albastru-deschis);
  border-radius:1rem;
  color:var(--albastru-deschis);
  background-color: var(--albastru-inchis);
  font-weight: bold;
  text-decoration: none;
}


a:visited{
  text-decoration: none;
}

@media screen and (min-width:550px){
  nav{
    flex-direction: row;
    justify-content: space-between;
  }

  .nav-right{
    padding-right: 4rem;
  }

  nav h1{
    padding-left: 4rem;
  }

  .hero{
    flex-direction: row;
    gap:4rem;
  }

  .hero div{
    width:90%;
  }

  .hero img{
    height:350px;
  }

  .prez{
    flex-direction: row;
  }

  .galerie-grid{
    gap:20px;
  }

  .galerie-grid img{
    height:150px;
    width:20%;
  }


  .echipa-grid{
    gap:1.25rem;
    width:90%;
  }

  .echipa-membru{
    width:12%;
  }

  .echipa-poza{
    width:50%;
  }

  #teoswag{
    width:100%;
  }

  .nota-main{
    flex-direction: column;
    width:50%;
  }

  .nota img{
    width:35%;
  }

}