@font-face {
    font-family: Inter;
    src: url(../media/fonts/Inter.woff2);
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: SourceSans;
    src: url(../media/fonts/SourceSans3.woff2);
    font-weight: 100 900;
    font-style: normal;
}

:root{
    --color-base: #FFFFFF;
    --main-color: #53917E;
    --secondary-color: #272727;
    --tertiary-color:#E1EFEB;

    --background-color: var(--color-base);

    --main-font: "Inter";
    --secondary-font: "SourceSans";
}

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


html, body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.indent{
  margin-left: 10px;
}
.indent2{
  margin-left: 14px;
}

/* general styles for header/nav */
header {
  width: 100vw;
  z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 35px;
    margin: 0;
    background-color: var(--color-base);
    position: fixed;
    font-family: var(--main-font);
    color: var(--secondary-color);
    font-size: 20px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
   
  }
  label.nav-toggle-label {
    display: none;
  }
  .logo{
    display: flex;
    align-items: start;
    margin-right: auto;
  }

  .logo img{
    height: 60px;
    width: auto;
  }
  
  label {
    cursor: pointer;
    height: 2rem;
    position: fixed;
    right: 2rem;
    width: 2.5rem;
    z-index: 1001;
  }
  
  label span {
    background-color: var(--secondary-color);
    border-radius: 3px;
    display: block;
    height: 6px;
    position: absolute;
    width: 100%;
    transform-origin: left;
  }
  
  label span:nth-child(1) {
    top: 0;
  }
  
  label span:nth-child(2) {
    top: 0.8rem;
  }
  
  label span:nth-child(3) {
    top: 1.625rem;
  }
  
  
  nav {
    background: var(--color-base);
    height: 100vh;
    width: 18.75rem;
    position: fixed;
    right: -300px;
    top: 0;
    z-index: 1000;
  }
  
  nav ul {
    list-style: none;
    margin: 0;
    padding: 4rem;
    font-size: 20px;
  }
  
  nav ul li {
    margin-bottom: 1rem;
  }
  
  nav ul li a {
    color: var(--secondary-color);
    text-decoration: none;
  }
  
  nav ul li a:hover {
    color: var(--main-color);
    text-decoration: underline;
    transform: translateX(5px);
  }
  
  
  .nav-toggle:checked ~ nav {
    right: 0;
  }
  
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: rotate(45deg);
    top: -2px;
  }
  
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }
  
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .submenu {
    list-style: none;
    background: white;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 100;
  }
  
  .submenu li {
    padding: 0.5rem 1rem;
  }
  
  .submenu li a {
    display: block;
    color: #333;
    text-decoration: none;
  }

/* general styles for footer */
.footer {
  background-color: var(--color-base);
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 0.2rem;
  padding: 30px 35px;
  bottom: 0;
  margin: 0;
  position: relative;
  width: 100%;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}

.footer-content-trademark {
  text-align: right;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-family: var(--main-font);
  color: var(--secondary-color);
  font-size: 16px;
}

.footer p {
  font-family: var(--main-font);
  font-size: 16px;
  color: var(--secondary-color);
  margin: 0;
  line-height: 150%;
}

#contact-me {
  font-family: var(--main-font);
  font-size: 16px;
  color: var(--secondary-color);
  grid-column: 1;
  grid-row: 1;
}

#email {
  font-family: var(--main-font);
  font-size: 16px;
  color: var(--secondary-color);
  grid-column: 1;
  grid-row: 2;
}

.footer a {
  font-family: var(--main-font);
  font-size: 16px;
  color: var(--secondary-color);
  grid-column: 1;
  grid-row: 3;
}


  

/* general homepage content */
.homepage-content {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: auto auto 150px auto;
    justify-content: space-between;
    margin-top: 8rem;

    h1 {
        font-family: var(--secondary-font);
        color: var(--main-color);
        font-weight: 500;
        font-size: 100px;
        text-align: center;
        grid-column: 2 / span 3;
        grid-row: 2;
        justify-self: center;
        margin-left: 5.5rem;
    }
    #hi {
        font-family: var(--main-font);
        color: var(--secondary-color);
        font-weight: 400;
        font-size: 60px;
        grid-column: 2;
        align-content: end;
        justify-self: start;
        margin-left: 7rem;
    }

    #name {
        font-family: var(--main-font);
        color: var(--secondary-color);
        font-weight: 400;
        font-style: normal;
        font-size: 55px;
        grid-column: 3 / span 2;
        grid-row: 3;
        justify-self: end;
    }

    p{
        font-family: var(--main-font);
        color: var(--secondary-color);
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        grid-row: 3;
        grid-column: 2 / span 3;
        justify-self: end;
        align-self: end;
        margin-right: 1.5rem;
    }


  #playlist-character {
    grid-column: 2 / span 3;
    grid-row: 4;
    align-self: end;
    justify-self: center;
    position: relative;
    z-index: -1;
    margin-bottom: -50px;
    margin-top: 3rem;
    
  }
  #spotify-playlist{
    grid-column: 2 / span 3;
    grid-row: 5;
    align-self: start;
    position: relative;
    z-index: 1;
    margin-bottom: 4rem;
  }
  

}
.homepage-content #circle {
  background: var(--main-color);
  border-radius: 100rem 100rem 0 0;
  width: 150px;
  height: 80px;
  grid-column: 3;
  justify-self: end;
  transform: rotate(270deg) translateY(90px) translateX(-40px);
  align-self: end;
  grid-row: 1;
  z-index: -1;
  display: block; 
}

.homepage-content #circle2 {
  background: var(--main-color);
  border-radius: 100rem 100rem 0 0;
  width: 170px;
  height: 140px;
  grid-column: 1;
  justify-self: start;
  transform: rotate(90deg) translate(40px, 80px);
  align-self: end;
  grid-row: 2;
  display: block; 
  z-index: -1;
}

.homepage-content #circle4 {
  background: var(--main-color);
  border-radius: 50%;
  width: 180px;
  height: 180px;
  grid-column: 2;
  align-self: start;
  grid-row: 6;
  transform: translate(-80px, -180px);
  z-index: -1;
  display: block; 
}


/* about me default */
.about-me-content{
    display: grid;
    grid-template-columns: 350px 1fr;
    grid-template-rows: auto;
    gap: 2rem;
    padding: 10rem;
    margin-left: 15px;
    margin-top: 5rem;


    #circle {
      background: var(--main-color);
      border-radius: 50%;
      width: 200px;
      height: 200px;
      grid-column: 1;
      align-self: end;
      grid-row: 1;
      transform: translate(160px, -100px);
      z-index: -1;
  }
  #circle2 {
    background: var(--main-color);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    grid-column: 1;
    align-self: center;
    grid-row: 1;
    transform: translate(-80px, 350px);
}

    .about-me-text-content{
        grid-column: 2;
        grid-row: 1 / span 3;
        margin-left: 3rem;
    }
    #welcome{
        font-family: var(--main-font);
        color: var(--secondary-color);
        font-weight: 500;
        font-style: normal;
        font-size: 40px;
        margin: 0 0 0.8rem 0;
    }

    #intro{
        font-family: var(--main-font);
        color: var(--secondary-color);
        font-weight: 500;
        font-style: normal;
        font-size: 40px;
        margin: 0 0 1.5rem 0;
    }
    p {
        font-family: var(--secondary-font);
        color: var(--secondary-color);
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        line-height: 150%;
    }

    ul, li{
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      text-align: left;
      list-style: disc;
    }
    #dayoungphoto{
        transform: rotate(-8deg);
        grid-column: 1;
        grid-row: 1 / span 3;
    }
    #dayoungphoto:hover{
        transform: rotate(0deg);
    }
}


/*resume default */
.resume-content{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: auto;
    margin: 3rem;
    margin-top: 9rem;
    
    h1{
        grid-column: 2 / span 2;
        margin-bottom: 2rem;
        justify-self: center;
        align-self: center;
        font-family: var(--main-font);
        color: var(--secondary-color);
        font-weight: 600;
        font-style: normal;
        font-size: 40px;
        line-height: 180%;
    }
    
    .education-content{
        grid-column: 1 / span 4;
        display: grid;
        grid-template-columns: 1fr auto;

        h2{
            grid-column: 1 / span 2;
            font-family: var(--secondary-font);
            color: var(--secondary-color);
            font-style: normal;
            font-weight: 700;
            font-size: 30px;
            line-height: 180%;
        }

        h3{
            grid-column: 1 / span 3;
            grid-row: 2;
            font-family: var(--secondary-font);
            color: var(--secondary-color);
            font-style: normal;
            font-weight: 600;
            font-size: 26px;
            line-height: 180%;
        }

        h4{
            grid-column: 1;
            grid-row: 3;
            font-family: var(--secondary-font);
            color: var(--secondary-color);
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
            line-height: 180%;
        }
        p{
            grid-column: 1;
            grid-row: 4;
            font-family: var(--secondary-font);
            color: var(--secondary-color);
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 180%;
        }
        .philadelphia{
            grid-column: 1;
            grid-row: 2;
            justify-self: end;
        }
    }

    .experience-content{
        grid-column: 1 / span 5;
        display: grid;
        grid-template-columns: 1fr auto;

        h2{
            font-family: var(--secondary-font);
            color: var(--secondary-color);
            font-style: normal;
            font-weight: 700;
            font-size: 30px;
            line-height: 180%;
        }

        h3{
            grid-column: 1 / span 3;
            font-family: var(--secondary-font);
            color: var(--secondary-color);
            font-style: normal;
            font-weight: 600;
            font-size: 26px;
            line-height: 180%;
        }

        h4{
            grid-column: 1 / span 3;
            font-family: var(--secondary-font);
            color: var(--secondary-color);
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
            line-height: 180%;
        }

        h4.date{
            grid-column: 5;
            justify-self: end;
        }
        ul, li{
          grid-column: 1 / span 5;
          font-family: var(--secondary-font);
          color: var(--secondary-color);
          font-style: normal;
          font-weight: 400;
          font-size: 18px;
          line-height: 180%;
          text-align: left;
          list-style: disc;
        }
    }  

    .skills-content{
        grid-column: 1 / span 5;

        p{
            font-family: var(--secondary-font);
            color: var(--secondary-color);
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 180%;
        }
    }
    .resume-link{
      font-family: var(--main-font);
      color: var(--main-color);
      font-size: 18px;
    }
}

/* myprojects default */
.my-projects-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 90px auto;
  margin:10rem 5rem 5rem 6rem;
  justify-content: space-between;
  column-gap: 4rem;

  img{
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    border-radius: 40px;
    width: 100%;
    height: auto;
  }

  #moodify{
    grid-column: 1;
    grid-row: 2;

  }
  #moodify2{
    grid-column: 2;
    grid-row: 2;
  }

  #moodify3{
    grid-column: 1;
    grid-row: 7;
  }

  #moodify4{
    grid-column: 2;
    grid-row: 7;
  }

  #moodify5{
    grid-column: 1;
    grid-row: 11;
  }

  #moodify6{
    grid-column: 2;
    grid-row: 11;
  }

  #circle{
    background: var(--main-color);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    grid-column: 1;
    align-self: center;
    grid-row: 1;
    transform: translate(-100px, 100px);
    z-index: -1;
  }
  #circle2{
    background: var(--main-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    grid-column: 2;
    justify-self: end;
    grid-row: 1;
    transform: translate(50px, 240px);
    z-index: -1;
  }

  #circle4{
    background: var(--main-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    grid-column: 1;
    align-self: center;
    grid-row: 7;
    transform: translate(-50px, 30px);
    z-index: -1;
  }
  #circle5{
    background: var(--main-color);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    grid-column: 2;
    align-self: center;
    justify-self: end;
    grid-row: 7;
    transform: translate(60px, 105px);
    z-index: -1;
  }

  h1{
    grid-column: 1 / span 2;
    grid-row: 1;
    margin-bottom: 3rem;
    margin-left: -1.5rem;
    justify-self: center;
    align-self: center;
    font-family: var(--main-font);
    color: var(--secondary-color);
    font-weight: 600;
    font-style: normal;
    font-size: 40px;
    line-height: 180%;
  
  }
/* moodify */
  h2.moodify{
    margin-top: 0.8rem;
    grid-column: 1 / span 1;
    grid-row: 3;
    align-self: center;
    font-family: var(--main-font);
    color: var(--secondary-color);
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    line-height: 180%;

  }

  p.moodify{
    grid-column: 1 / span 1;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
  }

  .tag{
    margin-top: 0.8rem;
    grid-column: 1;
    grid-row: 3;
    background-color: var(--tertiary-color);
    color: var(--main-color);
    padding: 15px;
    border-radius: 48px;
    font-size: 14px;
    font-family: var(--main-font);
    display: inline-block;
    justify-self: end;   
    align-self: center;

  }
  
/*goodreads*/
  h2.goodreads{
    margin-top: 0.8rem;
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    font-family: var(--main-font);
    color: var(--secondary-color);
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    line-height: 180%;
  }

  p.goodreads{
    grid-column: 2;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    align-self: center;
    max-width: 70ch;
    margin-bottom: 2rem;
  }
  .tag2{
    margin-top: 0.8rem;
    grid-column: 2;
    grid-row: 3;
    background-color: var(--tertiary-color);
    color: var(--main-color);
    padding: 15px;
    border-radius: 48px;
    font-size: 14px;
    font-family: var(--main-font);
    display: inline-block;
    justify-self: end;   
    align-self: center;

  }

/*haveyaheard*/
  h2.haveyaheard{
    margin-top: 0.8rem;
    grid-column: 1 / span 1;
    grid-row: 8;
    align-self: center;
    font-family: var(--main-font);
    color: var(--secondary-color);
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    line-height: 180%;
  }

  p.haveyaheard{
    grid-column: 1;
    grid-row: 9;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    align-self: center;
    max-width: 70ch;
    margin-bottom: 2rem;
  

  }
  .tag3{
    margin-top: 0.8rem;
    grid-column: 1;
    grid-row: 8;
    background-color: var(--tertiary-color);
    color: var(--main-color);
    padding: 15px;
    border-radius: 48px;
    font-size: 14px;
    font-family: var(--main-font);
    display: inline-block;
    justify-self: end;   
    align-self: center;

  }
/*syncwithdata*/
  h2.syncwithdata{
    margin-top: 0.8rem;
    grid-column: 2;
    grid-row: 8;
    align-self: center;
    font-family: var(--main-font);
    color: var(--secondary-color);
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    line-height: 180%;
  }

  p.syncwithdata{
    grid-column: 2;
    grid-row: 9;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    align-self: center;
    max-width: 70ch;
    margin-bottom: 2rem;

  }
  .tag4{
    margin-top: 0.8rem;
    grid-column: 2;
    grid-row: 8;
    background-color: var(--tertiary-color);
    color: var(--main-color);
    padding: 15px;
    border-radius: 48px;
    font-size: 14px;
    font-family: var(--main-font);
    display: inline-block;
    justify-self: end;   
    align-self: center;
  }

}
/* line break styles */
.line{
  width: 100%;
  height: 1px;
  background-color: var(--secondary-color);
  justify-self: center;
  margin: 0.5rem;
}

/* general styles for moodify project page */
.moodify-container {
  max-width: 1200px;
  margin: 8rem auto 2rem;
  width: 100%;
}

.moodify-content-pt1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
}

.moodify-content-pt1 h1 {
  font-family: var(--main-font);
  justify-self: center;
  margin: 3rem 0 2rem;
  font-size: 40px;
}

.moodify-content-pt1 img {
  max-width: 100%;
  height: auto;
  width: auto;
  max-height: 800px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}

.moodify-tableofcontents {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.moodify-tableofcontents ul,
.moodify-tableofcontents li.moodify-tableofcontents {
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  font-size: 20px;
  font-weight: 500;
  font-family: var(--secondary-font);
}

.moodify-tableofcontents a {
  color: var(--secondary-color);
}

.moodify-tableofcontents a:hover {
  color: var(--main-color);
}

.introduction-moodify,
.our-team,
.tools-used,
.initial-concept,
.the-challenge,
.process,
.processpt2,
.takeaways,
.redesign,
.problems,
.myprocess,
.final-takeaways {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.moodify-casestudy {
  grid-column: 1 / span 1;
  grid-row: 3;
  font-family: var(--secondary-font);
  color: var(--secondary-color);
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  align-self: center;
  justify-self: center;
  margin: 1rem;
}

.moodify-casestudy .moodify-casestudy-box {
  background-color: var(--tertiary-color);
  padding: 24px;
  margin: 20px;
  max-width: 720px;
}

.introduction-moodify h2,
.our-team h2,
.tools-used h2,
.initial-concept h2,
.the-challenge h2,
.process h2,
.takeaways h2,
.redesign h2,
.problems h2,
.process h2,
.myprocess h2,
.final-takeaways h2{
  grid-column: 1 / span 1;
  grid-row: 1;
  font-family: var(--main-font);
  color: var(--secondary-color);
  font-weight: 600;
  font-style: normal;
  font-size: 23px;
  line-height: 180%;
  align-self: center;
  justify-self: start;
}

.introduction-moodify p,
.initial-concept p,
.redesign p,
.problems p,
.process p, .processpt2 p,
.final-takeaways p, .takeaways p, .myprocess p {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--secondary-font);
  color: var(--secondary-color);
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  align-self: start;
  justify-self: start;
}

.our-team ul, 
.our-team li,
.tools-used ul, 
.tools-used li {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--secondary-font);
  color: var(--secondary-color);
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  align-self: start;
  justify-self: start;
}

