/* Setup ---------------------------------------------------------------------- */

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*::selection { 
  background: none;
}
      
html { 
  background: #0F65D9;
}

body { 
  font-family: 'Mulish', sans-serif;
  color: #757D88;
}

/* Structure ------------------------------------------------------------------ */

.container {
  display: flex;
  flex-wrap: wrap;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 6vh 6vw 5vh;
  background: #FFF;
}

header {
  align-self: flex-start;
  position: relative;
  width: 90%;
  height: auto;
}

h1 { 
  font-size: .9rem;
  font-weight: 400;
  margin-bottom: 2.5vh;
}

h2 { 
  font-size: 2rem;
  font-weight: 400;
  color: #262c31;
  line-height: 2.7rem;
}

.companies {
  margin-top: 2rem;

}

.company {
  display: inline-block;
  padding: 12px 24px 13px;
  font-size: 1.05rem;
  margin-top: 2rem;
  color: hsl(199, 73%, 50%);
  background: hsl(199, 73%, 96%);
  text-decoration: none;
  border-radius:  50vh;
}

.company:hover {
  background: hsl(199, 73%, 94%);
}

.more {
  margin-top: 3rem;
  margin-left: 1.5rem;

  color: inherit;
  text-decoration: none;
}

.more:hover {
  color: #262C31;
}

.complementary {
  margin-top: 1.5rem;
  font-size: .92rem;
}

.complementary a {
  color: #262c31;
  text-decoration: none;
  margin-left: .125rem;
}

footer {
  align-self: flex-end; 
  position: relative;
  width: 100vw;
  height: auto;
}

nav {
  display: flex;
  justify-content: space-between;
}

nav a {
  display: block;
  color: inherit;
  text-decoration: none;
}

nav a:hover {
  color: #262C31;
  text-decoration: none;
}

nav a + a {
  margin-top: 1rem;
}

.link-li:hover { 
  color: #0077B5;
}

.link-wa:hover { 
  color: #0FB04B;
}

.link-insta:hover { 
  color: #cd2c79;
}

.select::selection { 
  color: #FFF;
  background: #0F65D9;
  padding: 1rem;
}

#icon {
  display: flex;
}

#icon img {
  align-self: flex-end;
}

.mobile-no {
    display: none;
  }

/* ---------------------------------------------------------------------------- */


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  .currently {
    padding: 8px 20px 10px;
    font-size: 1.1rem;
    margin-top: 2rem;
  }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .container {
    padding-top: 7vh;
  }

  header {
    width: 80%;
  }

  h2 {
    font-size: 2.3rem;
    line-height: 3.1rem;
  }

  nav a {
    display: inline-block;
    padding: 6px 0; 
  }

  nav a + a {
    padding-left: 1.5rem;
    margin-top: 0;
  }

  .mobile-yes {
    display: none;
  }

  .mobile-no {
    display: inline-block;
  }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .container {
    padding-top: 8.5vh;
  }

  header {
    width: 70%;
  }

  h2 {
    font-size: 2.7rem;
    line-height: 3.5rem;
  }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .container {
    padding-top: 10vh;
  }

  header {
    width: 50%;
  }

  h2 {
    font-size: 4rem;
    line-height: 118%;
  }

}