/* * MEDIA QUERIES * */
/* * How this all works: */
/* * 1. cry * */
/* * 2. The media.css file should contain every class and id from almost all files to make the website accessible to all Device Resolutions. 
* This essentially means that every index.html tag should be processed here and not elsewhere to make debugging and organisation better.
* * This file is the only one that should contain media queries, so that it is easier to find and edit them. To clarify further:
* - Class and Id Tags regarding Media Queries should be placed here, i.e. /About/index.html tags go here to make the About page fitting for all devices.
* - Class and Id Tags regarding design go in their respective files, i.e. /About/style.css.
* - If there are tags with the same name, rename the newest tag to something more specific, 
* i.e. .HeroIntro in /About/index.html should be renamed to .AboutHeroIntro.
* */
/* * 3. cry some more * */

@media screen and (max-width: 1600px) {
  .HeroIntro h1 {
    width: 75%;
  }
}

@media screen and (max-width: 1200px) {
  .HeroIntro h1 {
    width: 50%;
    font-size: 4rem;
  }

  .HeroIntro p {
    width: 50%;
    font-size: 0.9rem;
  }

  #AboutMeText {
    width: 100%;
  }

  .InfoSection {
    width: 100%;
    flex-direction: column;
  }

  .BoxImage {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
  }

  #LaptopLogo {
    width: 10%;
  }
}

@media screen and (max-width: 900px) {
  .HeroIntro h1 {
    width: 50%;
    font-size: 2rem;
  }

  .HeroIntro p {
    width: 50%;
    font-size: 50%;
  }

  #AboutMeText {
    width: 100%;
  }

  .InfoSection {
    width: 100%;
    flex-direction: column;
  }

  .BoxImage {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #LaptopLogo {
    width: 15%;
  }

  #ShowcaseTitle h1 {
    font-size: small;
  }

  #ShowcaseText p {
    font-size: x-small;
  }

  #LargerHeader {
    font-size: 2.25rem;
  }

  #LargerParagraph {
    font-size: 0.7rem; /* such a weird number */
    text-align: center;
  }
}

@media screen and (max-width: 560px) {
  .Navbar {
    font-size: xx-small;
  }

  .HeroIntro h1 {
    width: 50%;
    font-size: 1rem;
  }

  .HeroIntro p {
    width: 50%;
    font-size: 25%;
    bottom: 10%;
  }

  #AboutMeText h1 {
    font-size: small;
    width: 100%;
  }

  #AboutMeText p {
    font-size: x-small;
    width: 100%;
  }

  .Tagline {
    font-size: x-small;
  }

  #ShowcaseSection {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    flex-direction: column;
  }

  #ShowcaseText {
    width: 100%;
    margin: 0;
  }

  #LargerHeader {
    font-size: 1.5rem;
  }

  #LargerParagraph {
    font-size: 0.625rem; /* such a weird number */
  }

  .Button {
    height: 35px;
    width: 75px;
    padding: 0;
  }

  .wrapper {
    width: 25%;
  }

  #FooterLogo {
    width: 15%;
  }

  .UpperFooter {
    width: 100%;
    margin: 0;
  }

  .NavLink {
    font-size: x-small;
  }
  #FooterSocials img {
    width: 50%;
  }

  #FooterSocials a {
    width: 45%;
  }

  #FooterLinks {
    display: flex;
    justify-content: center;
  }
}