.problems ul, 
.problems li {
  font-family: var(--secondary-font);
  color: var(--secondary-color);
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
}

.the-challenge h3 {
  font-family: var(--main-font);
  color: var(--secondary-color);
  font-weight: 600;
  font-style: normal;
  font-size: 20px;
  line-height: 180%;
  align-self: start;
  justify-self: start;
}

.the-challenge ul,
.the-challenge li {
  font-family: var(--secondary-font);
  color: var(--secondary-color);
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  align-self: start;
}

.image-container-moodify {
  display: flex;
  gap: 25px;
  margin: 1rem;
  margin-left: -3rem;
  width: 200px;
  flex-direction: row;
  justify-content: flex-start;
}

.image-container-moodify img {
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}

.processpt2 p {
  font-family: var(--secondary-font);
  color: var(--secondary-color);
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
}

.takeaways h2 {
  grid-column: 1 / span 1;
  grid-row: 1;
  font-family: var(--main-font);
  color: var(--secondary-color);
  font-weight: 600;
  font-style: normal;
  font-size: 23px;
  line-height: 180%;
  align-self: end;
  justify-self: start;
}

.takeaways p {
  font-family: var(--secondary-font);
  color: var(--secondary-color);
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
}

.takeaways a,
.myprocess a {
  font-family: var(--secondary-font);
  color: var(--main-color);
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  margin-top: 1rem;
}
  /* goodreads redesign */
  .goodreads-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    margin-top: 8rem;
  }
  
  .goodreads-content-pt1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.5rem;
    width: 100%;
  
    h1 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 700;
      font-style: normal;
      font-size: 40px;
      line-height: 180%;
      justify-self: center;
      margin-top: 3rem;
      margin-bottom: 2rem;
    }
    
    img {
      max-width: 100%;
      height: auto;
      width: auto;
      max-height: 800px;
      justify-self: center;
      align-self: center;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    }
    
    p {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 16px;
      line-height: 160%;
    }
    

  }
  
  .goodreads-tableofcontents {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    line-height: 160%;
    align-self: center;
    justify-self: center;
    margin-bottom: 1rem;
  
    .indent{
      margin-left: 10px;
    }

    ul, li {
      list-style: none;
      margin: 0;
      padding: 0;
      text-decoration: underline;
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 500;
      font-size: 20px;
    }

    a {
      color: var(--secondary-color);
  
      &:hover {
        color: var(--main-color);
      }
    }
  }
  
  .goodreads-casestudy {
    grid-column: 1 / span 1;
    grid-row: 3;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    align-self: center;
    justify-self: center;
    margin: 1rem;
  
    .goodreads-casestudy-box {
      background-color: var(--tertiary-color);
      padding: 24px;
      margin: 20px;
      max-width: 720px;
    }
  }
  
  .introduction-goodreads,
  .problemswithcurrentdesign,
  .userresearch,
  .process,
  .wireframes, .prototype-goodreads, .next-steps, .takeaways-goodreads,.impact {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
  }
  
  .introduction-goodreads {
    h2 {
      grid-column: 1 / span 1;
      grid-row: 1;
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 25px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
  
    p {
      grid-column: 1;
      grid-row: 2;
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 18px;
      line-height: 150%;
      align-self: start;
      justify-self: start;
      max-width: 1100px;
    }
  }
  
  .problemswithcurrentdesign {
    h2 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
  
    h3 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 20px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
    
    p {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 18px;
      line-height: 150%;
    }
  
    ul, li {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 160%;

      img{
        width: 700px;
      }
    }

    img {
      margin-top: 1rem;
      margin-bottom: 1rem;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    .shelving-images {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
  
      .bad-design1 {
        grid-column: 1 / span 1;
        grid-row: 1;
        width: 300px;
        margin-left: 1rem;

      }
      .bad-design2 {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin-left: -5rem;
      }
      .bad-design3{
        grid-column: 1 / span 1;
        grid-row: 1;
        width: 400px;
        margin-left: 0rem;
      }
      .bad-design4{
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        width: 800px;
        margin-left: -5rem;
      }
    }
  }
  
  .userresearch {
    h2 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
    
    p {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 18px;
      line-height: 150%;
    }
  }
  
  .userresearch2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 20px;
    margin-bottom: 1rem;
  
    .subject-a,
    .subject-b {
      h3 {
        font-family: var(--secondary-font);
        color: var(--secondary-color);
        font-weight: 500;
        font-style: normal;
        font-size: 20px;
        line-height: 180%;
        justify-self: start;
        align-self: start;
      }
      
      p {
        font-family: var(--secondary-font);
        color: var(--secondary-color);
        font-weight: 400;
        font-size: 18px;
        line-height: 150%;
        align-self: start;
        justify-self: start;
      }
      
      ul, li {
        font-family: var(--secondary-font);
        color: var(--secondary-color);
        font-weight: 400;
        font-size: 18px;
        line-height: 160%;
        list-style: none;
      }
    }
  }
  
  .process {
    h2 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
    
    h3 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 20px;
      line-height: 180%;
      align-self: start;
      justify-self: start;
      margin-left: 2rem;
      margin-top: 0.5rem;
    }
    
    p {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 18px;
      line-height: 150%;
    }
    
    img.goodreads-fonts {
      box-shadow: none;
      justify-self: start;
      align-self: center;
      margin-left: 0.3rem;
      width: 300px;
    }
  }
  
  .color-scheme {
    display: flex;
    justify-content: start;
    gap: 20px;
    margin-left: 2rem;
    margin-top: 1rem;
  
    .circlefilled {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    
    h4 {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 18px;
      line-height: 180%;
    }
    
    .circlefilled:nth-child(2) { background-color: #E4DDC6; }
    .circlefilled:nth-child(3) { background-color: #355E3B; }
    .circlefilled:nth-child(5) { background-color: #ADC178; }
    .circlefilled:nth-child(6) { background-color: #104F19; }
    .circlefilled:nth-child(7) { background-color: #C19A6B; }
    .circlefilled:nth-child(8) { background-color: #A9BA9D; }
    .circlefilled:nth-child(9) { background-color: #A9BA9D; }
    .circlefilled:nth-child(10) { background-color: #48714F; }
    .circlefilled:nth-child(11) { background-color: #000000; }
  }
  
  .wireframes {
    h3 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 20px;
      line-height: 180%;
      align-self: center;
      margin-top: 1rem;
      margin-bottom: 1rem;
      justify-self: start;
    }
    
    img {
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    }
    
    .wireframe-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      position: relative;
    }
    
    img.lowfi1 {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      max-height: 1200px;
      width: auto;
      max-width: 100%;
    }
    
    img.lowfi2 {
      grid-column: 1;
      grid-row: 1;
      justify-self: end;
      max-height: 1200px;
      width: auto;
      max-width: 100%;
    }
    
    p.wireframe-mobile-explanation {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 18px;
      line-height: 150%;
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      justify-self: start;
      max-width: 350px;
      margin-left: 50px;
    }
    .wireframe-container .lowwfi3 img{
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      max-height: 1000px;
      width: auto;
      max-width: 100%;
    }
    img.lowfi3 {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      max-height: 1000px;
      width: auto;
      max-width: 100%;
    }
    
    img.lowfi4 {
      grid-column: 2;
      grid-row: 1;
      justify-self: start;
      max-height: 1000px;
      width: auto;
      margin-left: -13rem;
      max-width: 100%;
    }
    
    p.wireframe-desktop-explanation {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 18px;
      line-height: 150%;
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      justify-self: center;
      max-width: 350px;
      z-index: 2;
    }
  }

  .userresearch2 {
    .subject-a, .subject-b {
        justify-self: center;
    }
  }
.impact {
  h2{
    font-family: var(--main-font);
    color: var(--secondary-color);
    font-size: 23px;
    font-weight: 600;
  }
  p{
    font-size: 18px;
  }
}
  .prototype-goodreads {
    margin-top: 1rem;

    a{
      font-family: var(--secondary-font);
      color: var(--main-color);
      font-size: 18px;
    }
    h2{
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-size: 23px;
      font-style: normal;
    }
    p{
      font-size: 18px;
    }
  }
  .next-steps{
    h2{
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-size: 23px;
      font-style: normal;
    }
    ul, li{
      font-size: 18px;
      font-family: var(--secondary-font);
    }
    
  }

  .takeaways-goodreads{
    margin-bottom: 2rem;
    h2{
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
    }
    p{
      font-size: 18px;
    }
  }


/* have ya heard default */
  .haveyaheard-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 3rem;
    margin-top: 8rem;

  }
  
  .haveyaheard-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.5rem;
    width: 100%;
  
    h1 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 700;
      font-style: normal;
      font-size: 40px;
      line-height: 180%;
      justify-self: center;
      margin-top: 3rem;
      margin-bottom: 2rem;
    }
    
    img {
      max-width: 100%;
      height: auto;
      width: auto;
      max-height: 800px;
      justify-self: center;
      align-self: center;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    }
    
    p {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 16px;
      line-height: 160%;
    }
    
    ul, li {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 160%;
    }
  }
  
  .haveyaheard-tableofcontents {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    line-height: 160%;
    align-self: center;
    justify-self: center;
    margin-bottom: 1rem;
  
    ul, li.haveyaheard-tableofcontents {
      list-style: none;
      margin: 0;
      padding: 0;
      font-weight: 500;
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-size: 20px;
      text-decoration: underline;
    }
  
    a {
      color: var(--secondary-color);
  
      &:hover {
        color: var(--main-color);
      }
    }
  }
  
  .haveyaheard-casestudy {
    grid-column: 1 / span 1;
    grid-row: 3;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    align-self: center;
    justify-self: center;
    margin: 1rem;
  
    .haveyaheard-casestudy-box {
      background-color: var(--tertiary-color);
      padding: 24px;
      margin: 20px;
      max-width: 720px;
    }
  }
  
  .introduction,
  .problems,
  .objective,
  .our-users,
  .our-process,
  .the-solution,
  .prototype,
  .takeaways {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
  }
  
  .introduction,
  .objective,
  .our-users,
  .problems {
    h2 {
      grid-column: 1 / span 1;
      grid-row: 1;
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
  
    p {
      grid-column: 1;
      grid-row: 2;
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 150%;
      align-self: start;
      justify-self: start;
      max-width: 1100px;
    }
  }
  
  .our-process,
  .the-solution,
  .prototype,
  .takeaways {
    h2 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
  
    h3 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 20px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
      margin-left: 2rem;
      margin-top: 0.5rem;
    }
    
    h4 {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 500;
      font-style: normal;
      font-size: 18px;
      line-height: 180%;
      align-self: start;
      justify-self: start;
      margin-left: 2rem;
    }
    
    p {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 150%;
    }
  
    ul, li {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 160%;
    }
  }
  
  .our-users {
    h3 {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 500;
      font-style: normal;
      font-size: 20px;
      line-height: 180%;
      justify-self: start;
      align-self: start;
      margin-left: 1rem;
    }
    
    ul, li {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 160%;
    }
  }

  .our-team {
    h2 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
    
    ul, li {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 160%;
    }
  }
  
  .tools-used {
    h2 {
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
    
    ul, li {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 160%;
    }
  }
  
  .prototype {
    .final-prototype-link {
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-size: 18px;
      line-height: 160%;
      text-decoration: underline;
      margin: 1rem 0;
      display: inline-block;
      
      &:hover {
        color: var(--main-color);
      }
    }
  }
  /* sync w data default */
  
  .main-page{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    margin: 8rem 2rem 5rem 2rem;
    gap: 1rem;
  
    h1{
      font-family: var(--main-font);
      font-size: 35px;
      color: var(--secondary-color);
      text-align: center;
      grid-row: 2;
      font-weight: 600;
    }
  
    .data{
      color: #3E92CC;
    }
    .instinct{
      color: #3E92CC;
    }
  
    h3{
      font-family: var(--main-font);
      font-weight: 400;
      text-align: center;
      font-size: 25px;
      grid-row: 3;
      margin-top: 0rem;
    }
  
    h4{
      font-family: var(--secondary-font);
      color: #3E92CC;
      text-align: center;
      font-size: 20px;
      grid-row: 4;
      margin: 0;
      margin-bottom: 2rem;
      font-weight: 400;
    }
  }
  
  
  .search-container{
    display: grid;
    justify-content: center;
    grid-template-columns: 1000px;
    grid-template-rows: 1fr;
  }
  #genreInput{
    font-family: var(--main-font);
    grid-row: 1;
    width: 500px;
    justify-self: start;
    grid-column: 1;
    border-radius: 25px;
    border: 0.8px solid #3E92CC;
    padding: 15px;
    margin-left: 8rem;
  }
  
  #predictButton{
    font-family: var(--main-font);
    grid-row: 1;
    grid-column: 1;
    width: 150px;
    margin-right: 10rem;
    justify-self: end;
    border-radius: 25px;
    border: none;
    padding: 15px;
    background-color: #3E92CC;
    color: var(--color-base);
    cursor: pointer;
  }
  
  .result-container{
    display: grid;
    grid-template-columns: 600px;
    grid-template-rows: auto;
    justify-content: center;
  }
  
  #result{
    margin-top: 2rem;
    font-family: var(--main-font);
    line-height: 150%;
    font-size: 18px;
  
    ul,li{
        text-align: left;
        list-style-type: disc;
        margin-left: -0.5rem;
    }
  
  }
  
  .help-button{
    grid-row: 1;
    justify-self: end;
    margin-top: 1rem;
    margin-right: 1rem;
    cursor: pointer;
  }
  
  .help-card{
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -70%);
    background-color: #3E92CC;
    color: var(--color-base);
    padding: 30px 40px;
    border-radius: 30px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    max-width: 520px;
    text-align: center;
    
    h2{
        font-family: var(--main-font);
        color: var(--color-base);
        font-size: 25px;
    }
  
    h4{
        font-family: var(--main-font);
        color: var(--color-base);
        font-size: 20px;
    }
    ul,li{
        font-family: var(--main-font);
        color: var(--color-base);
        list-style-type: none;
        text-align: left;
        margin-left: -0.5rem;
        line-height: 180%;
    }
  
    .indent{
        margin-left: 1rem;
    }
    .title{
        font-size: 20px;
    }
    .close-btn-help {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 30px;
      cursor: pointer;
      background-color: #3E92CC;
      border: none;
      color: white;
    }
  }

  .hidden{
    display: none;
  }

  .heatmap{
    display: none;
    margin-top: 20px;
    max-width: 100%;
    justify-self: center;
  }

  /* sync with data default */
  /* .syncwithdata-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 2rem;
    margin-top: 8rem;

  }

  .syncwithdata-content{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.5rem;
    width: 100%;

    h1{
      font-family: var(--main-font);
      justify-self: center;
      margin-top: 3rem;
      margin-bottom: 2rem;
      font-size: 40px;
    }
  }

  .syncwithdata-content img{
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 800px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  }
  
  .syncwithdata-tableofcontents {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;


    ul,li.syncwithdata-tableofcontents{
      list-style: none;
      margin:0;
      padding:0;
      font-family: var(--secondary-font);
      font-size: 20px;
      color: var(--secondary-color);
      text-decoration: underline;
      font-weight: 500;
    }

    a{
      color: var(--secondary-color);

      &:hover{
        color: var(--main-color);
      }
    }
  }

  .introduction-syncwithdata,.research-question, .importance,.project-details,.research-phase,.data-analysis-phase,.results-findings,.challenges-syncwithdata, .next-steps-syncwithdata,.conclusion-syncwithdata{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .syncwithdata-casestudy{
    grid-column: 1 / span 1;
    grid-row: 3;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    align-self: center;
    justify-self: center;
    margin: 1rem;
    
    .syncwithdata-casestudy-box{
      background-color: var(--tertiary-color);
      padding: 24px;
      margin: 20px;
      max-width: 720px;
    }
  }

  .introduction-syncwithdata, .conclusion-syncwithdata{
    h2{
      grid-column: 1 / span 1;
      grid-row: 1;
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }

    p{
      grid-column: 1;
      grid-row: 2;
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 150%;
      align-self: start;
      justify-self: start;
    }
  }

  .research-question{
    h2{
      grid-column: 1 / span 1;
      grid-row: 1;
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }

    h4{
      font-family: var(--secondary-font);
      color: var(--main-color);
      font-size: 20px;
      font-weight: 500;
    }
  }

  .importance{
    h2{
      grid-column: 1 / span 1;
      grid-row: 1;
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
    ul,li{
      font-family: var(--secondary-font);
      color: var(--secondary-color);
      font-weight: 400;
      font-size: 20px;
      line-height: 160%;
    }
  }

  .project-details{
    h2{
      grid-column: 1 / span 1;
      grid-row: 1;
      font-family: var(--main-font);
      color: var(--secondary-color);
      font-weight: 600;
      font-style: normal;
      font-size: 23px;
      line-height: 180%;
      align-self: center;
      justify-self: start;
    }
  }

.research-phase, .data-analysis-phase{
  h3{
    grid-column: 1 / span 1;
    grid-row: 1;
    font-family: var(--main-font);
    color: var(--secondary-color);
    font-weight: 600;
    font-style: normal;
    font-size: 21px;
    line-height: 180%;
    align-self: center;
    justify-self: start;
  }
  ul,li{
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 20px;
    line-height: 160%;
    list-style: none;
  }
  a{
    color: var(--main-color);
  }
}

.challenges-syncwithdata, .next-steps-syncwithdata{
  h2{
    grid-column: 1 / span 1;
    grid-row: 1;
    font-family: var(--main-font);
    color: var(--secondary-color);
    font-weight: 600;
    font-style: normal;
    font-size: 23px;
    line-height: 180%;
    align-self: center;
    justify-self: start;
  }

  ul,li{
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 20px;
    line-height: 160%;

  }
} */


/*MEDIA QUERY FOR 1728PX*/
@media screen and (min-width:1600px) {
    header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
      }

      label {
        display: none;
      }
    
      nav {
        position: static;
        height: auto;
        width: auto;
        background: none;
        grid-column: 2;
      }
    
      nav ul {
        display: flex;
        justify-content: center;
        padding: 0;
        gap: 18rem;
        font-size: 20px;
        flex-direction: row;
        margin-left: 1rem;
      }
    
      nav ul li {
        margin: 0;
      }
    
      nav ul li a {
        color: var(--secondary-color);
        font-weight: normal;
        line-height: 120%;
        text-decoration: none;
      }

      nav ul li a:hover{
        color: var(--main-color);
        text-decoration: underline;
        transform: translateX(5px);
      }
    
    
      .nav-toggle {
        display: none;
      }
      .submenu {
        list-style: none;
        background: white;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 160px;
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 100;
      }
      .submenu li {
        padding: 0.5rem 1rem;
      }
      
      .submenu li a {
        display: block;
        color: #333;
        text-decoration: none;
      }
      footer{
        background-color: var(--color-base);
        display: grid;
        grid-template-columns: 2;
        grid-row: 4;
        row-gap: 0.2rem;
        padding: 30px 35px;
        margin: 0;
        position: relative;
        left: 0;
        bottom: auto;
        width:100%;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
        
        .footer-content-trademark{
          text-align: right;
          grid-column: 2;
          grid-row: 2;
          margin: 0;
          font-family: var(--main-font);
          color: var(--secondary-color);
          font-size: 16px;
        }
        p{
          font-family: var(--main-font);
          font-size: 16px;
          color: var(--secondary-color);
          margin: 0;
          line-height: 150%;
        }
        #contact-me{
          font-family: var(--main-font);
          font-size: 16px;
          color: var(--secondary-color);
          grid-column: 1;
          grid-row: 1;
        }
        #email{
          font-family: var(--main-font);
          font-size: 16px;
          color: var(--secondary-color);
          grid-column: 1;
          grid-row: 2;
        }
        a{
          font-family: var(--main-font);
          font-size: 16px;
          color: var(--secondary-color);
          grid-column: 1;
          grid-row: 3;
        }
    
      }

      .homepage-content {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: auto auto 150px auto;
        justify-content: space-between;
        margin-top: 8rem;
    
        h1 {
            font-size: 100px;
            font-style: normal;
            text-align: center;
            grid-column: 2 / span 3;
            grid-row: 2;
            justify-self: center;
        }
        #hi {
            font-style: normal;
            font-size: 55px;
            grid-column: 2 / span 1;
            align-content: end;
            justify-self: start;
        }
    
        #name {
            font-size: 55px;
            grid-column: 3 / span 2;
            grid-row: 3;
            justify-self: end;
            align-self: start;
        }
    
        p{
          font-size: 20px;
          grid-row: 3;
          grid-column: 2 / span 3;
          justify-self: center;
          align-self: end;
          margin-left: 4rem;
          margin-right: 0rem;
        }
        #circle {
            background: var(--main-color);
            border-radius: 100rem 100rem 0 0;
            width: 250px;
            height: 140px;
            grid-column: 5;
            justify-self: end;
            transform: rotate(270deg) translateY(55px) translateX(-100px);
            align-self: end;
            grid-row: 1;
        }
        #circle2 {
            background: var(--main-color);
            border-radius: 100rem 100rem 0 0;
            width: 250px;
            height: 140px;
            grid-column: 1;
            justify-self: start;
            transform: rotate(90deg) translate(50px, 60px);
            align-self: end;
            grid-row: 2;
        }
    }
    .problemswithcurrentdesign .bad-design-list,.baddesign1 {
      list-style: none;
  }
  
    
}

