@import url(https://use.typekit.net/alo5tfq.css);
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Excon", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  background: radial-gradient(at 50% -25%, rgba(0, 204, 255, 0.3), transparent 35%), radial-gradient(at 100% 100%, rgba(0, 204, 255, 0.2), transparent 30%), radial-gradient(at -20% 60%, rgba(0, 204, 255, 0.1), transparent 35%), #323631;
}

main h1 {
  margin: 15px 2% 30px 2%;
}

.stn {
  background: #090909;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 40px 2%;
  border-radius: 8px;
  padding: 15px 20px;
  box-shadow: #111111 0px 0px 30px;
}
 .stn__donnee, .stn__progra{
  margin: 40px auto;
}
.stn span {
  color: #ef16e1;
}
@media (min-width: 600px) {
  .stn {
    max-width: 400px;
    margin: 40px auto;
  }

  }

@media (min-width: 1025px) {
  .stn {
    max-width: 100%;
  }
}

h1 {
  font-family: "strelka", sans-serif;
  text-align: center;
  /* width: 50%; */
  margin: 5%;
  padding-bottom: 30px;
  background-color: radial-gradient(at 50% -25%, rgba(0, 204, 255, 0.3), transparent 35%), radial-gradient(at 100% 100%, rgba(0, 204, 255, 0.2), transparent 30%), radial-gradient(at -20% 60%, rgba(0, 204, 255, 0.1), transparent 35%), #323631;
  background-size: 50%;
  line-height: 120%;
}
h1 span {
  font-family: "manifold-extd-cf", sans-serif;
  display: block;
  font-size: clamp(1.75rem, 0.8454rem + 4.1353vw, 3.946875rem);
  font-style: italic;
  font-weight: 300;
}

p {
  max-width: 75ch;
  margin: 15px 0;
}

img {
  width: 100%;
}

h2 {
  text-align: center;
  color: #00FF90;
  font-size: clamp(1.75rem, 1.5441rem + 0.9412vw, 2.25rem);
}

@media (min-width: 1025px) {
  .explication {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 150px repeat(2, 1fr);
    -moz-column-gap: 80px;
         column-gap: 80px;
    row-gap: 20px;
    margin: 20px 50px 20px 50px;
  }
  .explication h1 {
    grid-column: 1/-1;
  }
  .explication .stn__ideal {
    grid-row: 2/4;
    grid-column: 3;
  }
  .explication .stn__groupe {
    grid-row: 3;
    grid-column: 1/3;
  }
}

.stn__groupe {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  margin: auto;
}
.stn__groupe h2 {
  border-bottom: 1px solid #ffffff;
  padding-bottom: 5px;
}
.stn__groupe img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: auto 0;
}
.stn__groupe ul {
  list-style: none;
  padding: 10px;
}
.stn__groupe ul li {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 20px 0;
}
.stn__groupe ul li p {
  width: 150px;
  margin-left: 20px;
}
@media (min-width: 1025px) {
  .stn__groupe ul {
    display: flex;
    justify-content: space-around;
  }
  .stn__groupe ul li {
    padding: 10px 30px;
  }
}

footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.credits {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  margin-bottom: 20px;
}

@media (min-width: 1025px) {
  .devop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 150px repeat(2, 1fr);
    -moz-column-gap: 80px;
         column-gap: 80px;
    row-gap: 0px;
    margin: 20px 100px;
  }
}
.devop h1 {
  grid-column: 1/-1;
}
.devop .stn__progra, .devop .stn__donnee {
  grid-column: 1;
  margin: auto;
}
.devop .stn__design {
  grid-column: 2/-1;
  grid-row: 2/4;
}

.slider {
  width: 100%;
  position: relative;
}
.slider .nav__slider {
  display: flex;
  justify-content: space-between;
  list-style: none;
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(50%);
  width: 90%;
}
.slider .nav__slider svg {
  width: 30px;
  height: 30px;
  fill: #00FF90;
}
.slider .nav__slider svg:hover, .slider .nav__slider svg:focus {
  background-color: rgba(208, 204, 204, 0.636);
  transform: 0.2s;
}
.slider .slider__list {
  padding: 0;
  list-style: none;
}
.slider .slider__list h3 {
  font-size: clamp(1.3125rem, 1.1581rem + 0.7059vw, 1.6875rem);
  text-align: center;
}

.design {
  width: 100%;
}

.slider__el {
  display: none;
}
.slider__el.slider__el--show {
  display: block;
  transition: 0.2s;
}

.list__btn {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list__btn svg {
  width: 25px;
  fill: #00FF90;
  border: #00FF90 solid 1px;
  border-radius: 8px;
  padding: 10px;
}
.list__btn svg:hover, .list__btn svg:focus {
  background-color: rgba(208, 204, 204, 0.636);
  transform: 0.2s;
}

.projet {
  color: #00FF90;
  padding: 10px;
  border: #00FF90 solid 1px;
  border-radius: 8px;
  margin: 0 50px;
  display: flex;
  justify-self: center;
}
.projet:hover, .projet:focus {
  background-color: rgba(208, 204, 204, 0.636);
  transform: 0.2s;
}

a {
  color: #2bacf2;
  text-decoration: none;
}
a:hover, a:focus {
  color: #3ff7f1;
  transition: 0.2s;
}

.stn__credit {
  max-width: 500px;
}
.stn__credit ul {
  list-style: none;
}

@font-face {
  font-family: "Excon";
  src: url("../assets/polices/Excon-Variable.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

/*# sourceMappingURL=app.css.map*/