Как вытащить sh (под) контейнер, когда моя кнопка «Подробнее» расширилась?

Question

Мне нравится то, что я здесь создал, и функциональность / действие работает по своему вкусу. Однако я должен был применить высоту к красному контейнеру (id = "приветствие"), чтобы расширенный текст хорошо подходил при расширении. Поэтому под кнопкой остается некрасивое пространство, когда я хочу, чтобы состояние кнопки «Подробнее» было flu sh по отношению к нижнему контейнеру (id = «skill»). Цель: убрать контейнер *skills на * * 1010 при нажатии кнопки «Подробнее».

var i = 0;

function read() {
  if (!i) {
    document.getElementById('more').style.display = 'inline';
    document.getElementById('dots').style.display = 'none';
    document.getElementById('read').innerHTML = 'Read Less';
    i = 1;
  } else {
    document.getElementById('more').style.display = 'none';
    document.getElementById('dots').style.display = 'inline';
    document.getElementById('read').innerHTML = 'Read More';
    i = 0;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Open+Sans:wght@600;700&display=swap");
.container {
  max-width: 1280px;
  padding: 0 1.5rem;
  margin: auto;
  overflow: hidden;
}

.contact-container {
  max-width: 800px;
  padding: 0 1.5rem;
  margin: auto;
  overflow: hidden;
}

.contact-btn {
  width: 40%;
  background-color: #082449;
  color: #f7f7f5;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.5rem 2rem;
  border: none;
}

.contact-btn:hover {
  background-color: transparent;
  border: 1px solid #082449;
  color: #082449;
  transition: ease 0.4s;
}

.btn-light {
  background-color: #f7f7f5;
  color: #082449;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.5rem 2rem;
  border: none;
}

.btn-light:hover {
  background-color: transparent;
  border: 1px solid #f7f7f5;
  color: #f7f7f5;
  transition: ease 0.4s;
}

.btn-dark {
  background-color: #082449;
  color: #f7f7f5;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  border: none;
}

.btn-dark:hover {
  background-color: transparent;
  border: 1px solid #082449;
  color: #082449;
  transition: ease 0.4s;
}

.t-center {
  text-align: center;
}

.lead {
  text-align: center;
}

.bottom-line {
  border: 1px solid #f43d56;
  width: 80px;
  margin: 2rem auto;
}

.py-1 {
  padding: 1rem 0rem;
}

.py-2 {
  padding: 2rem 0rem;
}

.py-3 {
  padding: 3rem 0rem;
}

.py-4 {
  padding: 4rem 0rem;
}

.my-1 {
  margin: 1rem 0rem;
}

.my-2 {
  margin: 2rem 0rem;
}

.my-3 {
  margin: 3rem 0rem;
}

.my-4 {
  margin: 4rem 0rem;
}

.items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.3);
}

.item {
  position: relative;
  background: #f43d56;
  overflow: hidden;
}

.item::after {
  content: '';
  position: absolute;
  display: block;
  background: inherit;
  opacity: 0.9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(2) translateX(-75%) translateY(-75%);
  transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
}

.item:hover:after {
  transform: scale(2);
}

.item:hover .item-text {
  opacity: 1;
  transform: translateY(0);
}

.item-image {
  height: auto;
  transform: translateZ(0);
  transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
  display: block;
}

.item-image::before {
  content: '';
  display: block;
  padding-top: 55%;
  overflow: hidden;
}

.item-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  line-height: 0;
}

.item-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  z-index: 1;
  color: #f7f7f5;
  transform: translateY(-20%);
  transition: opacity 500ms cubic-bezier(0.3, 1.5, 0.4, 1), transform 500ms cubic-bezier(0.3, 1.5, 0.4, 1);
  transition-delay: 200ms;
}