/*MEDIA QUERY FOR 1440PX*/
@media screen and (min-width:1440px) and (max-width:1599px){
  header {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
    }
    label {
      display: none;
    }
  
    nav {
      position: static;
      height: auto;
      width: auto;
      background: none;
      grid-column: 2;
    }
  
    nav ul {
      display: flex;
      justify-content: center; 
      padding: 0;
      gap: 12rem;
      margin-left: 2rem;

    }
  
    nav ul li {
      margin: 0;
    }
  
    nav ul li a {
      color: var(--secondary-color);
      font-weight: normal;
      line-height: 120%;
    }
    .nav-toggle {
      display: none;
    }
    .homepage-content {
      display: grid;
      grid-template-columns: repeat(5,1fr);
      grid-template-rows: auto auto 150px auto;
      justify-content: space-between;
      margin-top: 8rem;
  
      h1 {
        font-size: 100px;
        text-align: center;
        grid-column: 2 / span 3;
        grid-row: 2;
        margin: 0;
        justify-self: center;
        margin-left: 4rem;
      }
      #hi {
          font-size: 55px;
          grid-column: 2;
          align-content: end;
          margin-top: 4rem;
      }
  
      #name {
        font-size: 55px;
        grid-column: 4 / span 2;
        grid-row: 2;
        justify-self: start;
        align-self: end;
      }
  
      p{
        font-size: 20px;
        grid-row: 3;
        grid-column: 2 / span 3;
        justify-self: center;
        align-self: end;
        margin-left: 4rem;
      }
      #circle {
        border-radius: 100rem 100rem 0 0;
        width: 250px;
        height: 140px;
        grid-column: 5;
        justify-self: end;
        transform: rotate(270deg) translateY(90px) translateX(-100px);
        align-self: end;
        grid-row: 1;
      }
      #circle2 {
        background: var(--main-color);
        border-radius: 100rem 100rem 0 0;
        width: 280px;
        height: 200px;
        grid-column: 1;
        justify-self: start;
        transform: rotate(90deg) translate(50px, 130px);
        align-self: end;
        grid-row: 2;
      }
  }
 
  .my-projects-content{
    column-gap: 2rem;
  
    img{
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
      border-radius: 40px;
      width: 100%;
      height: auto;
    }
   
    #moodify{
      grid-column: 1;
      grid-row: 2;
    }
    #moodify2{
      grid-column: 2;
      grid-row: 2;
    }
  
    #moodify3{
      grid-column: 1;
      grid-row: 7;
    }
  
    #moodify4{
      grid-column: 2;
      grid-row: 7;
    }
  
    #moodify5{
      grid-column: 1;
      grid-row: 11;
    }
  
    #moodify6{
      grid-column: 2;
      grid-row: 11;
    }
  
    #circle{
      justify-self: start;
      border-radius: 50%;
      width: 200px;
      height: 200px;
      grid-column: 1;
      align-self: center;
      grid-row: 1;
      transform: translate(-40px, 100px);
      z-index: -1;
    }
    #circle2{
      background: var(--main-color);
      border-radius: 50%;
      width: 150px;
      height: 150px;
      grid-column: 2;
      justify-self: end;
      grid-row: 1;
      transform: translate(60px, 230px);
      z-index: -1;
    }

    #circle4{
      background: var(--main-color);
      border-radius: 50%;
      width: 150px;
      height: 150px;
      grid-column: 1;
      align-self: center;
      grid-row: 7;
      transform: translate(-60px, 50px);
      z-index: -1;
    }
    #circle5{
      width: 200px;
      height: 200px;
      grid-column: 2;
      align-self: center;
      justify-self: end;
      grid-row: 11;
      transform: translate(60px, -350px);      
      z-index: -1;
    }
  
    h1{
      margin-left: 0.5rem;
      grid-row: 1;
      margin-bottom: 2rem;
      font-size: 40px;    
    }
  }
  .heatmap{
    margin-left: -2rem;
  }
}

/* media query for 1024-1098 */
@media screen and (max-width:1439px) and (min-width:1000px) {
  header {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
    }

    label {
      display: none;
    }
  
    nav {
      position: static;
      height: auto;
      width: auto;
      background: none;
      grid-column: 2;
    }
  
    nav ul {
      display: flex;
      justify-content: center; 
      padding: 0;
      gap: 8rem;
      margin-left: 2rem;
      font-size: 18px;

    }
  
    nav ul li {
      margin: 0;
    }
  
    nav ul li a {
      color: var(--secondary-color);
      font-weight: normal;
      line-height: 120%;
    }

    .nav-toggle {
      display: none;
    }
    footer{
      background-color: var(--color-base);
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-row: 4;
      row-gap: 0.2rem;
      padding: 30px 35px;
      margin: 0;
      position: relative;
      left: 0;
      bottom: auto;
      width:100%;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
      
      .footer-content-trademark{
        text-align: right;
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-size: 16px;
      }
      p{
        font-size: 16px;
        margin: 0;
        line-height: 150%;
      }
      #contact-me{
        font-size: 16px;
        grid-column: 1;
        grid-row: 1;
      }
      #email{
        font-size: 16px;

        grid-column: 1;
        grid-row: 2;
      }
      a{

        font-size: 16px;

        grid-column: 1;
        grid-row: 3;
      }
  
    }
    
    .homepage-content {
      display: grid;
      grid-template-columns: repeat(5,1fr);
      grid-template-rows: auto auto 150px auto;
      justify-content: space-between;
      
  
      h1 {

          font-size: 80px;
          text-align: center;
          grid-column: 2 / span 3;
          grid-row: 2;
          margin: 0;
          justify-self: center;
          margin-left: 5.5rem;
      }
      #hi {
          font-size: 45px;
          grid-column: 1 / span 2;
          align-content: end;
          justify-self: end;
          margin-right: 2rem;
      }
  
      #name {
          font-size: 45px;
          grid-column: 3 / span 2;
          grid-row: 3;
          justify-self: end;
      }
      p{

          font-size: 20px;
          grid-row: 3;
          grid-column: 2 / span 4;
          justify-self: center;
          align-self: end;
          margin-right: 10rem;
      }
      #circle {
          background: var(--main-color);
          border-radius: 100rem 100rem 0 0;
          width: 180px;
          height: 100px;
          grid-column: 5;
          justify-self: end;
          transform: rotate(270deg) translateY(50px) translateX(-70px);
          align-self: end;
          grid-row: 1;
      }
      #circle2 {
        background: var(--main-color);
        border-radius: 100rem 100rem 0 0;
        width: 240px;
        height: 130px;
        grid-column: 1;
        justify-self: start;
        transform: rotate(90deg) translate(50px, 60px);
        align-self: end;
        grid-row: 2;
      }
  } 
  .about-me-content{
    display: grid;
    grid-template-columns: 350px 1fr;
    grid-template-rows: auto;
    gap: 2rem;
    position: relative;
    padding: 6rem;
    margin-left: 0px;

    #circle {
      border-radius: 50%;
      width: 150px;
      height: 150px;
      grid-column: 1;
      align-self: end;
      grid-row: 1;
      transform: translate(250px, -390px);
      z-index: -1;
  }
  #circle2 {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    grid-column: 1;
    align-self: center;
    grid-row: 1;
    transform: translate(-20px, 240px);
}
    .about-me-text-content{
        grid-column: 2;
        grid-row: 1 / span 3;
        margin-left: 3rem;
    }
    #welcome{
        font-size: 35px;
        margin: 0 0 0.8rem 0;
    }

    #intro{

        font-size: 35px;
        margin: 0 0 1.5rem 0;
    }
    p {

        font-size: 18px;
        line-height: 150%;
    }

    ul, li{

        font-size: 18px;
    }
    #dayoungphoto{
        width:350px;
        transform: rotate(-8deg);
        grid-column: 1;
        grid-row: 1;
        margin-top: 2rem;
    }
    #dayoungphoto:hover{
        transform: rotate(0deg);
    }
}

.my-projects-content{
  column-gap: 2rem;
  margin: 10rem 2rem 1rem 2rem;

  #circle{
    width: 150px;
    height: 150px;
    transform: translate(-20px, 80px);
  }
  #circle2{
    transform: translate(20px, 150px);
  }

  #circle4{
    transform: translate(-20px, 70px);
  }
  #circle5{
    width: 180px;
    height: 180px;
    grid-column: 2;
    grid-row: 11;
    transform: translate(20px, -320px);

  }

  h1{
    margin-top: 0rem;
    margin-left: 0rem;
    font-size: 35px;
  
  }
/* moodify */
  h2.moodify{
    font-size: 25px;
  }

  p.moodify{
    font-size: 18px;
  }


/*goodreads*/
  h2.goodreads{
    font-size: 25px;

  }

  p.goodreads{
    font-size: 18px;
  }

/*haveyaheard*/
  h2.haveyaheard{
    font-size: 25px;
  }

  p.haveyaheard{
    font-size: 18px;
  }

/*syncwithdata*/
  h2.syncwithdata{
    font-size: 25px;
  }

  p.syncwithdata{
    font-size: 18px;
  }

}
.moodify-container {
  max-width: 960px;
  padding: 0 20px;
}
.moodify-tableofcontents{
  display: grid;
  grid-template-columns: 800px;
  justify-content: center;
  justify-items: start;
}

.moodify-content-pt1 h1 {
  font-size: 32px;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.moodify-content-pt1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}

.moodify-content-pt1 img {
  max-width: 100%;
  height: auto;
  width: 800px; 
  justify-self: center;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}
.introduction-moodify,
.our-team,
.tools-used,
.initial-concept,
.the-challenge,
.process,
.processpt2,
.takeaways,
.redesign,
.problems,
.myprocess,
.final-takeaways {
  display: grid;
  grid-template-columns: 800px;
  width: 100%;
  justify-content: center;
  justify-items: start;
}
.image-container-moodify{
  display: flex;
  gap: 25px;
  margin: 1rem;
  width: 130px;
  flex-direction: row;
  justify-content: flex-start;
}

.goodreads-container{
  max-width: 960px;
  padding: 0 20px;
}

.goodreads-tableofcontents{
  display: grid;
  grid-template-columns: 800px;
  justify-content: center;
  justify-items: start;

}

.goodreads-content-pt1{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;

}
.goodreads-content-pt1 h1{
  font-size: 32px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.line{
  width:80%;
}

.goodreads-content-pt1 img{
  max-width: 100%;
  height: auto;
  width: 800px; 
  justify-self: center;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}
.problemswithcurrentdesign {
  ul {
    img{
      width:600px;
      margin-left: 4rem;
    }
  }
  .shelving-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;

    .bad-design1 {
      grid-column: 1;
      grid-row: 1;
      align-self: start;
      width: 300px;
      margin-left: 0rem;
    }
    
    .bad-design2 {
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      margin-left: -2rem;

    }
  }
}
.wireframes img.lowfi4{
  max-height: 695px;
}

