* {
  color: white;
}


html {
  background-color: hsl(190, 8%, 5%);
}

body {
  background-image: url(https://i.imgur.com/ASgpGku.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

h1, h2, h3, h4, p {
  voice-family: male;
  richness: 80;
  cue-before: url("beep.au")
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none;
  outline: none;
  background-color: green;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
}

#myBtn:hover {
  background-color: #555;
}

#icon {
  border-radius: 100%;
}

#about-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(https://i.imgur.com/5cc1YZF.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  border: solid black;
  border-width: thick;
  border-radius: 5px / 5px;
}

#name-slogan-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: hsl(0, 100%, 0%, 90%);
  padding: 0.8em 0.8em;
  box-shadow: 0.7em 0.8em 0.6em hsl(46, 9%, 3%);
  border: solid black;
  border-width: thick;
  border-radius: 25px / 25px;
}

#company-name {
  margin: 1.4em 0.8em 1em 0.8em;
  border: solid hsla(0, 0%, 5%, 1);
  border-radius: 60px;
  border-width: thick;
  box-shadow: 0.1em 0.1em 0.6em hsla(0, 0%, 51%, 0.85);
}

#slogan {
  font-size: 2.3rem;
  padding: 0 0.4em 0.4em 0.4em;
  background: -webkit-radial-gradient(darkgreen, limegreen);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: hsla(180, 58%, 15%, 0.678);
  text-shadow: 0.15rem 0.15rem hsla(0, 0%, 2%, 0.623);
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: auto;
  border: solid black;
  border-width: 0.2em;
  background-color: hsl(0, 100%, 0%, 60%);
  box-shadow: 0.7em 0.8em 0.6em hsl(46, 9%, 3%);
  border-radius: 25px / 25px;
  margin: 20em 5em 20em 5em;
  padding: 4em 2.5em;
}

#welcome-h1 {
  font-size: 2rem;
  margin: 1em auto;
}

#start {
  margin-bottom: 2em;
}

#beginning {
  font-size: 2rem;
  margin: 4em auto 1em auto;
}

#story,
#we-are {
  font-size: 1.6rem;
}

#team {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: auto;
  border: solid black;
  border-width: 0.2em;
  background-color: hsl(0, 100%, 0%, 60%);
  box-shadow: 0.7em 0.8em 0.6em hsl(46, 9%, 3%);
  border-radius: 25px / 25px;
  margin: auto 15em 2em 15em;
  padding: 2em 2.5em;
}

#meet {
  font-size: 2rem;
  margin: 1em auto;
}

#title {
  font-size: 1rem;
}

#owner-photo {
  height: auto;
  width: 18em;
  border: solid black;
}

#email {
  margin: 1em auto 0.6em auto;
}

#social {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6em auto;
}

#socialIcon {
  height: 60px;
  width: 70px;
  margin: 2em 6em;
  border: solid black;
  box-shadow: 0.7em 0.8em 0.6em hsl(46, 9%, 3%);
  border-radius: 10px;
  transition: 1s;
}

#socialIcon:hover {
  cursor: pointer;
  height: 70px;
  width: 80px;
  transition: 1s;
}

/* footer */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: hsl(100, 93%, 50%);
  padding-bottom: 0.5em
}

@media only screen and (max-width: 807px) and (min-width: 700px) {
  #name-slogan-container {
    width: 400px;
    height: 200px;
  }

  #company-name {
    width: 200px;
    height: 175px;
  }

  #slogan {
    font-size: 1.4rem;
  }

  #welcome-h1,
  #beginning {
    font-size: 2.6rem;
    line-height: 3rem;
  }

  #story,
  #we-are {
    font-size: 1.4rem;
  }

  #team {
    margin: auto 6em 2em 6em;
  }

  #meet {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 699px) and (min-width: 500px) {
  #name-slogan-container {
    margin: auto 4em auto 4em;
  }

  #company-name {
    height: auto;
    width: 70%;
  }

  #slogan {
    font-size: 1.8rem;
  }

  #welcome-h1,
  #beginning {
    font-size: 2.6rem;
    line-height: 3rem;
  }

  #story,
  #we-are {
    font-size: 1.4rem;
  }

  #team {
    margin: auto 6em 2em 6em;
  }

  #meet {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 499px) and (min-width: 350px) {
  #name-slogan-container {
    margin: auto 1em auto 1em;
  }

  #company-name {
    height: auto;
    width: 70%;
  }

  #slogan {
    font-size: 1.3rem;
    font-weight: 900;
    background: -webkit-radial-gradient(teal, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    text-shadow: 0.8rem 0.8rem hsl(188, 2%, 6%, 30%);
  }

  #container {
    margin: 20em 2em 20em 2em;
  }

  #welcome-h1,
  #beginning {
    font-size: 2.2rem;
    line-height: 2.6rem;
  }

  #story,
  #we-are {
    font-size: 1.4rem;
  }

  #team {
    margin: auto 2em 2em 2em;
  }

  #meet {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }

  #socialIcon {
    margin: 2em 2em;
  }
}

@media only screen and (max-width: 349px) and (min-width: 200px) {


  #name-slogan-container {
    margin: auto 1em auto 1em;
  }

  #company-name {
    height: auto;
    width: 70%;
  }

  #slogan {
    font-size: 1.3rem;
    font-weight: 900;
    background: -webkit-radial-gradient(teal, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    text-shadow: 0.8rem 0.8rem hsl(188, 2%, 6%, 30%);
  }

  #container {
    margin: 10em 0.6em 10em 0.6em;
  }

  #welcome-h1,
  #beginning {
    font-size: 1.8rem;
    line-height: 2rem;
  }

  #story,
  #we-are {
    font-size: 1rem;
  }

  #team {
    margin: auto 0.6em;
  }

  #meet {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }

  #socialIcon {
    margin: 2em 1em;
  }
}

footer {
  font-size: 0.6rem;
}