.item-text-wrap {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.item-text-title {
  font-size: 2rem;
  padding: 0 1rem;
  margin: 5px 0 0 0;
}

.item-text-category {
  text-transform: uppercase;
  font-size: 1.3rem;
  opacity: 0.8;
}

.item .item-button {
  margin-top: 1.5rem;
}

.item .item-button:hover {
  background-color: transparent;
  border: 1px solid #f7f7f5;
  color: #f7f7f5;
  transition: ease 0.4s;
}

#skills {
  margin: -7rem 0 0 0;
}

#skills .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  background-color: #f7f7f5;
  border-radius: 10px;
}

#skills .card:first-of-type {
  border-right: 1px solid #ccc;
  padding: 1rem;
}

#skills .card {
  padding: 1rem;
}

#skills .skill-list h2 {
  color: #f43d56;
}

#skills i.fa-3x {
  margin-top: 2rem;
  color: #f43d56;
}

#skills ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

#skills li {
  padding: 0.5rem;
  margin-right: 0.5rem;
}

#skills h2 {
  padding: 1rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #f7f7f5;
  font-family: 'Lato', sans-serif;
  line-height: 1.8;
  letter-spacing: 1.3px;
  font-weight: 300;
  color: #082449;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

#logo {
  width: 70px;
  height: 70px;
  margin-left: 4rem;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  margin: 0 3rem;
  background-color: #f7f7f5;
}

#main-nav ul {
  display: flex;
}

#main-nav li {
  padding: 1rem 1.5rem;
}

#main-nav a {
  color: #082449;
  border: 1px solid #f43d56;
  border-radius: 4px;
  padding: 0.5rem 2rem;
}

#main-nav a:hover {
  background-color: #f43d56;
  color: #f7f7f5;
  transition: ease 0.4s;
}

#showcase {
  flex-direction: column;
  display: flex;
  height: 60vh;
  align-items: center;
  background-color: #f7f7f5;
}

#showcase h1 {
  padding: 1rem;
  margin-top: 3rem;
}

#showcase p {
  font-size: 1.3rem;
}

#showcase img {
  width: 100%;
}

#greeting {
  background-color: #f43d56;
  color: #f7f7f5;
  height: 70vh;
}

#greeting h1 {
  padding: 1rem;
  margin-top: 3rem;
  font-size: 32px;
}

#greeting p {
  margin: 1rem auto;
  max-width: 800px;
  text-align: center;
}

#greeting #more {
  display: none;
}

#greeting .btn-light {
  display: flex;
  flex-direction: column;
  margin: auto;
  text-align: center;
}

#contact-a h3 {
  margin-top: 10%;
}

#contact-a .text-fields {
  display: grid;
  grid-template-areas: 'name email' 'subject phone' 'message message';
  grid-gap: 1rem;
  margin: 3rem 0 2rem 0;
}

#contact-a .text-fields .name-input {
  grid-area: name;
}

#contact-a .text-fields .subject-input {
  grid-area: subject;
}

#contact-a .text-fields .email-input {
  grid-area: email;
}

#contact-a .text-fields .phone-input {
  grid-area: phone;
}

#contact-a .text-fields .message-input {
  grid-area: message;
  height: 100px;
}

#contact-a .text-fields .text-input {
  padding: 0.3rem 0.6rem;
  border: solid 1px #ccc;
  border-radius: 4px;
}

#contact-a .contact-container .btn-dark {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 30%;
  text-align: center;
}

#contact-b .contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  margin: 0 0 4rem 0;
}

#main-footer {
  background: #082449;
  color: #f7f7f5;
  height: 5rem;
}

#main-footer .footer-content {
  display: flex;
  justify-content: space-evenly;
  height: 5rem;
  align-items: center;
  font-size: 0.8rem;
}

#main-footer .social .fab {
  color: #f7f7f5;
  margin-right: 1.5rem;
  border-radius: 50%;
  padding: 0.5rem;
  font-size: 1.3rem;
  text-align: center;
}

#main-footer .social .fab:hover {
  background: #f43d56;
}

@media (max-width: 1300px) {
  #showcase {
    min-height: 100vh;
    position: relative;
  }
  #greeting {
    height: 90vh;
  }
}