.introduction-goodreads,
.problemswithcurrentdesign,
.userresearch,
.process,
.wireframes, .impact, .takeaways-goodreads, .next-steps, .prototype-goodreads {
  display: grid;
  grid-template-columns: 800px;
  width: 100%;
  justify-content: center;
  justify-items: start;
}
.color-scheme {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 5px;
  margin-left: 1rem;
  margin-top: 1rem;
  max-width: 980px; 

  .circlefilled {
    width: 45px;
    height: 45px;
    border-radius: 50%;
  }
  
  h4 {
    font-size: 16px;
    line-height: 160%;
    margin-bottom: 10px;
    width: 100%;
    margin-left: 1rem;
  }
  
  .circlefilled:nth-child(2) { background-color: #E4DDC6; margin-left: 1rem; }
  .circlefilled:nth-child(3) { background-color: #355E3B; margin-left: 1rem;}
  .circlefilled:nth-child(5) { background-color: #ADC178; margin-left: 1rem;}
  .circlefilled:nth-child(6) { background-color: #104F19; margin-left: 1rem;}
  .circlefilled:nth-child(7) { background-color: #C19A6B; margin-left: 1rem;}
  .circlefilled:nth-child(8) { background-color: #A9BA9D; margin-left: 1rem;}
  .circlefilled:nth-child(9) { background-color: #A9BA9D; margin-left: 1rem;}
  .circlefilled:nth-child(10) { background-color: #48714F;margin-left: 1rem; }
  .circlefilled:nth-child(11) { background-color: #000000; margin-left: 1rem;}
}
.wireframes{
  .wireframe-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
}
  img.lowfi1, img.lowfi3 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    max-width: 90%;
    max-height: 1000px;
  }
  
  img.lowfi2, img.lowfi4 {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: 90%;
    align-self: start;
    margin-left: 0rem;
  }
  
  p.wireframe-mobile-explanation, p.wireframe-desktop-explanation {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    max-width: 90%;
    text-align: left;
    max-width: 30ch;
  }
}
.problemswithcurrentdesign .bad-design-list,.baddesign1 {
  list-style: none;
}
.haveyaheard-container{
  max-width: 960px;
  padding: 0 20px;
}
.haveyaheard-tableofcontents{
  display: grid;
  grid-template-columns: 800px;
  justify-content: center;
  justify-items: start;
}
.haveyaheard-content h1{
  font-size: 32px;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}
.haveyaheard-content img{
  max-width: 100%;
  height: auto;
  width: 800px; 
  justify-self: center;

}
.haveyaheard-content {
  .introduction, .tools-used, .our-team, .problems, .objective, .our-users, .our-process, .our-goals, .our-business-concept, .the-solution, .limitations, .prototype, .takeaways, .future-applications {
    display: grid;
    grid-template-columns: 800px;
    width: 100%;
    justify-content: center;
    justify-items: start;
  }
}
.syncwithdata-container{
  max-width: 960px;
  padding: 0 20px;
}

.syncwithdata-tableofcontents{
  display: grid;
  grid-template-columns: 800px;
  justify-content: center;
  justify-items: start;
}
.syncwithdata-content h1{
  font-size: 32px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.syncwithdata-content{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}
.syncwithdata-content img{
  max-width: 100%;
  height: auto;
  width: 800px; 
  justify-self: center;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}
.introduction-syncwithdata,.research-question,.importance,.project-details,.research-phase,.data-analysis-phase,.challenges-syncwithdata,.next-steps-syncwithdata,.conclusion-syncwithdata{
  display: grid;
  grid-template-columns: 800px;
  width: 100%;
  justify-content: center;
  justify-items: start;
}
.main-page{
  grid-template-columns: 1000px;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-size: 28px;

  }

  h3{
    font-size: 20px;
    margin-top: 0rem;
  }

  h4{
    font-size: 15px;
    margin: 0;
    margin-bottom: 2rem;

  }
}

.search-container{
  grid-template-columns: 300px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}

#genreInput{
  width: 400px;
  justify-self: start;
  margin-left: -10rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 1;
  width: 180px;
  margin-right: -10rem;
  justify-self: end;

}

.result-container{
  display: grid;
  grid-template-columns: 600px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 16px;
  }
}
#result{
  font-size: 16px;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}
}


@media screen and (max-width:999px){
  header {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 35px;
    margin: 0;
    background-color: var(--color-base);
    position: fixed;
    font-size: 20px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  }
  label.nav-toggle-label {
    display: block;
    position: relative;
    margin-right: -2rem;
  }
  .logo {
    display: flex;
    align-items: start;
    margin-right: auto;
  }
  
  .logo img {
    height: 60px;
    width: auto;
  }
  
  .nav-toggle-label {
    cursor: pointer;
    height: 2rem;
    position: fixed;
    right: 2rem;
    width: 2.5rem;
    z-index: 1001;
    display: block;
  }
  
  .nav-toggle-label span {
    background-color: var(--secondary-color);
    border-radius: 3px;
    display: block;
    height: 6px;
    position: absolute;
    width: 100%;
    transform-origin: left;
  }
  
  .nav-toggle-label span:nth-child(1) {
    top: 0;
  }
  
  .nav-toggle-label span:nth-child(2) {
    top: 0.8rem;
  }
  
  .nav-toggle-label span:nth-child(3) {
    top: 1.625rem;
  }
  
  nav {
    background: var(--color-base);
    height: 100vh;
    width: 18.75rem;
    position: fixed;
    right: -300px;
    top: 0;
    z-index: 1000;
    transition: right 0.3s ease;
  }
  
  nav ul {
    list-style: none;
    margin: 0;
    padding: 4rem;
    font-size: 20px;
    flex-direction: column;
    gap: 0rem;
  }
  
  nav ul li {
    margin-bottom: 1rem;
  }
  
  nav ul li a {
    text-decoration: none;
  }
  
  nav ul li a:hover {
    text-decoration: underline;
    transform: translateX(5px);
  }
  
  .nav-toggle:checked ~ nav {
    right: 0;
  }
  
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: rotate(45deg);
    top: -2px;
  }
  
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }
  
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .homepage-content {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto auto 150px auto;
    justify-content: space-between;

    h1 {
      font-size: 70px;
      grid-column: 1 / span 3;
      grid-row: 2;
      justify-self: center;
      align-self: center;
      margin-left: 5rem;
    }
    #hi {
      font-size: 35px;
      grid-column: 1 / span 2;
      align-content: end;
      grid-row: 1;
      justify-self: center;
      margin-left: 0rem;
    }

    #name {
      font-size: 35px;
      grid-column: 2 / span 2;
      grid-row: 3;
      justify-self: center;
    }

    p{
      font-size: 20px;
      grid-row: 3;
      grid-column: 1 / span 3;
      justify-self: center;
      align-self: end;
      margin-left: 4rem;
      
    }
    #circle {
      border-radius: 100rem 100rem 0 0;
      width: 180px;
      height: 100px;
      grid-column: 3;
      justify-self: end;
      transform: rotate(270deg) translateY(50px) translateX(-60px);
      align-self: end;
      grid-row: 1;
    }
    #circle2 {
        border-radius: 100rem 100rem 0 0;
        width: 200px;
        height: 160px;
        grid-column: 1;
        justify-self: start;
        transform: rotate(90deg) translate(50px, 90px);
        align-self: end;
        grid-row: 2;
  }

  #circle4{
    background: var(--main-color);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    grid-column: 2;
    align-self: start;
    grid-row: 6;
    transform: translate(-100px, -200px);
  }

  #playlist-character {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    justify-self: center;
    position: relative;
    z-index: -1;
    margin-left: 3rem;
    
  }
  #spotify-playlist{
    grid-column: 2 / span 2;
    grid-row: 5;
    align-self: start;
    justify-self: start;
    width: 80%;
    position: relative;
    z-index: 1;
    margin-bottom: 4rem;
    margin-left: -4rem;
    z-index: -1;
  }
}
.resume-content{

  h1{
      margin-bottom: 1rem;
      font-size: 35px;
  }
  
  .education-content{
      margin-bottom: 1rem;

      h2{
          font-size: 25px;
      }

      h3{
        grid-row: 2;
        font-size: 23px;
      }

      h4{
          grid-row:4;
          font-size: 18px;

      }
      p{
          grid-row: 5;
          font-size: 16px;

      }
      .philadelphia{
          grid-row: 2;
          justify-self: end;
      }
  }

  .experience-content{
    gap: 0.2rem;
    margin-bottom: 1rem;

    h2{
        font-size: 25px;
    }

    h3{
        grid-column: 1 / span 5;
        font-size: 23px;
    }

    h4{
        grid-column: 1 / span 3;
        font-size: 18px;
    }

    h4.date{
        grid-column: 5;
        justify-self: end;
    }
    ul, li{
        grid-column: 1 / span 5;
        font-size: 18px;
    }
}  

.skills-content{
    grid-column: 1 / span 5;

    p{
        font-size: 18px;
    }
}
}

.about-me-content{
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  padding: 3rem;
  margin-left: -2rem;
  margin-top: 9rem;

  #circle {
    width: 17vw;
    min-width: 100px;
    height: 17vw;
    min-height: 100px;
    align-self: center;
    transform: translate(calc(50vw), calc(-18vw));
  }
#circle2 {
  width: 16vw;
  min-width: 75px;
  height: 16vw;
  min-height: 75px;
  align-self: center;
  transform: translate(calc(28vw), calc(19vw));
}

  .about-me-text-content{
    margin-top: 1rem;
    grid-column: 1;
    grid-row: 2;
    margin-left: 3rem;
  }
  #dayoungphoto{
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;

    img {    
    width: 300px;
    transform: rotate(-2deg);
    margin-top: 1rem;
  }

  }
}
.my-projects-content {
  margin: 8rem 1.5rem 1.5rem 1.5rem;
  column-gap: 1.5rem;
  
  img {
    width: 100%;
    border-radius: 30px;
    height: auto;
  }
  
  h1 {
    font-size: 35px;
    margin-bottom: 0rem;
    margin-left: 1rem;
  }
  
  h2.moodify, h2.goodreads, h2.haveyaheard, h2.syncwithdata {
    font-size: 22px;
  }
  
  p.moodify, p.goodreads, p.haveyaheard, p.syncwithdata {
    font-size: 16px;
  }
  
  #circle, #circle2, #circle4, #circle5 {
    width: 120px;
    height: 120px;
  }
  
  #circle {
    transform: translate(-70px, 80px);
  }
  
  #circle2 {
    transform: translate(10px, 200px);
  }
  
  #circle4 {
    transform: translate(-70px, 80px);
  }
  
  #circle5 {
    width: 140px;
    height: 140px;
    transform: translate(5px, -80px);
  }
  
  .tag, .tag2, .tag3, .tag4 {
    padding: 12px;
    font-size: 12px;
    margin-right: 0rem;
  }
}

.moodify-container {
  max-width: 720px;
  padding: 0 15px;
}
.moodify-content-pt1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}

.moodify-content-pt1 h1 {
  font-size: 28px;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.moodify-tableofcontents {
  display: grid;
  grid-template-columns: 600px;
  justify-content: center;
  justify-items: start;

  ul,li{
    font-size: 18px;
  }
}

.moodify-casestudy {
  font-size: 16px;
}

.moodify-casestudy .moodify-casestudy-box {
  padding: 18px;
  margin: 10px;
  max-width: 520px;
}
.introduction-moodify,
.our-team,
.tools-used,
.initial-concept,
.the-challenge,
.process,
.processpt2,
.takeaways,
.redesign,
.problems,
.myprocess,
.final-takeaways {
  display: grid;
  grid-template-columns: 600px;
  width: 100%;
  justify-content: center;
  justify-items: start;
}

.introduction-moodify h2,
.our-team h2,
.tools-used h2,
.initial-concept h2,
.the-challenge h2,
.process h2,
.takeaways h2,
.redesign h2,
.problems h2,
.process h2,
.myprocess h2,
.final-takeaways h2 {
  font-size: 25px;
  font-family: var(--main-font);
}

.introduction-moodify p,
.initial-concept p,
.redesign p,
.problems p,
.process p, .processpt2 p,
.final-takeaways p, .takeaways p, .myprocess p,.our-team ul, 
.our-team li,
.tools-used ul, 
.tools-used li, .problems ul, 
.problems li, .the-challenge ul,
.the-challenge li{
  font-size: 20px;
}

.the-challenge h3 {
  font-size: 23px;
}

.image-container-moodify {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 500px;
  justify-self: center;
}

.image-container-moodify img {
  width: 100%;
}

.image-container-moodify img:nth-child(n+4) {
  grid-row: 2;
}

.image-container-moodify img:nth-child(4) {
  grid-column: 1;
}

.image-container-moodify img:nth-child(5) {
  grid-column: 2;
}

.image-container-moodify img:nth-child(6) {
  grid-column: 3;
}
.moodify-content-pt1 img {
  max-width: 100%;
  height: auto;
  width: 600px;
  justify-self: center;
}

.goodreads-container{
  max-width: 720px;
  padding: 0 15px;
}
.goodreads-content-pt1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}
.goodreads-content-pt1 h1{
  font-size: 28px;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.goodreads-tableofcontents{
  display: grid;
  grid-template-columns: 600px;
  justify-content: center;
  justify-items: start;

  ul,li{
    font-size: 18px;
  }
}

.goodreads-casestudy {
  font-size: 16px;
}

.goodreads-casestudy .goodreads-casestudy-box {
  padding: 18px;
  margin: 10px;
  max-width: 520px;
}

.introduction-goodreads,.tools-used,.problemswithcurrentdesign,.userresearch, .userresearch2, .process, .processpt2, .prototype-goodreads, .next-steps, .takeaways-goodreads, .wireframes, .impact{
  display: grid;
  grid-template-columns: 600px;
  width: 100%;
  justify-content: center;
  justify-items: start;
}

.goodreads-content-pt1 img{
  max-width: 100%;
  height: auto;
  width: 600px;
  justify-self: center;
}

.problemswithcurrentdesign {
  ul, li{
    img{
      width: 500px;
      justify-self: center;
      margin-left: 0rem;
    }

    .shelving-images{
      .bad-design1{
        grid-column: 1 / span 1;
        grid-row: 1;
        width: 150px;
        margin-left: 1rem;
    }
    .bad-design2{
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      margin-left: -2rem;
    }
    .bad-design3{
      grid-column: 1 / span 1;
      grid-row: 1;
      width: 400px;
      margin-left: 0rem;
    }
    .bad-design4{
      grid-column: 1;
      grid-row: 2;
      align-self: start;
      width: 800px;
      margin-left: 0rem;
    }
  }
}
 
}
.color-scheme {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 15px;
  margin-left: 2rem;
  margin-top: 1rem;
  max-width: 980px; 

  .circlefilled {
    width: 45px;
    height: 45px;
    border-radius: 50%;
  }
  .circlefilled:nth-child(9) {
    background-color: #A9BA9D;
    margin-left: 0.3rem;
}
}

.wireframes {
  h3 {
    font-size: 20px;
    line-height: 180%;
    align-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    justify-self: start;
  }

  .wireframe-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    gap: 15px;
  }
  
  img.lowfi1 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-height: 1000px;
    width: auto;
    max-width: 100%;
  }
  
  img.lowfi2 {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-height: 1000px;
    width: auto;
    max-width: 100%;
  }
  
  p.wireframe-mobile-explanation {
    grid-row: 2;
    font-size: 18px;
    line-height: 150%;
    grid-column: 1 / span 2;
    align-self: start;
    justify-self: start;
    max-width: 650px;
    margin-left: 0px;
    margin-top: 1rem;
  }
  
  img.lowfi3 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-height: 900px;
    align-self: start;
    width: auto;
    max-width: 100%;
  }
  
  img.lowfi4 {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-height: 825px;
    width: auto;
    margin-left: 0rem;
    max-width: 100%;
  }
  
  p.wireframe-desktop-explanation {
    font-size: 18px;
    line-height: 150%;
    grid-column: 1 / span 3;
    grid-row: 2;
    align-self: start;
    margin-top: 1rem;
    justify-self: start;
    max-width: 650px;
  }
}
.problemswithcurrentdesign .bad-design-list,.baddesign1 {
  list-style: none;
}
.haveyaheard-container{
  max-width: 720px;
  padding: 0 15px;
}
.haveyaheard-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}
.haveyaheard-content h1{
  font-size: 28px;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.haveyaheard-tableofcontents{
  display: grid;
  grid-template-columns: 600px;
  justify-content: center;
  justify-items: start;

  ul,li{
    font-size: 18px;
  }
}
.haveyaheard-casestudy{
  font-size: 15px;
}
.haveyaheard-casestudy .haveyaheard-casestudy-box{
  padding: 35px;
  margin: 10px;
  max-width: 520px;
}
.haveyaheard-content {
  .introduction, .tools-used, .our-team, .problems, .objective, .our-users, .our-process, .our-goals, .our-business-concept, .the-solution, .limitations, .prototype, .takeaways, .future-applications {
    display: grid;
    grid-template-columns: 600px;
    width: 100%;
    justify-content: center;
    justify-items: start;

    h2{
      font-size: 20px;
    }
    p{
      font-size: 18px;
    }
  }
}
.haveyaheard-content img{
  max-width: 100%;
  height: auto;
  width: 600px;
  justify-self: center;
}
.syncwithdata-content img{
  max-width: 100%;
  height: auto;
  width: 600px;
  justify-self: center;
}
.syncwithdata-container{
  max-width: 720px;
  padding: 0 15px;
}
.syncwithdata-tableofcontents{
  display: grid;
  grid-template-columns: 600px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 18px;
  }
}
.syncwithdata-content h1{
  font-size: 28px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.syncwithdata-casestudy{
  font-size: 16px;
}
.syncwithdata-casestudy .syncwithdata-casestudy-box{
  padding: 18px;
  margin: 10px;
  max-width: 520px;
}
.introduction-syncwithdata,.research-question,.importance,.project-details,.research-phase,.data-analysis-phase,.challenges-syncwithdata,.next-steps-syncwithdata,.conclusion-syncwithdata{
  display: grid;
  grid-template-columns: 600px;
  width: 100%;
  justify-content: center;
  justify-items: start;
}
.introduction-syncwithdata h2,.research-question h2,.importance h2,.project-details h2,.challenges-syncwithdata h2,.next-steps-syncwithdata h2,.conclusion-syncwithdata h2{
  font-size:25px;
}

.introduction-syncwithdata p,.research-question p,.importance p,.project-details p,.challenges-syncwithdata p,.next-steps-syncwithdata p,.conclusion-syncwithdata p{
  font-size: 18px;
}
.research-question h4{
  font-size:19px ;
}
.research-phase, .data-analysis-phase, .challenges-syncwithdata, .next-steps-syncwithdata{
  ul,li{
    font-size: 18px;
  }
}
.main-page{
  grid-template-columns: 1000px;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-size: 28px;

  }

  h3{
    font-size: 20px;
    margin-top: 0rem;
  }

  h4{
    font-size: 15px;
    margin: 0;
    margin-bottom: 2rem;

  }
}

