@import '../essentials.css';
@import 'blog-previews.css';
@import 'name-top.css';
@import 'nav.css';

.intro {
  background: var(--intro-background);
  height: 100vh;
  max-height: 10in;
  width: 100vw;
  padding: 0;
  margin: 0;
  text-align: center; /* This centers the <img class="portrait"> */
}
.intro .portrait {
  display: none;
}

@media (--three-piece-viewport) {
  .intro .portrait {
    display: block;
    height: 34%;
    margin: 0 auto;
    border-radius: 5vmin;
  }
}

@media (--two-sided-viewport) {
  body {
    display: flex;
    overflow-y: scroll;
    align-items: center;
    justify-content: center;
  }
  .intro {
    width: 50vw;
    max-width: 8.5in;
  }
  .blog {
    width: 50vw;
    max-width: 8.5in;
    min-height: 0;
    height: 100vh;
    max-height: 10in;
  }
}

@import '../essentials.css';
@import 'blog-previews.css';
@import 'name-top.css';
@import 'nav.css';

.intro {
  background: var(--intro-background);
  height: 100vh;
  max-height: 10in;
  width: 100vw;
  padding: 0;
  margin: 0;
  text-align: center; /* This centers the <img class="portrait"> */
}
.intro .portrait {
  display: none;
}

@media (--three-piece-viewport) {
  .intro .portrait {
    display: block;
    height: 34%;
    margin: 0 auto;
    border-radius: 5vmin;
  }
}

@media (--two-sided-viewport) {
  body {
    display: flex;
    overflow-y: scroll;
    align-items: center;
    justify-content: center;
  }
  .intro {
    width: 50vw;
    max-width: 8.5in;
  }
  .blog {
    width: 50vw;
    max-width: 8.5in;
    min-height: 0;
    height: 100vh;
    max-height: 10in;
  }
}

@media (--extra-wide-viewport) {
  body {
    background: #6A90BD;
  }
}
@media (--extra-long-viewport) {
  body {
    background: #6A90BD;
  }
}

Set a specific background for extra large views
Set a specific background for extra large views

THIS COLOR IS SO UGLY AAASLKDJAL:SKDJAS:LKFJ IDK WHAT TO DO