@media (max-width: 800px) {
  #showcase {
    min-height: 50vh;
  }
  #showcase p {
    padding: 1rem;
    text-align: center;
  }
  #showcase h1 {
    font-size: 1.5rem;
  }
  #work-a .item-text-title {
    font-size: 1.2rem;
    padding: 1rem;
  }
  #work-a .item-text-category {
    font-size: 1rem;
    margin-top: 1rem;
  }
  #greeting {
    height: 65vh;
  }
  #greeting .container {
    padding: 0 2rem;
  }
  #skills .cards {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  #skills .card:first-of-type {
    border-right: none;
  }
  #skills ul {
    display: block;
    padding: 1rem;
  }
}


/*===================PHONES==================================

============================================================*/

@media (max-width: 500px) {
  #main-nav {
    flex-direction: column;
    align-items: center;
  }
  #main-nav #logo {
    margin: 1rem 0;
  }
  #main-nav li {
    padding: 1rem;
    margin-top: 2rem;
  }
  #showcase {
    height: 85vh;
  }
  #showcase p {
    padding: 1rem;
    text-align: center;
  }
  #showcase img {
    width: 300px;
    margin: auto;
    text-align: center;
  }
  #showcase h1 {
    font-size: 1.5rem;
  }
  #greeting {
    height: 140vh;
  }
  #greeting h1 {
    font-size: 1.5rem;
  }
  #skills .cards {
    grid-template-columns: 1fr;
    width: 100%;
    display: block;
  }
  #skills .card:first-of-type {
    border-right: none;
  }
  #skills ul {
    display: block;
    padding: 1rem;
  }
  #work-a .container {
    padding: 0 1rem;
  }
  #work-a .items {
    grid-template-columns: 1fr;
    width: 100%;
    grid-row-gap: 0.5rem;
  }
  #work-a .items .item-image {
    width: 100%;
  }
  #work-a .items .item-text-category {
    font-size: 0.9rem;
    margin-top: 1.8rem;
  }
  #work-a .items .item-text-title {
    font-size: 0.9rem;
  }
  #main-footer .footer-content {
    flex-direction: column-reverse;
    font-size: 0.6rem;
    padding-bottom: 1rem;
  }
  #main-footer .social .fab {
    font-size: 1.2rem;
    padding: 0 1rem;
    margin: 1rem 0;
  }
  #contact-a .text-fields {
    display: grid;
    grid-template-areas: 'name' 'email' 'phone' 'subject' 'message';
    grid-gap: 1rem;
    margin: 2rem 0;
  }
  #contact-b .contact-info {
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
    padding: 0;
  }
}

@media (max-height: 500px) {
  #showcase {
    height: 85vh;
  }
  #showcase img {
    width: 250px;
    margin: auto;
    text-align: center;
  }
  #showcase h1 {
    font-size: 1.5rem;
  }
  #greeting {
    height: 190vh;
  }
  #greeting h1 {
    font-size: 1.2rem;
  }
  #skills .cards {
    grid-template-columns: 1fr;
    width: 100%;
    display: block;
  }
  #skills .card:first-of-type {
    border-right: none;
  }
  #skills ul {
    display: block;
    padding: 1rem;
  }
  #work-a .items {
    grid-template-columns: 1fr;
    width: 100%;
    grid-row-gap: 1rem;
  }
  #work-a .items .item-image {
    width: 100%;
  }
  #work-a .items .item-text-title {
    font-size: 0.9rem;
    margin: 0.8rem 0;
  }
}