.search-container{
  grid-template-columns: 300px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}

#genreInput{
  width: 400px;
  justify-self: start;
  margin-left: -10rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 1;
  width: 180px;
  margin-right: -10rem;
  justify-self: end;

}

.result-container{
  display: grid;
  grid-template-columns: 600px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 16px;
  }
}
#result{
  font-size: 16px;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}

}

@media screen and (max-width: 768px){
    .homepage-content {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows: auto auto 150px auto;
      justify-content: space-between;
  
      h1 {
        margin-left: 3rem;
        grid-column: 1 / span 3;
        justify-self: center;
      }  
      #name {
        font-size: 35px;
        grid-column: 2 / span 2;
        grid-row: 3;
        justify-self: center;
      }
  
      p{
        font-size: 16px;
        margin-left: 3rem;
        grid-column: 1 / span 3;
    
      }
      #hi {
        font-size: 35px;
        grid-column: 1 / span 2;
        align-content: end;
        grid-row: 1;
        justify-self: start;
        margin-left: 9rem;
      }

    #circle4{
      border-radius: 50%;
      width: 200px;
      height: 200px;
      grid-column: 2;
      align-self: start;
      grid-row: 6;
      transform: translate(-100px, -200px);
      z-index: -1;
    }
    #spotify-playlist{
      margin-left: -2rem;
    }
  }
  .resume-content {
    .education-content h3.philadelphia{
      grid-row: 3;
      justify-self: start;
    }
    .education-content h4{
      grid-row: 4;
    }
    .education-content p{
      grid-row: 5;
    }
  }
  .about-me-content{
    margin-left: -1rem;
    margin-top: 7rem;
  
    #circle {
      width: 25vw;
      min-width: 120px;
      height: 25vw;
      min-height: 120px;
      align-self: center;
      transform: translate(calc(45vw), calc(-17vw));
  }
  #circle2 {
    width: 23vw;
    min-width: 120px;
    height: 23vw;
    min-height: 120px;
    align-self: center;
    transform: translate(calc(22vw), calc(23vw));
  }
  
    .about-me-text-content{
      margin-top: 3rem;
      grid-column: 1;
      grid-row: 2;
      margin-left: 3rem;
    }
    #welcome{
        font-size: 40px;
        margin: 0 0 0.8rem 0;
    }
  
    #intro{
        font-size: 40px;
        margin: 0 0 1.5rem 0;
    }
    p {
        font-size: 20px;
        line-height: 150%;
    }
  
    ul, li{

        font-style: normal;
        font-size: 20px;
    }
    #dayoungphoto{
      grid-column: 1;
      justify-self: center;
      grid-row: 1;
      align-self: center;
      margin-top: 1rem;
  
      img {
        width: 280px;
        transform: rotate(-3deg);
    }
  }
}
  .my-projects-content {
    margin: 8rem 1.5rem 1.5rem 1.5rem;
    column-gap: 1.5rem;
    
    img {
      width: 100%;
      border-radius: 30px;
      height: auto;
    }
    
    h1 {
      font-size: 30px;
      margin-bottom: 0rem;
      margin-left: 1rem;
    }
    
    h2.moodify, h2.goodreads, h2.haveyaheard, h2.syncwithdata {
      font-size: 22px;
    }
    
    p.moodify, p.goodreads, p.haveyaheard, p.syncwithdata {
      font-size: 16px;
    }
    
    #circle, #circle2, #circle4, #circle5 {
      width: 120px;
      height: 120px;
    }
    
    #circle {
      transform: translate(-70px, 80px);
    }
    
    #circle2 {
      transform: translate(10px, 200px);
    }
    
    #circle4 {
      transform: translate(-70px, 80px);
    }
    
    #circle5 {
      width: 140px;
      height: 140px;
      transform: translate(14px, -60px);
    }
    
    .tag, .tag2, .tag3, .tag4 {
      padding: 12px;
      font-size: 12px;
      margin-right: 0rem;
    }
  }
  .line{
    width: 80%;
  }
  
  .moodify-container {
    max-width: 720px;
    padding: 0 15px;
  }
  .moodify-content-pt1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
  }
  
  .moodify-content-pt1 h1 {
    font-size: 28px;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .moodify-tableofcontents {
    display: grid;
    grid-template-columns: 600px;
    justify-content: center;
    justify-items: start;
  }
  
  .moodify-casestudy {
    font-size: 15px;
  }
  
  .moodify-casestudy .moodify-casestudy-box {
    padding: 18px;
    margin: 10px;
    max-width: 520px;
  }
  .introduction-moodify,
  .our-team,
  .tools-used,
  .initial-concept,
  .the-challenge,
  .process,
  .processpt2,
  .takeaways,
  .redesign,
  .problems,
  .myprocess,
  .final-takeaways {
    display: grid;
    grid-template-columns: 600px;
    width: 100%;
    justify-content: center;
    justify-items: start;
  }
  
  .introduction-moodify h2,
  .our-team h2,
  .tools-used h2,
  .initial-concept h2,
  .the-challenge h2,
  .process h2,
  .takeaways h2,
  .redesign h2,
  .problems h2,
  .process h2,
  .myprocess h2,
  .final-takeaways h2  {
    font-size: 23px;
    font-family: var(--main-font);
   
  }
  .introduction-moodify p,
  .initial-concept p,
  .redesign p,
  .problems p,
  .process p, .processpt2 p,
  .final-takeaways p, .takeaways p, .myprocess p,.our-team ul, 
  .our-team li,
  .tools-used ul, 
  .tools-used li, .problems ul, 
  .problems li, .the-challenge ul,
  .the-challenge li{
    font-size: 18px;
  }
  
  .the-challenge h3 {
    font-size: 18px;
  }
  
  .image-container-moodify {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 500px;
    justify-self: center;
  }
  
  .image-container-moodify img {
    width: 100%;
  }
  
  .image-container-moodify img:nth-child(n+4) {
    grid-row: 2;
  }
  
  .image-container-moodify img:nth-child(4) {
    grid-column: 1;
  }
  
  .image-container-moodify img:nth-child(5) {
    grid-column: 2;
  }
  
  .image-container-moodify img:nth-child(6) {
    grid-column: 3;
  }
  .moodify-content-pt1 img {
    max-width: 100%;
    height: auto;
    width: 600px;
    justify-self: center;
  }
  
  .goodreads-container{
    max-width: 720px;
    padding: 0 15px;
  }
  .goodreads-content-pt1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
  }
  .goodreads-content-pt1 h1{
    font-size: 28px;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
  .goodreads-tableofcontents{
    display: grid;
    grid-template-columns: 600px;
    justify-content: center;
    justify-items: start;
  }
  
  .goodreads-casestudy {
    font-size: 15px;
  }
  
  .goodreads-casestudy .goodreads-casestudy-box {
    padding: 18px;
    margin: 10px;
    max-width: 520px;
  }
  
  .introduction-goodreads,.tools-used,.problemswithcurrentdesign,.userresearch, .userresearch2, .process, .processpt2, .prototype, .next-steps, .takeaways, .wireframes, .impact {
    display: grid;
    grid-template-columns: 600px;
    width: 100%;
    justify-content: center;
    justify-items: start;
  }
  .introduction-goodreads h2,.tools-used h2,.problemswithcurrentdesign h2,.userresearch h2, .userresearch2 h2, .process h2, .processpt2 h2, .prototype h2, .next-steps h2, .takeaways h2, .impact h2{
    font-size: 23px;
  }

  .introduction-goodreads p,.tools-used p,.problemswithcurrentdesign p,.userresearch p, .userresearch2 p, .process p, .processpt2 p, .prototype p, .next-steps p, .takeaways p, .tools-used ul, .tools-used li, .problemswithcurrentdesign ul, .problemswithcurrentdesign li, .userresearch ul, .userresearch li, .userresearch2 ul, .userresearch2 li .impact p{
    font-size: 18px;
  }
  
  .goodreads-content-pt1 img{
    max-width: 100%;
    height: auto;
    width: 600px;
    justify-self: center;
  }
  
  .problemswithcurrentdesign {
    ul, li{
      img{
        width: 500px;
        justify-self: center;
        margin-left: 0rem;
      }
  
      .shelving-images{
        .bad-design1{
          grid-column: 1 / span 1;
          grid-row: 1;
          width: 150px;
          margin-left: 1rem;
      }
      .bad-design2{
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin-left: -2rem;
      }
      .bad-design3{
        grid-column: 1 / span 1;
        grid-row: 1;
        width: 400px;
        margin-left: 0rem;
      }
      .bad-design4{
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        width: 800px;
        margin-left: 0rem;
      }
    }
  }
   
  }
  .problemswithcurrentdesign .bad-design-list,.baddesign1 {
    list-style: none;
}
  .color-scheme {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 15px;
    margin-left: 2rem;
    margin-top: 1rem;
    max-width: 980px; 
  
    .circlefilled {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }
    .circlefilled:nth-child(9) {
      background-color: #A9BA9D;
      margin-left: 0.3rem;
  }
  }

  .wireframes {
    h3 {
      font-size: 20px;
      line-height: 180%;
      align-self: center;
      margin-top: 1rem;
      margin-bottom: 1rem;
      justify-self: start;
    }

    .wireframe-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      position: relative;
    }
    
    img.lowfi1 {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      max-height: 1000px;
      width: auto;
      max-width: 100%;
    }
    
    img.lowfi2 {
      grid-column: 2;
      grid-row: 1;
      justify-self: start;
      max-height: 1000px;
      width: auto;
      max-width: 100%;
    }
    
    p.wireframe-mobile-explanation {
      margin-left: 0px;
    }
    
    img.lowfi3 {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      max-height: 900px;
      align-self: start;
      width: auto;
      max-width: 100%;
    }
    
    img.lowfi4 {
      grid-column: 2;
      grid-row: 1;
      justify-self: start;
      width: auto;
      margin-left: 0rem;
      max-width: 100%;
    }
    
    p.wireframe-desktop-explanation {
      font-weight: 400;
      font-size: 18px;
      line-height: 150%;
      grid-column: 1 / span 3;
      grid-row: 2;
      align-self: start;
      margin-top: 1rem;
      justify-self: start;
      max-width: 650px;
    }
  }
  .haveyaheard-container{
    max-width: 720px;
    padding: 0 15px;
  }
  .haveyaheard-content h1{
    font-size: 28px;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
  .haveyaheard-tableofcontents{
    display: grid;
    grid-template-columns: 600px;
    justify-content: center;
    justify-items: start;
  }
  .haveyaheard-casestudy{
    font-size: 15px;
  }
  .haveyaheard-casestudy .haveyaheard-casestudy-box{
    padding: 25px;
    margin: 10px;
    max-width: 520px;
  }
  .haveyaheard-content {
    .introduction, .tools-used, .our-team, .problems, .objective, .our-users, .our-process, .our-goals, .our-business-concept, .the-solution, .limitations, .prototype, .takeaways, .future-applications {
      display: grid;
      grid-template-columns: 600px;
      width: 100%;
      justify-content: center;
      justify-items: start;
  
      h2{
        font-size: 23px;
      }
      p{
        font-size: 18px;
      }
    }
  }
  .haveyaheard-content img{
    max-width: 100%;
    height: auto;
    width: 600px;
    justify-self: center;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  }
  .introduction-syncwithdata h2,.research-question h2,.importance h2,.project-details h2,.challenges-syncwithdata h2,.next-steps-syncwithdata h2,.conclusion-syncwithdata h2{
    font-size:23px;
  }
  
  .introduction-syncwithdata p,.research-question p,.importance p,.project-details p,.challenges-syncwithdata p,.next-steps-syncwithdata p,.conclusion-syncwithdata p{
    font-size: 18px;
  }
  .research-question h4{
    font-size:19px ;
  }
  .research-phase ul,li, .data-analysis-phase ul,li{
    font-size: 18px;
  }
  .main-page{
    grid-template-columns: 700px;
    margin: 7rem 2rem 5rem 2rem;
    gap: 1rem;
    justify-content: center;
  
    h1{
      font-size: 28px;
  
    }
  
    h3{
      font-size: 20px;
      margin-top: 0rem;
    }
  
    h4{
      font-size: 15px;
      margin: 0;
      margin-bottom: 2rem;
  
    }
  }
  
  .search-container{
    grid-template-columns: 300px;
    grid-template-rows: 1fr;
    gap: 1rem;
    margin-top: -1rem;
  }
  
  #genreInput{
    width: 600px;
    justify-self: center;
    margin-left: 0rem;
  }
  
  #predictButton{
    font-family: var(--main-font);
    grid-row: 2;
    width: 180px;
    margin-right: 0rem;
    justify-self: center;
  
  }
  
  .result-container{
    display: grid;
    grid-template-columns: 550px;
    grid-template-rows: auto;
    justify-content: center;
  
    ul,li{
      font-size: 16px;
    }
  }
  #result{
    font-size: 16px;
  }
  .help-card {
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    border-radius: 20px;
    width: 90%;            
    max-width: 350px;     
    max-height: 80vh; 
  }
  
  .help-card h2 {
    font-size: 18px;
    margin-bottom: 1rem;
  }
  
  
  .help-card .title {
    font-size: 16px;
  }
  
  .help-card ul,
  .help-card li {
    margin-left: -1rem;
    font-size: 14px;
  }
  }

@media screen and (max-width:700px){
  .homepage-content {
    #circle{
      transform: rotate(270deg) translateY(40px) translateX(-60px);
    }
    h1{
      font-size: 60px;
      margin-left: 4rem;
    }

    p{
      font-size: 15px;
      margin-left: 2rem;
      margin-right: 0rem;
    }
    #hi{
      grid-column: 1 / span 2;
      justify-self: start;
    }
    #playlist-character{
      margin-left: 1rem;
  }
}
.resume-content {
  .education-content h3.philadelphia{
    grid-row: 3;
    justify-self: start;
  }
  .education-content h4{
    grid-row: 4;
  }
  .education-content p{
    grid-row: 5;
  }
}
.about-me-content{
  #circle{
    width: 20vw;
    height: 20vw;
    transform: translate(calc(48vw), calc(-21vw));
  }
  #circle2{
    width: 20vw;
    height: 20vw;
    transform: translate(calc(23vw), calc(30vw));
  }
}
.main-page{
  grid-template-columns: 600px;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-size: 28px;

  }

  h3{
    font-size: 20px;
    margin-top: 0rem;
  }

  h4{
    font-size: 15px;
    margin: 0;
    margin-bottom: 2rem;

  }
}

