@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap");
:root {
  --background: #5C6672;  /* Background */
  --panel: #313E50; /* Header & Footer*/
  --text-color: #8fa096; /* Boutons */
  --text-hover: #8fa096; 
  --text-color: #E4E4E4;  /* Couleurs pr le texte */
  --btext-color: #242424;
  --subtext-color: #e3e3e3;
}

* {
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--background);
}

header {
  border-radius: 0px;
  background-color: var(--panel);
}

.space {
  padding-bottom: 40px;
  text-align: center;
}

.space hr {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-color)
}

nav {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon {
  display: flex;
  align-items: center;
}

.icon img {
  width: 5em;
  height: 5em;
}

.icon p {
  margin-left: 14%;
  font-size: 34px;
  font-family: "Ubuntu";

  color: var(--text-color);
}

.links {
  width: 50%;
}

.links ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.links li {
  list-style-type: none;
}

.links a {
  text-decoration: none;

  font-size: 28px;
  font-family: "Ubuntu";

  color: var(--text-color);
  cursor: pointer;

  padding-bottom: 0% 0.1em;
  background-image: linear-gradient(var(--text-hover), var(--text-hover));
  background-size: 0% 0.1em;
  background-position-y: 110%;
  background-position-x: 50%;
  background-repeat: no-repeat;
  transition: background-size 0.4s;
}

.links a:hover {
  background-size: 100% 0.16em;
}

.links img {
  width: 3.2em;
  height: 3.2em;

  cursor: pointer;
  
  transition: all 0.4s;
}

.links img:hover {
  width: 3.6em;
  height: 3.6em;
}

footer {
  height: 2em;
  display: flex;
  align-items: center;
  background-color: var(--panel);
}

footer p {
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  font-family: "Ubuntu";
  color: var(--text-color);
}

/* Media Query for Mobile */
@media screen and (max-width: 680px) {

  .icon img {
    width: 3em;
    height: 3em;
  }

  .icon p {
    font-size: 24px;
  }

  .links a {
    font-size: 20px;
  }

  footer p {
    font-size: 16px;
  }

  .links img {
    width: 2.2em;
    height: 2.2em;
  }
  
  .links img:hover {
    width: 2.6em;
    height: 2.6em;
  }

}