<section id="greeting" class="rellax" data-rellax-speed="3">
  <div class="container" data-rellax-speed="-1">
    <h1 class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
      Hi, I'm Jon. Nice to meet you.
    </h1>
    <p class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
      I am a recent graduate of the Borough of Manhattan Community College where I pursued a degree in Multimedia Programming with a specialization in Frontend Web Development and Graphic Design I offer an attention to detail, analysis, and problem solving
      that will serve me well as a Frontend Developer. I enjoy working across various programs and platforms from Sketch or XD to SASS/JS/REACT and NODE to name a few. In my recent internship at Interactive One, I was able to apply this skill set in the
      development of personalized landing pages and digital marketing campaigns on sites hosted on WordPress VIP.<span id="dots">...</span
          ><span id="more">
            I also find WordPress Development to be engaging as well, especially
            theme customization and incorporating raw coding techniques to
            create a unique end product. My specialties include: Prototyping in
            Adobe XD. Building in HTML/CSS, JavaScript and React. All aspects of
            the WordPress and Squarespace platforms. I have had the chance to
            work with Firebase creating an original Blog and also the P5.js
            library creating animated projects, games and data
            visualization.</span
          >
        </p>
        <button
          type="button"
          id="read"
          class="btn-light t-center"
          onclick="read()"
        >
          Read More
        </button>
      </div>
    </section>

<!-- Section Skills -->
    <section
      id="skills"
      class="t-center py-3 rellax"
      data-rellax-xs-speed="2"
      data-rellax-speed="1.5"
      data-rellax-tablet-speed="0"
    >
      <div class="container">
        <div class="cards">
          <div class="card">
            <div>
              <i class="fas fa-code fa-3x"></i>
              <h2>Frontend Developer</h2>
              <p>
                I aim for an original, clean and streamlined approach. I
                especially enjoy coding from scratch and exploring new
                techniques.
              </p>
              <div class="skill-list">
                <h2>My Languages:</h2>
                <ul>
                  <li>
                    <i class="fab fa-js"></i>
                    <p>javascript</p>
                  </li>
                  <li>
                    <i class="fab fa-react"></i>
                    <p>react</p>
                  </li>
                  <li>
                    <i class="fab fa-sass"></i>
                    <p>sass</p>
                  </li>
                  <li>
                    <i class="fab fa-node"></i>
                    <p>node.js</p>
                  </li>
                  <li>
                    <i class="fas fa-database"></i>
                    <p>firebase</p>
                  </li>
                  <li>
                    <i class="fas fa-file-code"></i>
                    <p>html5 / css3</p>
                  </li>
                </ul>
              </div>

              <div class="skill-list">
                <h2>Developer Tools:</h2>
                <ul>
                  <li>
                    <i class="fas fa-file-alt"></i>
                    <p>VS-Code</p>
                  </li>
                  <li>
                    <i class="fab fa-bootstrap"></i>
                    <p>Bootstrap</p>
                  </li>
                  <li>
                    <i class="fab fa-codepen"></i>
                    <p>Codepen</p>
                  </li>
                  <li>
                    <i class="fab fa-github"></i>
                    <p>Github</p>
                  </li>
                  <li>
                    <i class="fab fa-wordpress"></i>
                    <p>WordPress</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="card">
            <div>
              <i class="fas fa-bezier-curve fa-3x"></i>
              <h2>Graphic Design</h2>
              <p>
                I value simple content structure, clean design patterns, and
                thoughtful interactions.
              </p>
              <div class="skill-list">
                <h2>What I like to design:</h2>
                <ul>
                  <li>
                    <i class="fab fa-sketch"></i>
                    <p>ux / ui</p>
                  </li>
                  <li>
                    <i class="fas fa-wifi"></i>
                    <p>web</p>
                  </li>
                  <li>
                    <i class="fas fa-mobile"></i>
                    <p>mobile</p>
                  </li>
                  <li>
                    <i class="fab fa-app-store-ios"></i>
                    <p>apps</p>
                  </li>
                  <li>
                    <i class="fas fa-bezier-curve"></i>
                    <p>logos</p>
                  </li>
                </ul>
              </div>

              <div class="skill-list">
                <h2>Design Tools:</h2>
                <ul>
                  <li>
                    <i class="fas fa-align-center"></i>
                    <p>Sketch</p>
                  </li>
                  <li>
                    <i class="fab fa-figma"></i>
                    <p>Figma</p>
                  </li>
                  <li>
                    <i class="fab fa-adobe"></i>
                    <p>Adobe Suite</p>
                  </li>
                  <li>
                    <i class="fas fa-drafting-compass"></i>
                    <p>Draw</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

