@import url("https://fonts.googleapis.com/css2?family=Amatic+SC&family=Roboto:wght@300;400;500;700;900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --primary-color: rgb(33, 133, 208);
  --primary-color-transparent: rgba(33, 133, 208, 0.5);
  --secondary-color: rgb(255, 175, 56);
  --black-transparent: rgba(0, 0, 0, 0.7);
  --background-color-grey: rgb(240, 240, 240);
  --box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

body {
  margin: 0;
  scroll-behavior: smooth;
  font-family: "Roboto Sans", sans-serif;
  ul {
    li {
      list-style-type: none;
    }
  }
  button {
    background-color: var(--primary-color);
    border: none;
    padding: 10px;
    color: white;
    cursor: pointer;
  }
  button:hover {
    color: var(--primary-color);
    background-color: white;
  }
  header {
    background-image: linear-gradient(
        to bottom left,
        var(--black-transparent),
        var(--primary-color-transparent)
      ),
      url(img/header_image.avif);
    background-size: cover;

    padding-bottom: 150px;
    color: white;
    nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0;
      img {
        margin-left: 40px;
        width: 58px;
        height: 46px;
      }
      ul {
        display: flex;
        align-items: center;
        li {
          margin: 0 8px;
        }
      }
    }
    hgroup {
      text-align: center;
      h1 {
        font-style: italic;
        font-weight: 900;
        font-size: 3em;
      }
    }
  }
  main {
    div.line {
      background-color: var(--primary-color);
      padding: 5px;
    }
    section#advantages {
      div.items {
        display: flex;
        flex-wrap: wrap;
        div.item {
          width: 50%;
          text-align: center;
          padding: 35px 0;
          img {
            width: 40px;
            height: 45px;
          }
        }
        div.item:first-of-type,
        div.item:last-of-type {
          background-color: var(--background-color-grey);
        }
      }
    }
    section#map {
      text-align: center;
      div.pictures {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        @media screen and (max-width: 750px) {
          flex-direction: column;
        }
        div {
          background-size: cover;
          width: 25%;
          margin-top: -30px;
          padding: 40px;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
          @media screen and (max-width: 750px) {
            width: 50%;
          }
          &:first-of-type {
            background-image: linear-gradient(
                var(--black-transparent),
                var(--black-transparent)
              ),
              url(img/item1.avif);
          }
          &:last-of-type {
            background-image: linear-gradient(
                var(--primary-color-transparent),
                var(--primary-color-transparent)
              ),
              url(img/item2.avif);
          }
        }
      }
      hgroup {
        padding: 120px 0 50px;
        h3,
        p {
          margin: 25px 0;
        }
      }
      div.choices {
        display: flex;
        div {
          border: lightgrey 1px solid;
          width: 33%;
          padding: 35px 0;
          img {
            width: 40px;
            height: 45px;
          }
        }
      }
    }
    section#resume {
      background-image: linear-gradient(
          to bottom left,
          var(--black-transparent),
          var(--primary-color-transparent)
        ),
        url(img/main_image.avif);
      background-position: center;
      padding: 70px 0;
      div.infos {
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
    }
  }
  footer {
    background-color: black;
    color: white;
    padding-bottom: 50px;
    padding-top: 50px;
    img {
      width: 58px;
      height: 46px;
    }
    div.end {
      display: flex;
      justify-content: space-around;
      div.infos,
      ul.contact {
        width: 25%;
        li {
          font-family: "Roboto Sans", sans-serif;
          margin-bottom: 15px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  body {
    footer {
      div.end {
        justify-content: center;
      }
      div.contact {
        margin-right: 10px;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  body {
    main {
      section#resume {
        h2 {
          width: 35%;
        }
        p {
          width: 45%;
        }
      }
    }
  }
}