.search-container{
  grid-template-columns: 300px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}

#genreInput{
  width: 500px;
  justify-self: center;
  margin-left: 0rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 2;
  width: 180px;
  margin-right: 0rem;
  justify-self: center;

}

.result-container{
  display: grid;
  grid-template-columns: 450px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 16px;
  }
}
#result{
  font-size: 16px;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}
}
@media screen and (max-width: 650px) {
  .homepage-content {
    #circle {
      transform: rotate(270deg) translateY(20px) translateX(-70px);
    }
    h1 {
      font-size: 50px; 
      margin-left: 0rem;
    }
    p {
      font-size: 14px; 
      margin-left: 0rem;
    }
    #playlist-character {
      margin-left: 0rem;
  }
  #spotify-playlist {
    margin-left: -3rem;
  }
}
  .resume-content {
    .education-content {
      display: grid;
      gap: 0.5rem; 
    }
  }
  .about-me-content {
    #dayoungphoto {
        img {
            width: 250px;
            transform: rotate(-2deg);
            margin-top: 1rem;
        }
    }
}
.main-page{
  grid-template-columns: 600px;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-size: 28px;

  }

  h3{
    font-size: 20px;
    margin-top: 0rem;
  }

  h4{
    font-size: 15px;
    margin: 0;
    margin-bottom: 2rem;

  }
}

.search-container{
  grid-template-columns: 300px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}

#genreInput{
  width: 500px;
  justify-self: center;
  margin-left: 0rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 2;
  width: 180px;
  margin-right: 0rem;
  justify-self: center;

}

.result-container{
  display: grid;
  grid-template-columns: 450px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 16px;
  }
}
#result{
  font-size: 16px;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}
}
@media screen and (max-width: 620px) {
  .homepage-content {
    #playlist-character {
        margin-left: -2rem;
    }
    p{
      font-size: 14px;
      margin-left: -1rem;
    }
}
.main-page{
  grid-template-columns: 570px;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-size: 28px;

  }

  h3{
    font-size: 20px;
    margin-top: 0rem;
  }

  h4{
    font-size: 15px;
    margin: 0;
    margin-bottom: 2rem;

  }
    .heatmap{
    display: none;
    margin-top: 20px;
    max-width: 100%;
    justify-self: center;
  }
}

.search-container{
  grid-template-columns: 300px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}

#genreInput{
  width: 500px;
  justify-self: center;
  margin-left: 0rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 2;
  width: 180px;
  margin-right: 0rem;
  justify-self: center;

}

.result-container{
  display: grid;
  grid-template-columns: 500px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 16px;
  }
}
#result{
  font-size: 16px;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}
  .heatmap{
    display: none;
    margin-top: 20px;
    max-width: 100%;
    justify-self: center;
  }
}

@media screen and (max-width: 590px) {
  .homepage-content h1{
    font-size: 45px;
  }
  .homepage-content #hi{
    font-size: 30px;
    margin-left: 6rem;
    margin-bottom: -2rem;
  }
  .homepage-content #name{
    font-size: 30px;
    margin-top: -1rem;
  }
  .homepage-content p{
    font-size: 14px;
    grid-column: 1 / span 2;
    margin-left: 10rem;
    margin-bottom: 3rem;
  }
  
  .homepage-content #circle{
    transform: rotate(270deg) translateY(30px) translateX(-70px);
    width: 120px;
    height: 70px;
  }
  .homepage-content #circle2{
    width: 150px;
    height: 160px;
  }
  .homepage-content {
    #playlist-character {
        margin-left: 0rem;
    }
    .homepage-content {
      #spotify-playlist {
          margin-left: -2rem;
      }
    }
  }
  .about-me-content {
    #circle {
        transform: translate(calc(48vw), calc(-25vw));
    }
    #circle2{
      transform: translate(calc(19vw), calc(32vw));
    }
}
.main-page{
  grid-template-columns: 450px;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-size: 28px;

  }

  h3{
    font-size: 20px;
    margin-top: 0rem;
  }

  h4{
    font-size: 15px;
    margin: 0;
    margin-bottom: 2rem;

  }
}

.search-container{
  grid-template-columns: 300px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}

#genreInput{
  width: 400px;
  justify-self: center;
  margin-left: 0rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 2;
  width: 180px;
  margin-right: 0rem;
  justify-self: center;

}

.result-container{
  display: grid;
  grid-template-columns: 400px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 16px;
  }
}
#result{
  font-size: 16px;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}
  .heatmap{
    display: none;
    margin-top: 20px;
    max-width: 100%;
    justify-self: center;
  }
}

@media screen and (max-width:500px){
  .homepage-content p{
    margin-left: 8rem;
  }
  
  .homepage-content #circle{
    transform: rotate(270deg) translateY(-8px) translateX(-70px);
  }
  .about-me-content{
    #circle{
      transform: translate(calc(48vw), calc(-30vw));
    }
    #circle2{
      transform: translate(calc(13vw), calc(36vw));
    }
  }
  .main-page{
    grid-template-columns: 460px;
    margin: 7rem 2rem 5rem 2rem;
    gap: 1rem;
    justify-content: center;
  
    h1{
      font-size: 28px;
  
    }
  
    h3{
      font-size: 20px;
      margin-top: 0rem;
    }
  
    h4{
      font-size: 15px;
      margin: 0;
      margin-bottom: 2rem;
  
    }
  }
  
  .search-container{
    grid-template-columns: 300px;
    grid-template-rows: 1fr;
    gap: 1rem;
    margin-top: -1rem;
  }
  
  #genreInput{
    width: 400px;
    justify-self: center;
    margin-left: 0rem;
  }
  
  #predictButton{
    font-family: var(--main-font);
    grid-row: 2;
    width: 180px;
    margin-right: 0rem;
    justify-self: center;
  
  }
  
  .result-container{
    display: grid;
    grid-template-columns: 400px;
    grid-template-rows: auto;
    justify-content: center;
  
    ul,li{
      font-size: 16px;
    }
  }
  #result{
    font-size: 16px;
  }
  .help-card {
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    border-radius: 20px;
    width: 90%;            
    max-width: 350px;     
    max-height: 80vh; 
  }
  
  .help-card h2 {
    font-size: 18px;
    margin-bottom: 1rem;
  }
  
  
  .help-card .title {
    font-size: 16px;
  }
  
  .help-card ul,
  .help-card li {
    margin-left: -1rem;
    font-size: 14px;
  }
    .heatmap{
    display: none;
    margin-top: 20px;
    max-width: 100%;
    justify-self: center;
  }

}
/* small screens */
@media screen and (max-width:480px){
  .footer{
    .footer-content-trademark, p, #contact-me, #email, a{
      font-size: 14px;
    }
  }
  .homepage-content h1 {
    font-size: 40px;
    grid-column: 2 / span 4;
    justify-self: start;
    margin-left: 2rem;
  }

  .homepage-content #hi {
    font-size: 30px;
    margin-top: 2rem;
    margin-left: 0rem;
    grid-column: 1 / span 2;
    justify-self: center;
    margin-bottom: 0rem;
  }

  .homepage-content #name {
    font-size: 25px;
    margin-left: 1rem;
    grid-column: 3 / span 3;
    justify-self: start;
    margin-top: 0rem;
  }

  .homepage-content p {
    font-size: 13px;
    grid-column: 2 / span 44;
    align-self: center;
    justify-self: center;
    margin-left: -1.3rem;
    margin-bottom: 0rem;
  }
  .homepage-content #circle {
    width: 130px;
    height: 100px;
    grid-column: 5;
    justify-self: end;
    transform: rotate(270deg) translateY(50px) translateX(-60px);
    align-self: end;
    grid-row: 1;
}
  .homepage-content #circle2 {
    width: 120px;
    height: 80px;
    transform: rotate(90deg) translate(50px, 40px);
}
.homepage-content #circle4 {
  width: 100px;
  height: 100px;
  transform: translate(-90px, 290px);
}
.homepage-content #spotify-playlist {
  grid-column: 2 / span 4;
  width: 80%;
  grid-row: 6;
  justify-self: start;
  margin-left: -1rem;
}
.homepage-content #playlist-character {
  grid-column: 2 / span 3;
  width: 80%;
  max-width: 150px;
  margin-top: 0rem;
  grid-row: 5;
  justify-self: center;
  margin-bottom: -2rem;
  margin-right: 0rem;
  margin-left: 2rem;
}
.resume-content {
  display: grid;
  grid-template-columns: 1fr;
          grid-template-rows: auto;
          margin: 8rem 3rem 0 2rem;
          width: 100%;
          max-width: 430px;
}

.resume-content h1 {
  grid-column: 1;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  font-size: 28px;
  line-height: 1.5;
}

.resume-content .education-content {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
}

.resume-content .education-content h2 {
  grid-column: 1;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.resume-content .education-content h3 {
  line-height: 1.5;
  font-size: 18px;
}

.resume-content .education-content h4 {
  grid-row: 4;
  font-size: 16px;
  line-height: 1.5;
}

.resume-content .education-content p {
  grid-row: 5;
  font-size: 12px;
  line-height: 1.5;
}

.resume-content .education-content .philadelphia {
  grid-row: 3;
  justify-self: start;
  font-size: 16px;
}

.resume-content .experience-content {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
}

.resume-content .experience-content h2 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.resume-content .experience-content h3 {
  font-size: 18px;
  line-height: 1.2;
}

.resume-content .experience-content h4 {
  font-size: 16px;
  line-height: 1.5;
}

.resume-content .experience-content h4.date {
  grid-column: 1;
  justify-self: start;

}

.resume-content .experience-content ul {
  grid-column: 1;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

.resume-content .experience-content li {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.resume-content .skills-content h2 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.resume-content .skills-content p {
  font-size: 14px;
  line-height: 1.5;
}

.resume-content .resume-link {
  font-size: 14px;
  text-align: left;
  grid-column: 1;
  color: var(--main-color);
}


.about-me-content #circle {
  transform: translate(calc(50vw), calc(-25vw));
  width: 15vw;
  height: 15vw;

}

.about-me-content #circle2 {
  transform: translate(calc(18vw), calc(30vw));
}

.about-me-content .about-me-text-content {
  margin-left: 0;
  order: 2;
  margin-top: 2rem;
}

.about-me-content #welcome,
.about-me-content #intro {
  font-size: 28px;
  margin: 0 0 1rem 0;
}

.about-me-content p,
.about-me-content ul,
.about-me-content li {
  font-size: 16px;
}

.about-me-content #dayoungphoto {
  margin: 0 auto;
  justify-self: center;
  order: 1;
  transform: rotate(-7deg);
}
.about-me-content #dayoungphoto img{
  width:200px;
  margin-left: 2rem;
  margin-top: 2rem;
}
.my-projects-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  margin: 9rem 1.5rem 1rem;
  gap: 0.8rem;
  justify-content: center;
}

.my-projects-content img {
  width: 100%;
  border-radius: 20px;
  height: auto;
}

.my-projects-content #moodify,
.my-projects-content #moodify2,
.my-projects-content #moodify3,
.my-projects-content #moodify4,
.my-projects-content #moodify5,
.my-projects-content #moodify6 {
  grid-column: 1;
}

.my-projects-content #moodify {
  grid-row: 2;
}
.my-projects-content #moodify2 {
  grid-row: 5;
}
.my-projects-content #moodify3 {
  grid-row: 8;
}
.my-projects-content #moodify4 {
  grid-row: 11;
}
.my-projects-content #moodify5 {
  grid-row: 14;
}
.my-projects-content #moodify6 {
  grid-row: 17;
}

.my-projects-content #circle {
  grid-row: 1;
  width: 80px;
  height: 80px;
  transform: translate(-20px, 60px);
  grid-column: 1;
}
.my-projects-content #circle2 {
  width: 80px;
  height: 80px;
  grid-column: 1;
  transform: translate(20px, 150px);
}
.my-projects-content #circle4 {
  width: 80px;
  height: 80px;
  transform: translate(-20px, 70px);
  grid-column: 1;
  grid-row: 7;
}
.my-projects-content #circle5 {
  width: 100px;
  height: 100px;
  transform: translate(10px, -80px);
  grid-column: 1;
  grid-row: 11;
}

.my-projects-content h1 {
  grid-column: 1;
  margin: 0 0 1rem 0;
  font-size: 28px;
  line-height: 140%;
  text-align: center;
}

.my-projects-content h2.moodify,
.my-projects-content h2.goodreads,
.my-projects-content h2.haveyaheard,
.my-projects-content h2.syncwithdata {
  grid-column: 1;
  font-size: 24px;
  line-height: 150%;
  margin-top: 0.5rem;
}

.my-projects-content h2.goodreads {
  grid-row: 6;
}
.my-projects-content h2.haveyaheard {
  grid-row: 9;
}
.my-projects-content h2.syncwithdata {
  grid-row: 12;
}

.my-projects-content p.moodify,
.my-projects-content p.goodreads,
.my-projects-content p.haveyaheard,
.my-projects-content p.syncwithdata {
  grid-column: 1;
  font-size: 16px;
  line-height: 140%;
  margin-bottom: 1.5rem;
}

.my-projects-content p.goodreads {
  grid-row: 7;
}
.my-projects-content p.haveyaheard {
  grid-row: 10;
}
.my-projects-content p.syncwithdata {
  grid-row: 13;
}

.my-projects-content .tag,
.my-projects-content .tag2,
.my-projects-content .tag3,
.my-projects-content .tag4 {
  padding: 8px 12px;
  font-size: 12px;
  margin-right: 0;
  justify-self: end;
  grid-column: 1;
}

.my-projects-content .tag2 {
  grid-row: 6;
}
.my-projects-content .tag3 {
  grid-row: 9;
}
.my-projects-content .tag4 {
  grid-row: 12;
}
.line{
  width: 100%;
}
.moodify-container {
  max-width: 350px;
  padding: 0 15px;

}
.moodify-content-pt1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;

  h1 {
      justify-self: center;
      margin-top: 1rem;
      margin-bottom: 1rem;
  }
}

.moodify-content-pt1 img {
  max-width: 100%;
  height: auto;
  width: 350px;
  max-height: 800px;
  justify-self: center;
}
.moodify-casestudy {
  font-weight: 400;
  font-size: 13px;
  line-height: 160%;
  max-width: 350px;
  align-self: center;
  justify-self: center;
  margin: -0.5rem 0.5rem 0 0.5rem;
}
.moodify-tableofcontents {
  display: grid;
  grid-template-columns: 350px;
  width: 100%;

  ul,li{
    font-size: 16px;
  }

}
.introduction-moodify,
.our-team,
.tools-used,
.initial-concept,
.the-challenge,
.process,
.processpt2,
.takeaways,
.redesign,
.problems,
.myprocess,
.final-takeaways {
  display: grid;
  grid-template-columns: 350px;
  width: 100%;
}
.introduction-moodify h2,
.our-team h2,
.tools-used h2,
.initial-concept h2,
.the-challenge h2,
.process h2,
.takeaways h2,
.redesign h2,
.problems h2,
.process h2,
.myprocess h2,
.final-takeaways h2  {
  font-size: 20px;
  font-family: var(--main-font);
}
.introduction-moodify p,
.initial-concept p,
.redesign p,
.problems p,
.process p, .processpt2 p,
.final-takeaways p, .takeaways p, .myprocess p,.our-team ul, 
.our-team li,
.tools-used ul, 
.tools-used li, .problems ul, 
.problems li, .the-challenge ul,
.the-challenge li {
  font-size: 18px;
}

.the-challenge h3 {
  font-size: 16px;
}

.image-container-moodify {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 300px;
  justify-self: center;
  margin-left: 0rem;
}
.takeaways{
  a {
    font-size: 18px;
  }
}

.goodreads-container {
  max-width: 350px;
  padding: 0 15px;
}
.goodreads-content-pt1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;

  h1 {
    font-size: 28px;
    margin-bottom: 0rem;
  }
  
  img {
    width: 350px;
    max-width: 100%;
    height: auto;
  }
  
  p {
    font-size: 18px;
    line-height: 150%;
  }
  
  ul, li {
    font-size: 18px;
    line-height: 150%;
  }
}

.goodreads-tableofcontents {
  display: grid;
  grid-template-columns: 350px;
  width: 100%;

  ul,li{
    font-size: 16px;
  }
}

.goodreads-casestudy {
  grid-column: 1 / span 1;
  grid-row: 3;
  font-size: 13px;
  line-height: 160%;
  max-width: 350px;
  align-self: center;
  justify-self: center;
  margin: -0.5rem 0.5rem 0 0.5rem;
  
}