Answer 1

Снимите фиксированную высоту # приветствия, и он сделает это. Это расширится с его содержанием

var i = 0;

function read() {
  if (!i) {
    document.getElementById('more').style.display = 'inline';
    document.getElementById('dots').style.display = 'none';
    document.getElementById('read').innerHTML = 'Read Less';
    i = 1;
  } else {
    document.getElementById('more').style.display = 'none';
    document.getElementById('dots').style.display = 'inline';
    document.getElementById('read').innerHTML = 'Read More';
    i = 0;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Open+Sans:wght@600;700&display=swap");
.container {
  max-width: 1280px;
  padding: 0 1.5rem;
  margin: auto;
  overflow: hidden;
}

.contact-container {
  max-width: 800px;
  padding: 0 1.5rem;
  margin: auto;
  overflow: hidden;
}

.contact-btn {
  width: 40%;
  background-color: #082449;
  color: #f7f7f5;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.5rem 2rem;
  border: none;
}

.contact-btn:hover {
  background-color: transparent;
  border: 1px solid #082449;
  color: #082449;
  transition: ease 0.4s;
}

.btn-light {
  background-color: #f7f7f5;
  color: #082449;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.5rem 2rem;
  border: none;
}

.btn-light:hover {
  background-color: transparent;
  border: 1px solid #f7f7f5;
  color: #f7f7f5;
  transition: ease 0.4s;
}

.btn-dark {
  background-color: #082449;
  color: #f7f7f5;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  border: none;
}

.btn-dark:hover {
  background-color: transparent;
  border: 1px solid #082449;
  color: #082449;
  transition: ease 0.4s;
}

.t-center {
  text-align: center;
}

.lead {
  text-align: center;
}

.bottom-line {
  border: 1px solid #f43d56;
  width: 80px;
  margin: 2rem auto;
}

.py-1 {
  padding: 1rem 0rem;
}

.py-2 {
  padding: 2rem 0rem;
}

.py-3 {
  padding: 3rem 0rem;
}

.py-4 {
  padding: 4rem 0rem;
}

.my-1 {
  margin: 1rem 0rem;
}

.my-2 {
  margin: 2rem 0rem;
}

.my-3 {
  margin: 3rem 0rem;
}

.my-4 {
  margin: 4rem 0rem;
}

.items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.3);
}

.item {
  position: relative;
  background: #f43d56;
  overflow: hidden;
}

.item::after {
  content: '';
  position: absolute;
  display: block;
  background: inherit;
  opacity: 0.9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(2) translateX(-75%) translateY(-75%);
  transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
}

.item:hover:after {
  transform: scale(2);
}

.item:hover .item-text {
  opacity: 1;
  transform: translateY(0);
}

.item-image {
  height: auto;
  transform: translateZ(0);
  transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
  display: block;
}

.item-image::before {
  content: '';
  display: block;
  padding-top: 55%;
  overflow: hidden;
}

.item-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  line-height: 0;
}

.item-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  z-index: 1;
  color: #f7f7f5;
  transform: translateY(-20%);
  transition: opacity 500ms cubic-bezier(0.3, 1.5, 0.4, 1), transform 500ms cubic-bezier(0.3, 1.5, 0.4, 1);
  transition-delay: 200ms;
}

.item-text-wrap {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.item-text-title {
  font-size: 2rem;
  padding: 0 1rem;
  margin: 5px 0 0 0;
}

.item-text-category {
  text-transform: uppercase;
  font-size: 1.3rem;
  opacity: 0.8;
}

.item .item-button {
  margin-top: 1.5rem;
}

.item .item-button:hover {
  background-color: transparent;
  border: 1px solid #f7f7f5;
  color: #f7f7f5;
  transition: ease 0.4s;
}

#skills {
  margin: 0 0 0 0;
}

