@media (max-width: 800px) {
  body {
    font-size: 90%;
    /*
    * Just a quick hamburger
    */
    /* 
    * Transform all the slices of hamburger
    * into a crossmark.
    */
    /*
    * Make this absolute positioned
    * at the top left of the screen
    */
    /*
    * And let's slide it in from the left
    */ }
    body .statePic {
      display: flex;
      flex-direction: column; }
    body #menuToggle {
      display: block;
      position: relative;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none; }
    body #menuToggle a {
      text-decoration: none;
      color: white;
      transition: color 0.3s ease; }
      body #menuToggle a:hover {
        color: white;
        border-radius: 12px; }
      body #menuToggle a.active {
        color: white;
        background-color: #708090;
        color: #500000;
        text-decoration: underline; }
    body #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer;
      opacity: 0;
      /* hide this */
      z-index: 2;
      /* and place it over the hamburger */
      -webkit-touch-callout: none; }
    body #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #708090;
      border-radius: 3px;
      z-index: 1;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
      body #menuToggle span:first-child {
        transform-origin: 0% 0%; }
      body #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%; }
    body #menuToggle input:checked ~ span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: lightgray;
      /*
      * But let's hide the middle one.
      */
      /*
      * Oh yeah and the last one should go the other direction
      */ }
      body #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2); }
      body #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px); }
    body #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 110px;
      background: #708090;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      /* to stop flickering of text in safari */
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
    body #menu li {
      padding: 10px 0;
      font-size: 22px;
      padding-left: 10px;
      padding-right: 15px; }
    body #menuToggle input:checked ~ ul {
      transform: none; }
    body .welcome {
      padding-left: 0px; }
    body .statement {
      padding-left: 0px; }
    body .topnav {
      animation: none; }
    body #myBTN {
      background-color: #500000;
      color: lightgray;
      border: none;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      margin: 4px 2px;
      display: block;
      cursor: pointer;
      visibility: visible;
      border-radius: 12px; }
    body #myBTN a:visited {
      background-color: #500000;
      color: lightgray; }

  .traits {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 175%; } }
@media (max-width: 600px) {
  body {
    font-size: 95%;
    /*
    * Just a quick hamburger
    */
    /* 
    * Transform all the slices of hamburger
    * into a crossmark.
    */
    /*
    * Make this absolute positioned
    * at the top left of the screen
    */
    /*
    * And let's slide it in from the left
    */ }
    body .statePic {
      display: flex;
      flex-direction: column; }
    body #menuToggle {
      display: block;
      position: relative;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none; }
    body #menuToggle a {
      text-decoration: none;
      color: white;
      transition: color 0.3s ease; }
      body #menuToggle a:hover {
        color: white;
        border-radius: 12px; }
      body #menuToggle a.active {
        color: white;
        background-color: #708090;
        color: #500000;
        text-decoration: underline; }
    body #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer;
      opacity: 0;
      /* hide this */
      z-index: 2;
      /* and place it over the hamburger */
      -webkit-touch-callout: none; }
    body #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #708090;
      border-radius: 3px;
      z-index: 1;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
      body #menuToggle span:first-child {
        transform-origin: 0% 0%; }
      body #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%; }
    body #menuToggle input:checked ~ span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: lightgray;
      /*
      * But let's hide the middle one.
      */
      /*
      * Oh yeah and the last one should go the other direction
      */ }
      body #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2); }
      body #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px); }
    body #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 110px;
      background: #708090;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      /* to stop flickering of text in safari */
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
    body #menu li {
      padding: 10px 0;
      font-size: 22px;
      padding-left: 10px;
      padding-right: 15px; }
    body #menuToggle input:checked ~ ul {
      transform: none; }
    body .welcome {
      padding-left: 0px; }
    body .statement {
      padding-left: 0px; }
    body .topnav {
      animation: none; }
    body #myBTN {
      background-color: #500000;
      color: lightgray;
      border: none;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      margin: 4px 2px;
      display: block;
      cursor: pointer;
      visibility: visible;
      border-radius: 12px; }
    body #myBTN a:visited {
      background-color: #500000;
      color: lightgray; }

  .traits {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 150%; } }
@media (max-width: 458px) {
  body {
    font-size: 100%;
    /*
    * Just a quick hamburger
    */
    /* 
    * Transform all the slices of hamburger
    * into a crossmark.
    */
    /*
    * Make this absolute positioned
    * at the top left of the screen
    */
    /*
    * And let's slide it in from the left
    */ }
    body .statePic {
      display: flex;
      flex-direction: column; }
    body #menuToggle {
      display: block;
      position: relative;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none; }
    body #menuToggle a {
      text-decoration: none;
      color: white;
      transition: color 0.3s ease; }
      body #menuToggle a:hover {
        color: white;
        border-radius: 12px; }
      body #menuToggle a.active {
        color: white;
        background-color: #708090;
        color: #500000;
        text-decoration: underline; }
    body #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer;
      opacity: 0;
      /* hide this */
      z-index: 2;
      /* and place it over the hamburger */
      -webkit-touch-callout: none; }
    body #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #708090;
      border-radius: 3px;
      z-index: 1;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
      body #menuToggle span:first-child {
        transform-origin: 0% 0%; }
      body #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%; }
    body #menuToggle input:checked ~ span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: lightgray;
      /*
      * But let's hide the middle one.
      */
      /*
      * Oh yeah and the last one should go the other direction
      */ }
      body #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2); }
      body #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px); }
    body #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 110px;
      background: #708090;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      /* to stop flickering of text in safari */
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
    body #menu li {
      padding: 10px 0;
      font-size: 22px;
      padding-left: 10px;
      padding-right: 15px; }
    body #menuToggle input:checked ~ ul {
      transform: none; }
    body .welcome {
      padding-left: 0px; }
    body .statement {
      padding-left: 0px; }
    body .topnav {
      animation: none; }
    body #myBTN {
      background-color: #500000;
      color: lightgray;
      border: none;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      margin: 4px 2px;
      display: block;
      cursor: pointer;
      visibility: visible;
      border-radius: 12px; }
    body #myBTN a:visited {
      background-color: #500000;
      color: lightgray; }
  
  .traits {
    display: flex;
    flex-direction: column;
    justify-content: space-around; }
 
  content ul{ 
    padding-right: 20px;}
  
  content li{ 
    padding-right: 20px;}
}

/*# sourceMappingURL=mobile_style.css.map */