.introduction-goodreads,
.problemswithcurrentdesign,
.userresearch,.user-research-feedback,.prototype-goodreads,
.process,.next-steps,
.wireframes, .impact, .takeaways-goodreads, .final-takeaways {
  display: grid;
  grid-template-columns: 350px;
  width: 100%;
  justify-content: center;

  h2 {
    font-size: 20px;
    line-height: 160%;
  }
  
  h3 {
    font-size: 16px;
    line-height: 160%;
  }
  
  p {
    font-size: 18px;
    line-height: 150%;
  }
  
  ul, li {
    font-size: 18px;
    line-height: 150%;
    
    img {
      width: 100%;
      max-width: 320px;
    }
  }
}
.problemswithcurrentdesign .bad-design-list,.baddesign1 {
  list-style: none;
}
.problemswithcurrentdesign {  
   .ul, li{
    img {
      width: 400px;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      margin-left: -1.5rem;
    }
  .shelving-images {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;

    .bad-design1, .bad-design3 {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      max-width: 200px;
      margin-left: 0;
    }
    .bad-design2 {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
      margin-left: 0rem;
    }
  .bad-design4 {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
      max-width: 300px;
      margin-left: 0;
      align-self: start;
    }
  }
}
}

.userresearch2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  width: 100%;
  gap: 15px;
  
  .subject-a{
    h3 {
      font-size: 16px;
      line-height: 160%;
    }
    
    p, ul, li {
      font-size: 18px;
      line-height: 150%;
    }
  }
  .subject-b{
    margin-left: 1rem;
    h3{
      font-size: 18px;
      line-height: 160%;

    }
    p, ul, li {
      font-size: 18px;
      line-height: 150%;
    }
  }
}

.process {
  h3 {
    margin-left: 1rem;
    margin-top: 0.5rem;
  }
  
  img.goodreads-fonts {
    width: 250px;
    margin-left: 0;
  }
}

.color-scheme {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 10px;
  margin-left: 1rem;
  margin-top: 1rem;
  max-width: 300px;
  align-items: center;

  .circlefilled {
    width: 40px;
    height: 40px;
  }
  
  h4 {
    font-size: 15px;
    line-height: 150%;
  }
}

.wireframes {
  h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .wireframe-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
  }
  
  img.lowfi1, img.lowfi2, img.lowfi3, img.lowfi4 {
    grid-column: 1;
    max-width: 320px;
    margin-left: 0;
    justify-self: center;
  }
  
  img.lowfi1, img.lowfi3 {
    grid-row: 1;
  }
  
  img.lowfi2, img.lowfi4 {
    grid-row: 2;
  }
  
  p.wireframe-mobile-explanation,
  p.wireframe-desktop-explanation {
    grid-column: 1;
    grid-row: 3;
    font-size: 14px;
    line-height: 150%;
    max-width: 320px;
    margin-right: 0;
    justify-self: center;
  }
}
.prototype{
  a{
    color: var(--main-color);
    font-family: var(--secondary-font);
  }
}
.haveyaheard-container{
  max-width: 350px;
  margin: 8rem auto 1rem;
}
.haveyaheard-content{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}
.haveyaheard-content{
  h1{
    font-size: 28px;
  }
}
.haveyaheard-content img{
  max-width: 100%;
  height: auto;
  width: 350px;
  max-height: 800px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  justify-self: center;
}
.haveyaheard-casestudy{
  grid-column: 1 / span 1;
  grid-row: 3;
  font-weight: 400;
  line-height: 160%;
  max-width: 350px;
  align-self: center;
  justify-self: center;
  margin: -0.5rem 0.5rem 0 0.5rem;

  p{
    font-size: 18px;
  }
}
.haveyaheard-tableofcontents{
  display: grid;
  grid-template-columns: 350px;
  width: 100%;

  ul,li{
    font-size: 16px;
  }

}
.haveyaheard-content {
  .introduction, .tools-used, .our-team, .problems, .objective, .our-users, .our-process, .our-goals, .our-business-concept, .the-solution, .limitations, .prototype, .takeaways, .future-applications {
    display: grid;
    grid-template-columns: 350px;
    width: 100%;
    justify-content: center;
    justify-items: start;

    h2{
      font-size: 20px;
    }
    p{
      font-size: 18px;
    }
    h3{
      font-size: 16px;
    }
    ul,li{
      font-size: 18px;
    }
    h4{
      font-size:15px ;
    }
  }
}
.haveyaheard-content img{
  max-width: 100%;
  height: auto;
  width: 350px;
  justify-self: center;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}

.syncwithdata-container{
  max-width: 350px;
  padding: 0 15px;
}
.syncwithdata-content img{
  max-width: 100%;
  width: 350px;
}
.syncwithdata-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  width: 100%;
  justify-content: center;

  h1{
    font-size: 28px;
  }
}
.syncwithdata-casestudy{
  font-weight: 400;
  font-size: 13px;
  line-height: 160%;
  max-width: 350px;
  align-self: center;
  justify-self: center;
  margin: -0.5rem 0.5rem 0 0.5rem;
}

.syncwithdata-tableofcontents{
  display: grid;
  grid-template-columns: 350px;
  width: 100%;

  ul,li{
    font-size: 16px;
  }
}
.introduction-syncwithdata,.research-question,.importance,.project-details,.research-phase,.data-analysis-phase,.challenges-syncwithdata,.next-steps-syncwithdata,.conclusion-syncwithdata{
  display: grid;
  grid-template-columns: 350px;
}

.research-phase h3, .data-analysis-phase h3{
  font-size: 16px;
}

.introduction-syncwithdata h2,.research-question h2,.importance h2,.project-details h2,.challenges-syncwithdata h2,.next-steps-syncwithdata h2,.conclusion-syncwithdata h2{
  font-size:20px;
}
.introduction-syncwithdata p,.research-question p,.importance p,.project-details p,.challenges-syncwithdata p,.next-steps-syncwithdata p,.conclusion-syncwithdata p{
  font-size: 18px;
}

.research-question h4{
  font-size:15px ;
}
.importance{
  ul,li{
    font-size: 18px;
  }
}
.research-phase, .data-analysis-phase, .challenges-syncwithdata, .next-steps-syncwithdata{
  ul,li{
    font-size: 18px;
  }
}

.main-page{
  grid-template-columns: 440px;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-size: 28px;

  }

  h3{
    font-size: 20px;
    margin-top: 0rem;
  }

  h4{
    font-size: 15px;
    margin: 0;
    margin-bottom: 2rem;

  }
}

.search-container{
  grid-template-columns: 300px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}

#genreInput{
  width: 400px;
  justify-self: center;
  margin-left: 0rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 2;
  width: 180px;
  margin-right: 0rem;
  justify-self: center;

}

.result-container{
  display: grid;
  grid-template-columns: 400px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 16px;
  }
}
#result{
  font-size: 16px;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}
  .heatmap{
    display: none;
    margin-top: 20px;
    max-width: 100%;
    justify-self: center;
  }
}


@media screen and (max-width:450px){
  .footer{
    .footer-content-trademark, p, #contact-me, #email, a{
      font-size: 14px;
    }
  }
  .homepage-content h1 {
    font-size: 40px;
    margin-left: -5rem;
    grid-column: 2 / span 4;
    justify-self: center;
  }

  .homepage-content #hi {
    font-size: 30px;
    margin-top: 2rem;
    margin-left: 0rem;
    grid-column: 1 / span 2;
    justify-self: center;
  }

  .homepage-content #name {
    font-size: 25px;
    margin-left: 1rem;
    grid-column: 3 / span 3;
    justify-self: start;
  }

  .homepage-content p {
    font-size: 13px;
    grid-column: 2 / span 44;
    align-self: center;
    justify-self: center;
    margin-left: -3rem;
  }
  .homepage-content #circle {
    width: 130px;
    height: 100px;
    grid-column: 5;
    justify-self: end;
    transform: rotate(270deg) translateY(50px) translateX(-60px);
    align-self: end;
    grid-row: 1;
}
  .homepage-content #circle2 {
    width: 120px;
    height: 80px;
    transform: rotate(90deg) translate(50px, 40px);
}
.homepage-content #circle4 {
  width: 100px;
  height: 100px;
  transform: translate(-90px, 290px);
}
.homepage-content #spotify-playlist {
  grid-column: 2 / span 4;
  width: 80%;
  grid-row: 6;
  justify-self: start;
  margin-left: -1rem;
}
.homepage-content #playlist-character {
  grid-column: 2 / span 3;
  width: 80%;
  max-width: 150px;
  margin-top: 0rem;
  grid-row: 5;
  justify-self: center;
  margin-bottom: -2rem;
  margin-right: 0rem;
  margin-left: 2rem;
}
.resume-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  margin: 8rem 1rem 0 1rem;
  width: 100%;
  max-width: 400px;
}

.resume-content h1 {
  grid-column: 1;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  font-size: 28px;
  line-height: 1.5;
}

.resume-content .education-content {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
}

.resume-content .education-content h2 {
  grid-column: 1;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.resume-content .education-content h3 {
  line-height: 1.5;
  font-size: 18px;
}

.resume-content .education-content h4 {
  grid-row: 4;
  font-size: 16px;
  line-height: 1.5;
}

.resume-content .education-content p {
  grid-row: 5;
  font-size: 12px;
  line-height: 1.5;
}

.resume-content .education-content .philadelphia {
  grid-row: 3;
  justify-self: start;
  font-size: 16px;
}

.resume-content .experience-content {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
}

.resume-content .experience-content h2 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.resume-content .experience-content h3 {
  font-size: 18px;
  line-height: 1.2;
}

.resume-content .experience-content h4 {
  font-size: 16px;
  line-height: 1.5;
}

.resume-content .experience-content h4.date {
  grid-column: 1;
  justify-self: start;

}

.resume-content .experience-content ul {
  grid-column: 1;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

.resume-content .experience-content li {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.resume-content .skills-content h2 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.resume-content .skills-content p {
  font-size: 14px;
  line-height: 1.5;
}

.resume-content .resume-link {
  font-size: 14px;
  text-align: left;
  grid-column: 1;
  color: var(--main-color);
}


.about-me-content #circle {
  transform: translate(calc(45vw), calc(-25vw));
}

.about-me-content #circle2 {
  transform: translate(calc(12vw), calc(30vw));
}

.about-me-content .about-me-text-content {
  margin-left: 0;
  order: 2;
  margin-top: 2rem;
}

.about-me-content #welcome,
.about-me-content #intro {
  font-size: 28px;
  margin: 0 0 1rem 0;
}

.about-me-content p,
.about-me-content ul,
.about-me-content li {
  font-size: 16px;
}

.about-me-content #dayoungphoto {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  order: 1;
  transform: rotate(-7deg);
}
.about-me-content #dayoungphoto img{
  width:200px;
  margin-left: 2rem;
  margin-top: 2rem;
}
.my-projects-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  margin: 9rem 1.5rem 1rem;
  gap: 0.8rem;
  justify-content: center;
}

.my-projects-content img {
  width: 100%;
  border-radius: 20px;
  height: auto;
}

.my-projects-content #moodify,
.my-projects-content #moodify2,
.my-projects-content #moodify3,
.my-projects-content #moodify4,
.my-projects-content #moodify5,
.my-projects-content #moodify6 {
  grid-column: 1;
}

.my-projects-content #moodify {
  grid-row: 2;
}
.my-projects-content #moodify2 {
  grid-row: 5;
}
.my-projects-content #moodify3 {
  grid-row: 8;
}
.my-projects-content #moodify4 {
  grid-row: 11;
}
.my-projects-content #moodify5 {
  grid-row: 14;
}
.my-projects-content #moodify6 {
  grid-row: 17;
}

.my-projects-content #circle {
  grid-row: 1;
  width: 80px;
  height: 80px;
  transform: translate(-20px, 60px);
  grid-column: 1;
}
.my-projects-content #circle2 {
  width: 80px;
  height: 80px;
  grid-column: 1;
  transform: translate(20px, 150px);
}
.my-projects-content #circle4 {
  width: 80px;
  height: 80px;
  transform: translate(-20px, 70px);
  grid-column: 1;
  grid-row: 7;
}
.my-projects-content #circle5 {
  width: 100px;
  height: 100px;
  transform: translate(10px, -80px);
  grid-column: 1;
  grid-row: 11;
}

.my-projects-content h1 {
  grid-column: 1;
  margin: 0 0 1rem 0;
  font-size: 28px;
  line-height: 140%;
  text-align: center;
}

.my-projects-content h2.moodify,
.my-projects-content h2.goodreads,
.my-projects-content h2.haveyaheard,
.my-projects-content h2.syncwithdata {
  grid-column: 1;
  font-size: 24px;
  line-height: 150%;
  margin-top: 0.5rem;
}

.my-projects-content h2.goodreads {
  grid-row: 6;
}
.my-projects-content h2.haveyaheard {
  grid-row: 9;
}
.my-projects-content h2.syncwithdata {
  grid-row: 12;
}

.my-projects-content p.moodify,
.my-projects-content p.goodreads,
.my-projects-content p.haveyaheard,
.my-projects-content p.syncwithdata {
  grid-column: 1;
  font-size: 16px;
  line-height: 140%;
  margin-bottom: 1.5rem;
}

.my-projects-content p.goodreads {
  grid-row: 7;
}
.my-projects-content p.haveyaheard {
  grid-row: 10;
}
.my-projects-content p.syncwithdata {
  grid-row: 13;
}

.my-projects-content .tag,
.my-projects-content .tag2,
.my-projects-content .tag3,
.my-projects-content .tag4 {
  padding: 8px 12px;
  font-size: 12px;
  margin-right: 0;
  justify-self: end;
  grid-column: 1;
}

.my-projects-content .tag2 {
  grid-row: 6;
}
.my-projects-content .tag3 {
  grid-row: 9;
}
.my-projects-content .tag4 {
  grid-row: 12;
}
.line{
  width: 100%;
}
.moodify-container {
  max-width: 350px;
  padding: 0 15px;

}
.moodify-content-pt1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;

  h1 {
      font-size: 25px;
  }
}

.moodify-content-pt1 img {
  max-width: 100%;
  height: auto;
  width: 350px;
  max-height: 800px;
  justify-self: center;
}
.moodify-casestudy {
  font-weight: 400;
  font-size: 13px;
  line-height: 160%;
  max-width: 350px;
  align-self: center;
  justify-self: center;
  margin: -0.5rem 0.5rem 0 0.5rem;
}
.moodify-tableofcontents {
  display: grid;
  grid-template-columns: 350px;
  width: 100%;

  ul,li{
    font-size: 15px;
  }

}
.introduction-moodify,
.our-team,
.tools-used,
.initial-concept,
.the-challenge,
.process,
.processpt2,
.takeaways,
.redesign,
.problems,
.myprocess,
.final-takeaways {
  display: grid;
  grid-template-columns: 350px;
  width: 100%;
}
.introduction-moodify h2,
.our-team h2,
.tools-used h2,
.initial-concept h2,
.the-challenge h2,
.process h2,
.takeaways h2,
.redesign h2,
.problems h2,
.process h2,
.myprocess h2,
.final-takeaways h2{
  font-size: 18px;
  font-family: var(--main-font);
  font-weight: 600;
 
}
.introduction-moodify p,
.initial-concept p,
.redesign p,
.problems p,
.process p, .processpt2 p,
.final-takeaways p, .takeaways p, .myprocess p,.our-team ul, 
.our-team li,
.tools-used ul, 
.tools-used li, .problems ul, 
.problems li, .the-challenge ul,
.the-challenge li {
  font-size: 14px;
}

.the-challenge h3 {
  font-size: 16px;
}

.image-container-moodify {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 300px;
  justify-self: center;
  margin-left: 0rem;
}
.takeaways{
  a {
    font-size: 14px;
  }
}

.goodreads-container {
  max-width: 350px;
  padding: 0 15px;
}
.goodreads-content-pt1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;

  h1 {
    font-size: 25px;
    margin-bottom: 0rem;
  }
  
  img {
    width: 350px;
    max-width: 100%;
    height: auto;
  }
  
  p {
    font-size: 14px;
    line-height: 150%;
  }
  
  ul, li {
    font-size: 15px;
    line-height: 150%;
  }
}

.goodreads-tableofcontents {
  display: grid;
  grid-template-columns: 350px;
  width: 100%;

  ul,li{
    font-size: 15px;
  }
}

.goodreads-casestudy {
  grid-column: 1 / span 1;
  grid-row: 3;
  font-size: 13px;
  line-height: 160%;
  max-width: 350px;
  align-self: center;
  justify-self: center;
  margin: -0.5rem 0.5rem 0 0.5rem;
  
}