#skills .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  background-color: #f7f7f5;
  border-radius: 10px;
}

#skills .card:first-of-type {
  border-right: 1px solid #ccc;
  padding: 1rem;
}

#skills .card {
  padding: 1rem;
}

#skills .skill-list h2 {
  color: #f43d56;
}

#skills i.fa-3x {
  margin-top: 2rem;
  color: #f43d56;
}

#skills ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

#skills li {
  padding: 0.5rem;
  margin-right: 0.5rem;
}

#skills h2 {
  padding: 1rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #f7f7f5;
  font-family: 'Lato', sans-serif;
  line-height: 1.8;
  letter-spacing: 1.3px;
  font-weight: 300;
  color: #082449;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

#logo {
  width: 70px;
  height: 70px;
  margin-left: 4rem;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  margin: 0 3rem;
  background-color: #f7f7f5;
}

#main-nav ul {
  display: flex;
}

#main-nav li {
  padding: 1rem 1.5rem;
}

#main-nav a {
  color: #082449;
  border: 1px solid #f43d56;
  border-radius: 4px;
  padding: 0.5rem 2rem;
}

#main-nav a:hover {
  background-color: #f43d56;
  color: #f7f7f5;
  transition: ease 0.4s;
}

#showcase {
  flex-direction: column;
  display: flex;
  height: 60vh;
  align-items: center;
  background-color: #f7f7f5;
}

#showcase h1 {
  padding: 1rem;
  margin-top: 3rem;
}

#showcase p {
  font-size: 1.3rem;
}

#showcase img {
  width: 100%;
}

#greeting {
  background-color: #f43d56;
  color: #f7f7f5;
   
}

#greeting h1 {
  padding: 1rem;
  margin-top: 3rem;
  font-size: 32px;
}

#greeting p {
  margin: 1rem auto;
  max-width: 800px;
  text-align: center;
}

#greeting #more {
  display: none;
}

#greeting .btn-light {
  display: flex;
  flex-direction: column;
  margin: auto;
  text-align: center;
}

#contact-a h3 {
  margin-top: 10%;
}

#contact-a .text-fields {
  display: grid;
  grid-template-areas: 'name email' 'subject phone' 'message message';
  grid-gap: 1rem;
  margin: 3rem 0 2rem 0;
}

#contact-a .text-fields .name-input {
  grid-area: name;
}

#contact-a .text-fields .subject-input {
  grid-area: subject;
}

#contact-a .text-fields .email-input {
  grid-area: email;
}

#contact-a .text-fields .phone-input {
  grid-area: phone;
}

#contact-a .text-fields .message-input {
  grid-area: message;
  height: 100px;
}

#contact-a .text-fields .text-input {
  padding: 0.3rem 0.6rem;
  border: solid 1px #ccc;
  border-radius: 4px;
}

#contact-a .contact-container .btn-dark {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 30%;
  text-align: center;
}

#contact-b .contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  margin: 0 0 4rem 0;
}

#main-footer {
  background: #082449;
  color: #f7f7f5;
  height: 5rem;
}

#main-footer .footer-content {
  display: flex;
  justify-content: space-evenly;
  height: 5rem;
  align-items: center;
  font-size: 0.8rem;
}

#main-footer .social .fab {
  color: #f7f7f5;
  margin-right: 1.5rem;
  border-radius: 50%;
  padding: 0.5rem;
  font-size: 1.3rem;
  text-align: center;
}

#main-footer .social .fab:hover {
  background: #f43d56;
}

@media (max-width: 1300px) {
  #showcase {
    min-height: 100vh;
    position: relative;
  }
   
}

