@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,700&display=swap");
body {
  background-color: #284e64;
  color: aliceblue;
  font-family: Lato;
  text-align: center;
  margin: 35px 20vw;
}

i {
  color: white;
}

i:hover {
  color: rgba(146, 148, 149, 0.171);
}

h1 {
  font-weight: 12px;
}
ul {
  padding-inline-start: 0px;
}
li {
  display: inline;
  margin: 10px;
}

.profile-pic {
  border-radius: 50%;
  max-width: 200px;
  max-height: 200px;
}

.block {
  margin-top: 25px;
  margin-bottom: 25px;
  background-color: #6d79813d;
  border: 0.5px solid white;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.voile {
  background-image: url("media/voilier.jpg") !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0px !important;
}

.filter {
  background-color: rgba(0, 0, 0, 0.25);
  margin: 0px;
  background-size: 100%;
  padding: 50px;
}

.hiking {
  background-image: url("media/hiking.jpg") !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0px !important;
}

.filter > h3,
.filter > p {
  margin: 0px !important;
  font-weight: 900;
}

@media (max-width: 960px) {
  /* For a screen < 960px, this CSS will be read */
  .container {
    width: 540px;
  }
}
@media (max-width: 720px) {
  /* For a screen < 720px, this CSS will be read */
  .container {
    width: 432px;
  }
}
@media (max-width: 540px) {
  /* For a screen < 540px, this CSS will be read */
  .container {
    width: 320px;
  }

  .profile-pic {
  }
}

@media (max-width: 360px) {
  /* For a screen < 540px, this CSS will be read */
  .container {
    width: 216px;
  }

  .profile-pic {
    max-width: 150px;
  }
}