.introduction-goodreads,
.problemswithcurrentdesign,
.userresearch,.user-research-feedback,.prototype-goodreads,
.process,.next-steps,
.wireframes, .impact, .takeaways-goodreads {
  display: grid;
  grid-template-columns: 350px;
  width: 100%;
  justify-content: center;

  h2 {
    font-size: 16px;
    line-height: 160%;
  }
  
  h3 {
    font-size: 16px;
    line-height: 160%;
  }
  
  p {
    font-size: 14px;
    line-height: 150%;
  }
  
  ul, li {
    font-size: 14px;
    line-height: 150%;
    
    img {
      width: 100%;
      max-width: 320px;
    }
  }
}


.problemswithcurrentdesign .bad-design-list,.baddesign1 {
  list-style: none;
}
.problemswithcurrentdesign {  
   .ul, li{
    img {
      width: 400px;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      margin-left: -1.5rem;
    }
  .shelving-images {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;

    .bad-design1, .bad-design3 {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      max-width: 200px;
      margin-left: 0;
    }
    .bad-design2 {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
      margin-left: 0rem;
    }
  .bad-design4 {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
      max-width: 300px;
      margin-left: 0;
      align-self: start;
    }
  }
}
}

.userresearch2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  width: 100%;
  gap: 15px;
  
  .subject-a{
    h3 {
      font-size: 16px;
      line-height: 160%;
    }
    
    p, ul, li {
      font-size: 14px;
      line-height: 150%;
    }
  }
  .subject-b{
    margin-left: 1rem;
    h3{
      font-size: 16px;
      line-height: 160%;

    }
    p, ul, li {
      font-size: 14px;
      line-height: 150%;
    }
  }
}

.process {
  h3 {
    margin-left: 1rem;
    margin-top: 0.5rem;
  }
  
  img.goodreads-fonts {
    width: 250px;
    margin-left: 0;
  }
}



.wireframes {
  h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .wireframe-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
  }
  
  img.lowfi1, img.lowfi2, img.lowfi3, img.lowfi4 {
    grid-column: 1;
    max-width: 320px;
    margin-left: 0;
    justify-self: center;
  }
  
  img.lowfi1, img.lowfi3 {
    grid-row: 1;
  }
  
  img.lowfi2, img.lowfi4 {
    grid-row: 2;
  }
  
  p.wireframe-mobile-explanation,
  p.wireframe-desktop-explanation {
    grid-column: 1;
    grid-row: 3;
    font-size: 14px;
    line-height: 150%;
    max-width: 320px;
    margin-right: 0;
    justify-self: center;
  }
}
.prototype{
  a{
    color: var(--main-color);
    font-family: var(--secondary-font);
  }
}
.haveyaheard-container{
  max-width: 350px;
  margin: 8rem auto 1rem;
}
.haveyaheard-content{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}
.haveyaheard-content{
  h1{
    font-size: 25px;
  }
}
.haveyaheard-content img{
  max-width: 100%;
  height: auto;
  width: 350px;
  max-height: 800px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  justify-self: center;
}
.haveyaheard-casestudy{
  p{
    font-size: 13px;
  }
}
.haveyaheard-tableofcontents{
  display: grid;
  grid-template-columns: 350px;
  width: 100%;

  ul,li{
    font-size: 15px;
  }

}
.haveyaheard-content {
  .introduction, .tools-used, .our-team, .problems, .objective, .our-users, .our-process, .our-goals, .our-business-concept, .the-solution, .limitations, .prototype, .takeaways, .future-applications {
    display: grid;
    grid-template-columns: 350px;
    width: 100%;
    justify-content: center;
    justify-items: start;

    h2{
      font-size: 18px;
    }
    p{
      font-size: 14px;
    }
    h3{
      font-size: 16px;
    }
    ul,li{
      font-size: 14px;
    }
    h4{
      font-size:17px ;
    }
  }
}
.haveyaheard-content img{
  max-width: 100%;
  height: auto;
  width: 350px;
  justify-self: center;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}

.syncwithdata-container{
  max-width: 350px;
  padding: 0 15px;
}
.syncwithdata-content img{
  max-width: 100%;
  width: 350px;
}
.syncwithdata-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  width: 100%;
  justify-content: center;

  h1{
    font-size: 25px;
  }
}


.syncwithdata-tableofcontents{
  ul,li{
    font-size: 15px;
  }
}


.research-phase h3, .data-analysis-phase h3{
  font-size: 16px;
}

.introduction-syncwithdata h2,.research-question h2,.importance h2,.project-details h2,.challenges-syncwithdata h2,.next-steps-syncwithdata h2,.conclusion-syncwithdata h2{
  font-size:18px;
}
.introduction-syncwithdata p,.research-question p,.importance p,.project-details p,.challenges-syncwithdata p,.next-steps-syncwithdata p,.conclusion-syncwithdata p{
  font-size: 14px;
}

.research-question h4{
  font-size:17px ;
}
.importance{
  ul,li{
    font-size: 14px;
  }
}
.research-phase, .data-analysis-phase, .challenges-syncwithdata, .next-steps-syncwithdata{
  ul,li{
    font-size: 14px;
  }
}
.main-page{
  grid-template-columns: 400px;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-size: 28px;

  }

  h3{
    font-size: 20px;
    margin-top: 0rem;
  }

  h4{
    font-size: 15px;
    margin: 0;
    margin-bottom: 2rem;

  }
}

.search-container{
  grid-template-columns: 350px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}

#genreInput{
  width: 300px;
  justify-self: center;
  margin-left: 0rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 2;
  width: 180px;
  margin-right: 0rem;
  justify-self: center;

}

.result-container{
  display: grid;
  grid-template-columns: 390px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 16px;
  }
}
#result{
  font-size: 16px;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}
  .heatmap{
    display: none;
    margin-top: 20px;
    max-width: 100%;
    justify-self: center;
  }
}

@media screen and (max-width: 400px){
  .homepage-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto 150px auto;
    justify-content: space-between;
  }
  
  .homepage-content h1{
    margin-left: 2rem;
    grid-column: 1 / span 2;
    font-size: 38px;
    justify-self: center;
  }

  .homepage-content #hi{
    margin-left: 3rem;
    font-size: 25px;
    justify-self: start;
  }
  .homepage-content #name{
    font-size: 25px;
    grid-column: 2 / span 1;
    justify-self: start;
  }
  .homepage-content #circle2{
    width: 100px;
  }
  .homepage-content p{
    font-size: 12px;
    grid-column: 1 / span 2;
    justify-self: center;
    margin-left: 3rem;
  }
  .homepage-content #circle{
    width: 100px;
    height: 80px;
    grid-column: 2;
  }
  .homepage-content #playlist-character{
    grid-column: 1 / span 2;
    justify-self: center;
    margin-left: 0rem;
  }
  .homepage-content #spotify-playlist{
    grid-column: 1 / span 2;
    justify-self: center;
    margin-left: 0rem;
  }
  .footer{
    .footer-content-trademark, p, #contact-me, #email, a{
      font-size: 12px;
    }
  }
  .resume-content{
    max-width: 360px;
  }
  .about-me-content #circle{
    transform: translate(calc(40vw), calc(-30vw));
  }
  .about-me-content #circle2{
    transform: translate(calc(10vw), calc(32vw));
    }
  .moodify-container {
    max-width: 320px;
    padding: 0 15px;
}
.moodify-casestudy {
  max-width: 320px;
}
.moodify-tableofcontents {
  grid-template-columns: 320px;

}
.introduction-moodify,
.our-team,
.tools-used,
.initial-concept,
.the-challenge,
.process,
.processpt2,
.takeaways,
.redesign,
.problems,
.myprocess,
.final-takeaways {
  grid-template-columns: 320px;
}
.goodreads-container {
  max-width: 320px;
}
.goodreads-content-pt1 {
  img {
      width: 320px;
  }
}
.goodreads-casestudy {
  max-width: 320px;
}
.goodreads-tableofcontents {
  grid-template-columns: 320px;
}
.introduction-goodreads, .problemswithcurrentdesign, .userresearch, .user-research-feedback, .prototype-goodreads, .process, .next-steps, .wireframes, .impact, .takeaways-goodreads {
 grid-template-columns: 320px;
}
.introduction-goodreads, .problemswithcurrentdesign, .userresearch, .user-research-feedback, .prototype-goodreads, .process, .next-steps, .wireframes, .impact, .takeaways-goodreads {
  ul, li {
      max-width: 320px;
  }
}
.problemswithcurrentdesign {
  .ul, & li {
      img {
          width: 300px;
      }
    .shelving-images{
      .bad-design2{
        width: 290px;
        margin-left: -1rem;
      }
    }
}
}

.main-page{
  grid-template-columns: 350px;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-size: 28px;

  }

  h3{
    font-size: 20px;
    margin-top: 0rem;
  }

  h4{
    font-size: 15px;
    margin: 0;
    margin-bottom: 2rem;

  }
}

.search-container{
  grid-template-columns: 300px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}

#genreInput{
  width: 300px;
  justify-self: center;
  margin-left: 0rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 2;
  width: 180px;
  margin-right: 0rem;
  justify-self: center;

}

.result-container{
  display: grid;
  grid-template-columns: 350px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 16px;
  }
}
#result{
  font-size: 16px;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}
  .heatmap{
    display: none;
    margin-top: 20px;
    max-width: 100%;
    justify-self: center;
  }

}
@media screen and (max-width: 350px){
  .footer{
    .footer-content-trademark, p, #contact-me, #email, a{
      font-size: 10px;
    }
  }
  .homepage-content h1{
    font-size: 35px;
  }
  .homepage-content #hi{
    font-size: 20px;
  }
  .homepage-content #name{
    font-size: 20px;
  }
  .resume-content{
    max-width: 300px;
    margin: 8rem 0.8rem 0 0.8rem;

    h1{
      font-size: 25px;
    }
  }
  .about-me-content #circle2 {
    transform: translate(calc(5vw), calc(36vw));
  }
  .moodify-content-pt1{
    max-width: 300px;

    img{
      width: 300px;
    }
  }
  .moodify-casestudy {
    max-width: 300px;
} 
.moodify-tableofcontents {
  grid-template-columns: 300px;
}
.introduction-moodify, .our-team, .tools-used, .initial-concept, .the-challenge, .process, .processpt2, .takeaways, .redesign, .problems, .myprocess, .final-takeaways {
  grid-template-columns: 300px;
  h2{
    font-size: 16px;
  }
  h3{
    font-size: 15px;
  }
}
.image-container-moodify {
  margin-left: 1rem;
}
.my-projects-content h1{
  font-size: 25px;
}
.my-projects-content h2.moodify, .my-projects-content h2.goodreads, .my-projects-content h2.haveyaheard, .my-projects-content h2.syncwithdata {
  font-size: 18px;
}
.my-projects-content p.moodify, .my-projects-content p.goodreads, .my-projects-content p.haveyaheard, .my-projects-content p.syncwithdata {
  font-size: 13px;
}
.my-projects-content .tag, .my-projects-content .tag2, .my-projects-content .tag3, .my-projects-content .tag4 {
  font-size: 10px;
}
.goodreads-content-pt1{
  max-width: 300px;

  img{
    width: 300px;
  }
}
.goodreads-casestudy{
  max-width: 300px;
}
.goodreads-tableofcontents{
  grid-template-columns: 300px;
}
.introduction-goodreads, .problemswithcurrentdesign, .userresearch, .user-research-feedback, .prototype-goodreads, .process, .next-steps, .wireframes, .impact, .takeaways-goodreads {
  grid-template-columns: 300px;
}
.introduction-goodreads, .problemswithcurrentdesign, .userresearch, .user-research-feedback, .prototype-goodreads, .process, .next-steps, .wireframes, .impact, .takeaways-goodreads {
  h3 {
      font-size: 14px;
      line-height: 160%;
  }
  p, ul, li{
    font-size: 12px;
  }
}

.problemswithcurrentdesign {
  .ul, & li {
      img {
          width: 260px;
      }
      .shelving-images{
        .bad-design2{
          margin-left: -2rem;
      }
      .bad-design4{
        margin-left: -1rem;
      }
  }
  }
}
.haveyaheard-container {
  max-width: 300px;
  margin: 8rem auto 1rem;
}
.haveyaheard-content{
  img{
    width: 300px;
  }
}
.haveyaheard-casestudy{
  max-width: 300px;
}
.haveyaheard-tableofcontents{
  grid-template-columns: 300px;
}
.haveyaheard-content {
  .introduction, .tools-used, .our-team, .problems, .objective, .our-users, .our-process, .our-goals, .our-business-concept, .the-solution, .limitations, .prototype, .takeaways, .future-applications {
    grid-template-columns: 300px;

    h2{
      font-size: 16px;
    }
  }
}
.syncwithdata-container {
  max-width: 300px;
}
.syncwithdata-content img {
  width: 300px;
}
.syncwithdata-casestudy{
  max-width: 300px;
  font-size: 12px;
}
.syncwithdata-tableofcontents{
  grid-template-columns: 300px;
}
.introduction-syncwithdata, .research-question, .importance, .project-details, .research-phase, .data-analysis-phase, .challenges-syncwithdata, .next-steps-syncwithdata, .conclusion-syncwithdata {
  grid-template-columns: 300px;

  h2{
    font-size: 16px;
  }
  h3{
    font-size: 15px;
  }
  h4{
    font-size: 14px;
  }
  p, ul, li{
    font-size: 12px;
  }
}
/* sync with data */

.main-page{
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: auto;
  margin: 7rem 2rem 5rem 2rem;
  gap: 1rem;
  justify-content: center;

  h1{
    font-family: var(--main-font);
    font-size: 25px;
    color: var(--secondary-color);
    text-align: center;
    grid-row: 2;
    font-weight: 600;
  }

  .data{
    color: #3E92CC;
  }
  .instinct{
    color: #3E92CC;
  }

  h3{
    font-family: var(--main-font);
    font-weight: 400;
    text-align: center;
    font-size: 18px;
    grid-row: 3;
    margin-top: 0rem;
  }

  h4{
    font-family: var(--secondary-font);
    color: #3E92CC;
    text-align: center;
    font-size: 13px;
    grid-row: 4;
    margin: 0;
    margin-bottom: 2rem;
    font-weight: 400;
  }
}

.search-container{
  grid-template-columns: 300px;
  grid-template-rows: 1fr;
  gap: 1rem;
  margin-top: -1rem;
}
#genreInput{
  width: 300px;
  justify-self: center;
  margin-left: 0rem;
}

#predictButton{
  font-family: var(--main-font);
  grid-row: 2;
  width: 180px;
  margin-right: 0rem;
  justify-self: center;

}

.result-container{
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: auto;
  justify-content: center;

  ul,li{
    font-size: 15px;
  }
}
#result{
  font-size: 16px;
}

.help-button{
  width: 40px;
  cursor: pointer;
}
.help-card {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  border-radius: 20px;
  width: 90%;            
  max-width: 350px;     
  max-height: 80vh; 
}

.help-card h2 {
  font-size: 18px;
  margin-bottom: 1rem;
}


.help-card .title {
  font-size: 16px;
}

.help-card ul,
.help-card li {
  margin-left: -1rem;
  font-size: 14px;
}
.close-btn-help {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  cursor: pointer;
  background-color: #3E92CC;
  border: none;
  color: white;
}
  .heatmap{
    display: none;
    margin-top: 20px;
    max-width: 100%;
    justify-self: center;
  }

/* .help-card{
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -70%);
  background-color: #3E92CC;
  color: var(--color-base);
  padding: 30px 40px;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  max-width: 520px;
  text-align: center;
  
  h2{
      font-family: var(--main-font);
      color: var(--color-base);
      font-size: 18px;
  }

  h4{
      font-family: var(--main-font);
      color: var(--color-base);
      font-size: 15px;
  }
  ul,li{
      font-family: var(--main-font);
      color: var(--color-base);
      list-style-type: none;
      text-align: left;
      margin-left: -0.5rem;
      line-height: 180%;
  }

  .indent{
      margin-left: 1rem;
  }
  .title{
      font-size: 18px;
  }
} */
}


/* :root{
  --color-base: #FFFFFF;
  --main-text-color: #1D1E18;
  --secondary-color: #3E92CC;
  --tertiary-color:#EAEAEA;

  --background-color: var(--color-base);

  --main-font: "Lato";
  --extra-bold-main-font: "Lato-Extra-Bold";
  --bold-main-font: "Lato-Bold";
  --light-main-font: "Lato-Light";
  --thin-main-font: "Lato-Thin";
  --secondary-font: "Roboto";
} */


b{
  font-family: var(--bold-main-font);
}