@media (max-width: 800px) {
  #showcase {
    min-height: 50vh;
  }
  #showcase p {
    padding: 1rem;
    text-align: center;
  }
  #showcase h1 {
    font-size: 1.5rem;
  }
  #work-a .item-text-title {
    font-size: 1.2rem;
    padding: 1rem;
  }
  #work-a .item-text-category {
    font-size: 1rem;
    margin-top: 1rem;
  }

  #greeting .container {
    padding: 0 2rem;
  }
  #skills .cards {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  #skills .card:first-of-type {
    border-right: none;
  }
  #skills ul {
    display: block;
    padding: 1rem;
  }
}


/*===================PHONES==================================

============================================================*/

@media (max-width: 500px) {
  #main-nav {
    flex-direction: column;
    align-items: center;
  }
  #main-nav #logo {
    margin: 1rem 0;
  }
  #main-nav li {
    padding: 1rem;
    margin-top: 2rem;
  }
  #showcase {
    height: 85vh;
  }
  #showcase p {
    padding: 1rem;
    text-align: center;
  }
  #showcase img {
    width: 300px;
    margin: auto;
    text-align: center;
  }
  #showcase h1 {
    font-size: 1.5rem;
  }

  #greeting h1 {
    font-size: 1.5rem;
  }
  #skills .cards {
    grid-template-columns: 1fr;
    width: 100%;
    display: block;
  }
  #skills .card:first-of-type {
    border-right: none;
  }
  #skills ul {
    display: block;
    padding: 1rem;
  }
  #work-a .container {
    padding: 0 1rem;
  }
  #work-a .items {
    grid-template-columns: 1fr;
    width: 100%;
    grid-row-gap: 0.5rem;
  }
  #work-a .items .item-image {
    width: 100%;
  }
  #work-a .items .item-text-category {
    font-size: 0.9rem;
    margin-top: 1.8rem;
  }
  #work-a .items .item-text-title {
    font-size: 0.9rem;
  }
  #main-footer .footer-content {
    flex-direction: column-reverse;
    font-size: 0.6rem;
    padding-bottom: 1rem;
  }
  #main-footer .social .fab {
    font-size: 1.2rem;
    padding: 0 1rem;
    margin: 1rem 0;
  }
  #contact-a .text-fields {
    display: grid;
    grid-template-areas: 'name' 'email' 'phone' 'subject' 'message';
    grid-gap: 1rem;
    margin: 2rem 0;
  }
  #contact-b .contact-info {
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
    padding: 0;
  }
}

@media (max-height: 500px) {
  #showcase {
    height: 85vh;
  }
  #showcase img {
    width: 250px;
    margin: auto;
    text-align: center;
  }
  #showcase h1 {
    font-size: 1.5rem;
  }

  #greeting h1 {
    font-size: 1.2rem;
  }
  #skills .cards {
    grid-template-columns: 1fr;
    width: 100%;
    display: block;
  }
  #skills .card:first-of-type {
    border-right: none;
  }
  #skills ul {
    display: block;
    padding: 1rem;
  }
  #work-a .items {
    grid-template-columns: 1fr;
    width: 100%;
    grid-row-gap: 1rem;
  }
  #work-a .items .item-image {
    width: 100%;
  }
  #work-a .items .item-text-title {
    font-size: 0.9rem;
    margin: 0.8rem 0;
  }
}

<section id="greeting" class="rellax" data-rellax-speed="3">
  <div class="container" data-rellax-speed="-1">
    <h1 class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
      Hi, I'm Jon. Nice to meet you.
    </h1>
    <p class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
      I am a recent graduate of the Borough of Manhattan Community College where I pursued a degree in Multimedia Programming with a specialization in Frontend Web Development and Graphic Design I offer an attention to detail, analysis, and problem solving
      that will serve me well as a Frontend Developer. I enjoy working across various programs and platforms from Sketch or XD to SASS/JS/REACT and NODE to name a few. In my recent internship at Interactive One, I was able to apply this skill set in the
      development of personalized landing pages and digital marketing campaigns on sites hosted on WordPress VIP.<span id="dots">...</span
          ><span id="more">
            I also find WordPress Development to be engaging as well, especially
            theme customization and incorporating raw coding techniques to
            create a unique end product. My specialties include: Prototyping in
            Adobe XD. Building in HTML/CSS, JavaScript and React. All aspects of
            the WordPress and Squarespace platforms. I have had the chance to
            work with Firebase creating an original Blog and also the P5.js
            library creating animated projects, games and data
            visualization.</span
          >
        </p>
        <button
          type="button"
          id="read"
          class="btn-light t-center"
          onclick="read()"
        >
          Read More
        </button>
      </div>
    </section>

