/* Custom properties */
:root {
  --p-size: 1rem;
}

/* Global Styles */
body {
  margin: 0;
  font-size: 14px;
}

/* Headings */
h1 {
  font-family: "Sacramento", cursive;
  font-size: 3rem;
}

h2,
h3 {
  font-family: "Montserrat", sans-serif;
}

h2 {
  font-size: 2rem;
}

h3 {
  color: #11999e;
}

p {
  color: #40514e;
  line-height: 2;
  font-size: var(--p-size);
}

/* Horizontal Rule */
hr {
  border-top: 6px dotted #b4bbbb;
  width: 4%;
  margin: 50px auto;
  border-bottom: none;
}

/* Clouds */
.topCloud,
.bottomCloud {
  position: absolute;
}

/* Buttons */
.btn {
  background: #11cdd4;
  background-image: linear-gradient(to bottom, #11cdd4, #11999e);
  border-radius: 8px;
  color: #ffffff;
  font-family: "Montserrat";
  font-size: 20px;
  font-weight: 100;
  padding: 10px;
  border: solid #337fed 1px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  background: #30e3cb;
  background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
}

/* Links */
a:hover {
  color: #eaf6f6;
}

/* Small devices (mobile phones) */
@media (min-width: 320px) {
  body {
    font-size: 15px;
    color: #66bfbf;
    text-align: center;
  }

  /* Top Container */
  /* Container */
  #top-container {
    background-color: #eaf6f6;
    position: relative;
    width: 100%;
    padding-top: 100px;
  }

  .job-Title {
    font-size: 1.2rem;
  }

  /* Clouds */
  .topCloud,
  .bottomCloud {
    width: 80px;
  }

  .topCloud {
    top: 50px;
    right: 0;
  }

  .topCloud.horizTranslate {
    transition: 3s;
    right: 200px !important;
  }

  .bottomCloud {
    top: 200px;
    left: 0;
  }

  .bottomCloud.horizTranslate {
    transition: 3s;
    left: 200px !important;
  }

  .mountain {
    height: 200px;
    width: 250px;
  }

  /* Middle Container */
  /*  Container */
  #middle-container {
    background-color: white;
  }

  /* Profile Image */
  .profile-img {
    margin: 100px 0 25px;
    height: 25%;
    width: 25%;
    border-radius: 50%;
  }

  /* Intro Section */
  .intro,
  .code-skill,
  .coffee-skill,
  .contact-message {
    width: 60%;
    margin: auto;
  }

  /* Skills Container */
  /* Container */
  .code-skills,
  .coffeeImg {
    height: 50px;
    width: 50px;
  }

  .skills-coffee {
    margin-top: 80px;
  }

  /* Contact Message */
  .btn {
    margin-top: 30px;
  }

  /* Bottom Container */
  /* Container */
  #bottom-container {
    margin-top: 100px;
    background-color: #66bfbf;
    padding: 50px 0;
  }

  .footer-link-container {
    padding-left: 0;
  }

  .copyright {
    margin-bottom: 0;
    color: white;
  }

  /* List Items */
  li {
    display: inline-block;
  }

  li a {
    text-decoration: none;
    color: #11999e;
    margin: auto 10px;
    float: left;
    line-height: 2;
  }
}

@media (min-width: 375px) {
  body {
    font-size: 16px;
  }
}

/* Medium devices (tablets) */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }

  :root {
    --p-size: 1.125rem;
  }

  /* Top Container */
  /* Container */
  .mountain {
    height: 225px;
    width: 400px;
  }

  .topCloud,
  .bottomCloud {
    width: 150px;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }

  /* Top Container */
  /* Container */
  .mountain {
    height: 350px;
    width: 480px;
  }

  .topCloud,
  .bottomCloud {
    width: 200px;
  }

  h1 {
    font-size: 4rem;
  }

  :root {
    --p-size: 1.25rem;
  }

  /* Skills Container */
  /* Container */
  .skills-container {
    margin-bottom: 100px;
  }

  .code-skills,
  .coffeeImg {
    height: 150px;
    width: 150px;
  }

  .skills {
    display: flex;
    align-items: center;
    margin: 0 20%;
  }

  .skills-code {
    text-align: left;
  }

  .code-skill-content {
    margin-left: 20px;
  }

  .code-skill,
  .coffee-skill {
    width: 100%;
    margin: 0;
  }

  .skills-coffee {
    flex-direction: row-reverse;
  }

  .coffee-skill-content {
    text-align: right;
    margin-right: 20px;
  }
}

/* Large devices (laptops/desktops) */
@media (min-width: 1280px) {
  body {
    font-size: 22px;
  }

  h1 {
    font-size: 5rem;
  }

  :root {
    --p-size: 1.375rem;
  }

  .mountain {
    width: 550px;
  }
}

@media (min-width: 1440px) {
  body {
    font-size: 24px;
  }

  h1 {
    font-size: 6rem;
  }

  :root {
    --p-size: 1.5rem;
  }
}

@media (min-width: 1600px) {
  body {
    font-size: 26px;
  }

  h1 {
    font-size: 6rem;
  }

  :root {
    --p-size: 1.625rem;
  }
}