<!-- Section Skills -->
    <section
      id="skills"
      class="t-center py-3 rellax"
      data-rellax-xs-speed="2"
      data-rellax-speed="1.5"
      data-rellax-tablet-speed="0"
    >
      <div class="container">
        <div class="cards">
          <div class="card">
            <div>
              <i class="fas fa-code fa-3x"></i>
              <h2>Frontend Developer</h2>
              <p>
                I aim for an original, clean and streamlined approach. I
                especially enjoy coding from scratch and exploring new
                techniques.
              </p>
              <div class="skill-list">
                <h2>My Languages:</h2>
                <ul>
                  <li>
                    <i class="fab fa-js"></i>
                    <p>javascript</p>
                  </li>
                  <li>
                    <i class="fab fa-react"></i>
                    <p>react</p>
                  </li>
                  <li>
                    <i class="fab fa-sass"></i>
                    <p>sass</p>
                  </li>
                  <li>
                    <i class="fab fa-node"></i>
                    <p>node.js</p>
                  </li>
                  <li>
                    <i class="fas fa-database"></i>
                    <p>firebase</p>
                  </li>
                  <li>
                    <i class="fas fa-file-code"></i>
                    <p>html5 / css3</p>
                  </li>
                </ul>
              </div>

              <div class="skill-list">
                <h2>Developer Tools:</h2>
                <ul>
                  <li>
                    <i class="fas fa-file-alt"></i>
                    <p>VS-Code</p>
                  </li>
                  <li>
                    <i class="fab fa-bootstrap"></i>
                    <p>Bootstrap</p>
                  </li>
                  <li>
                    <i class="fab fa-codepen"></i>
                    <p>Codepen</p>
                  </li>
                  <li>
                    <i class="fab fa-github"></i>
                    <p>Github</p>
                  </li>
                  <li>
                    <i class="fab fa-wordpress"></i>
                    <p>WordPress</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="card">
            <div>
              <i class="fas fa-bezier-curve fa-3x"></i>
              <h2>Graphic Design</h2>
              <p>
                I value simple content structure, clean design patterns, and
                thoughtful interactions.
              </p>
              <div class="skill-list">
                <h2>What I like to design:</h2>
                <ul>
                  <li>
                    <i class="fab fa-sketch"></i>
                    <p>ux / ui</p>
                  </li>
                  <li>
                    <i class="fas fa-wifi"></i>
                    <p>web</p>
                  </li>
                  <li>
                    <i class="fas fa-mobile"></i>
                    <p>mobile</p>
                  </li>
                  <li>
                    <i class="fab fa-app-store-ios"></i>
                    <p>apps</p>
                  </li>
                  <li>
                    <i class="fas fa-bezier-curve"></i>
                    <p>logos</p>
                  </li>
                </ul>
              </div>

              <div class="skill-list">
                <h2>Design Tools:</h2>
                <ul>
                  <li>
                    <i class="fas fa-align-center"></i>
                    <p>Sketch</p>
                  </li>
                  <li>
                    <i class="fab fa-figma"></i>
                    <p>Figma</p>
                  </li>
                  <li>
                    <i class="fab fa-adobe"></i>
                    <p>Adobe Suite</p>
                  </li>
                  <li>
                    <i class="fas fa-drafting-compass"></i>
                    <p>Draw</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>