/* General styling */

  @font-face {
      font-family: 'Lato';
      src: url(../fonts/Lato-2.woff) format('woff'),
          url(../fonts/Lato-2.ttf) format('truetype');
  }
    
  html {
    height: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
  }

  body {
    font-family: 'Lato';
    font-size: 1.4vw;
    line-height: 1.8;
    height: auto;
    width: 100%;
    margin: 0;
    background-image: linear-gradient(to bottom,  #142F63, #255194);
    background-attachment: fixed;
    /* When scrolling on touchscreen, it's as if the gradient background gets pulled up with the scroll revealing a very noticable white screen behind the gradient.  Setting the background color replaces that white with the lightest color of the gradient making this glitchy behavior less obvious. */
    background-color: #255194;
    
    /* The following padding creates white space at the top and bottom of each page.  This eliminates the need for applying a bottom margin to things like story suggestion boxes in order to achieve white space at the end of the page.  Also, the following top padding allows for consistent white space at the top of each page so that the contents of each page start at the same height on the screen.  I have adopted a 'no-bottom-margin' CSS approach.  Using top margins only allows for simplicity in spacing elements consistently througout the system.  I am using a top-down approach by spacing things downward consistently with top margins. */
    padding-top: 10vw;
    padding-bottom: 15vw;
       
    color: rgb(255, 255, 255);
    letter-spacing: .08vw;
    word-spacing: .1vw;
  }

  button {
    font-family: 'Lato';
    font-weight: 900;
  }

  .text_link {
    color: rgb(160, 160, 160);
    text-decoration: none;
  }

/* End */

/* Index */

  #index_top_bar_div {
    width: 100vw;
    height: 2.6vw;
    position: fixed;
    top: 0vw;
    left: 0vw;
    z-index: 3;
    background-color: rgb(32, 43, 75);
    /* backdrop-filter: blur(7px); */
  }

  #index_logo {
    height: 2.1vw;
    position: fixed;
    top: .23vw;
    left: 2vw;
  }

  #logo_text {
    font-weight: 600;
    height: 2.3vw;
    position: fixed;
    top: -1.4vw;
    left: 5vw;
  }

  #login_link_button {
    /* height: 1.6vw; */
    position: fixed;
    top: .25vw;
    right: 14.3vw;
    text-decoration: none;
    background-color: rgb(100, 100, 100);
    color: rgb(255, 255, 255);
    border-radius: .6vw;
    border: none;
    font-size: 1.2vw;
    padding: .3vw .9vw .3vw .9vw;
  }

  #signup_link_button {
    /* height: 1.6vw; */
    position: fixed;
    top: .25vw;
    right: 6.8vw;
    text-decoration: none;
    background-color: rgb(100, 100, 100);
    color: rgb(255, 255, 255);
    border-radius: .6vw;
    border: none;
    font-size: 1.2vw;
    padding: .3vw .9vw .3vw .9vw;
  }
  
  #circle_lower_on_navbar {
    height: 1vw;
    position: fixed;
    top: 1.3vw;
    right: 6.3vw;
  }

  #circle_upper_on_navbar {
    height: 1vw;
    position: fixed;
    top: .3vw;
    right: 6.3vw;
  }

  /*
  #name_on_navbar {
    font-size: 1.4vw;
    position: absolute;
    top: -1.4vw;
    right: 4.7vw;
    display: table;
    margin-left: 1vw;
  }
  */

  /* Index dropdown menu */

    #index_menu_icon {
      height: 1.6vw;
      position: fixed;
      top: -.7vw;
      right: 2vw;
      /* The following padding makes the area around the hamburger menu icon active as a trigger for displaying the dropdown just as the hamburger icon itself is a trigger.  Without the padding, the dropdown would go away in the small gap between the hamburger icon and the dropdown itself. */
      padding: 1.2vw;
    }

    ul li {
      list-style: none;
    }

    ul li ul {
      /* background color of dropdown box */
      background-color: rgb(32, 43, 75);
      /* backdrop-filter: blur(7px); */
      border-radius: 0vw 0vw 0vw 1vw;
      /* This makes the dropdown invisible by default */
      display: none;
    }

    ul li:hover ul {
      /* This makes the dropdown visible when someone hovers over the download icon */
      display: block;
    }

    #index_menu_dropdown {
      /* width and position of dropdown box background */
      width: 13.6vw;
      position: fixed;
      top: 2.6vw;
      right: 0vw;
      text-align: left;
      padding-bottom: 1.2vw;
    }

    ul li ul li a {
      /* styling of text in the dropdown box */
      color:rgb(255, 255,255);
      text-decoration: none;
      font-size: 1.5vw;
      line-height: 3vw;
    }

    ul li ul li a:hover {
      /*  This changes text color to gray when option is hovered over */
      color: rgb(180, 180, 180);
    }

  /* End */
 
  /*
  #index_top_bar_fade_transition_div {
    width: 100vw;
    height: 1vw;
    position: fixed;
    top: 2.8vw;
    mask: linear-gradient(black, black, transparent);
    backdrop-filter: blur(1px);
    z-index: 1;
  }
  */

  /* Since the index doesn't have a heading, the top padding and top margin settings resulted in too much white space above the first story.  This problem was unique to index, so I placed a 'gravity div' at the top of index in order to pull the first story toward the top of th page. */
  #index_gravity_div {
    margin-bottom: -6vw;
  }

  /* Story suggestion box */
    .story_suggestion_box {
      position: relative;
      margin: auto;
      width: 50vw;
      height: 30vw;
      padding: 5vw;
      background-color: rgba(30, 42, 64, .35);
      margin-top: 9vw;
      overflow: hidden;
      border-radius: 1vw;
    }

    #story_suggestion_title {
      font-size: 1.8vw;
      margin-top: -3.2vw;
      line-height: 2.6vw;
    }
    
    .circle_and_name_in_suggestion_box_div {
      position: relative;
      height: 3.8vw;
      margin-top: -.65vw;
    }

    .circle_lower_in_story_suggestion_box {
      height: 1.4vw;
      position: absolute;
      top: 1.4vw;
      left: 0vw;
    }

    .circle_upper_in_story_suggestion_box {
      height: 1.4vw;
      position: absolute;
      top: 0vw;
      left: 0vw;
    }

    .name_in_story_suggestion_box {
      font-size: 1.7vw;
      position: absolute;
      top: -1.8vw;
      left: 3.9vw;
    }

    /*
    .last_initial_in_story_suggestion_box {
      position: relative;
      top: -6.3vw;
      left: 8.8vw;
    }
    */

    .read_more_button {
      /* height: 1.6vw; */
      position: relative;
      /* The following value moves the button that far away from the left as if pushing off of the left. */
      left: 42.1vw;
      top: 30.8vw;
      text-decoration: none;
      background-color: rgb(100, 100, 100);
      color: rgb(255, 255, 255);
      border-radius: .6vw;
      border: solid white .1vw;
      /* In order to achieve enough contrast, I've applied a box shadow around the read more button. */
      box-shadow: 2px 2px 4px 4px rgba(40, 40, 40, .15), -2px -2px 4px 4px rgba(40, 40, 40, .25);
      font-size: 1.2vw;
      padding: .3vw .9vw .3vw .9vw;
      z-index: 2;
    }

    .story_suggestion_box_fade_div {
      position: absolute;
      width: 100%;
      height: 9vw;
      bottom: 0vw;
      left: 0vw;
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(32, 47, 88, .4));
      mask: linear-gradient(to top, black, black, transparent);
      backdrop-filter: blur(.4px);
    }
  /* End */  

  /*
  #index_bottom_bar_fade_transition_div {
    width: 100vw;
    height: 3vw;
    position: fixed;
    bottom: 2vw;
    /* Since the site's background is gradient, I matched the background color just above the bottom
    bar using a screenshot and Paint's color selector.
    background-image: linear-gradient(to bottom, rgba(0, 100, 175, 0), rgba(0, 100, 175, 1));
  }
  */

  #index_bottom_bar_div {
    width: 100vw;
    height: 2.6vw;
    position: fixed;
    bottom: 0vw;
    left: 0vw;
    z-index: 3;
    background-color: rgb(32, 43, 75);
    /* backdrop-filter: blur(7px); */
  }

  #shuffle_icon {
    height: 1.6vw;
    position: fixed;
    bottom: 0.50vw;
    left: 33vw;
  }
  
  #share_story_plus_icon {
    height: 2.1vw;
    position: fixed;
    bottom: 0.25vw;
    left: 48.95vw;
  }

  #medal_icon {
    height: 1.6vw;
    position: fixed;
    bottom: 0.50vw;
    right: 33vw;
  }

/* End */  

/* Story submission page */

  #submit_a_story_heading {
    font-size: 3vw;
    margin-left: 19.2vw;
  }

  #title_input_box {
    width: 56vw;
    /* In theory, the following left margin should be 20vw, but I had to adjust it to achieve the actual desired left white space to be consistent with other pages. */
    margin-top: 2.9vw;
    margin-left: 19.4vw;
    background-color: rgb(255, 255, 255);
    color: rgb(40, 40, 40);
    font-family: 'Lato';
    font-size: 1.7vw;
    line-height: 1.8;
    padding: .4vw 2vw .4vw 2vw;
    border: none;
    border-radius: 1vw;
  }

  #story_text_input_box {
    margin-top: 2vw;
    width: 56vw;
    height: 30vw;
    margin-left: 19.4vw;
    background-color: rgb(255, 255, 255);
    color: rgb(40, 40, 40);
    font-family: 'Lato';
    font-size: 1.4vw;
    line-height: 1.8;
    padding: 1vw 2vw 3vw 2vw;
    border: none;
    border-radius: 1vw;
  }

  .submit_button {
    margin-top: 1vw;
    margin-left: 19.4vw;
    text-decoration: none;
    background-color: rgba(30, 42, 64, .50);
    color: rgb(255, 255, 255);
    border-radius: .6vw;
    border: none;
    font-size: 1.4vw;
    padding: .5vw 1vw .5vw 1vw;
  }

/* End */  

/* Story page */

  /*
  #story_page_top_fade_transition_div {
    width: 100vw;
    height: 3vw;
    position: fixed;
    top: 0vw;
    /* Since the site's background is gradient, I matched the background color at the top
    of the page using a screenshot and Paint's color selector.
    background-image: linear-gradient(to top, rgba(0, 45, 98, 0), rgba(0, 45, 98, 1))
  }
  */

  #story_div {
    width: 50vw;
    margin: auto;
  }

  #story_title {
      font-size: 2.2vw;
      margin-top: 3.85vw;
      line-height: 1.4;
    }

  /* The .story_text class is applied to all occurences of story text displayed on the site, whether in full form or preview. */
  .story_text {
    white-space: pre-wrap;
  }

  .circle_and_name_on_story_page_div {
    height: 4.8vw;
    position: relative;
    margin-top: -.6vw;
  }

  .circle_upper_on_story_page {
    height: 1.6vw;
    position: absolute;
    top: 0vw;
    left: 0vw;
  }

  .circle_lower_on_story_page {
    height: 1.6vw;
    position: absolute;
    top: 1.6vw;
    left: 0vw;
  }

  .name_on_story_page {
    font-size: 1.9vw;
    position: absolute;
    top: -2.98vw;
    left: 4.3vw;
  }

  .storyteller_number_on_story_page {
    font-size: 1.2vw;
    position: absolute;
    top: .5vw;
    left: 4.4vw;
  }

  /* 
  .last_initial_on_story_page {
    position: relative;
    top: -6.3vw;
    left: 8.8vw;
  }
  */

  #add_bookmark_button {
    margin-left: 24.5vw;
    text-decoration: none;
    background-color: rgba(30, 42, 64, .50);
    color: rgb(255, 255, 255);
    border-radius: .6vw;
    border: none;
    font-size: 1.4vw;
    padding: .5vw 1vw .5vw 1vw;
  }

  #delete_bookmark_button {
    margin-left: 24.5vw;
    text-decoration: none;
    background-color: rgba(30, 42, 64, .50);
    color: rgb(255, 255, 255);
    border-radius: .6vw;
    border: none;
    font-size: 1.4vw;
    padding: .5vw 1vw .5vw 1vw;
  }
  
  #storyteller_page_link_button {
    margin-top: 2vw;
    margin-left: 24.5vw;
    text-decoration: none;
    background-color: rgba(30, 42, 64, .50);
    color: rgb(255, 255, 255);
    border-radius: .6vw;
    border: none;
    font-size: 1.4vw;
    padding: .5vw 1vw .5vw 1vw;
  }

  /*
  #story_page_bottom_bar_fade_transition_div {
    width: 100vw;
    height: 3vw;
    position: fixed;
    bottom: 2vw;
    /* Since the site's background is gradient, I matched the background color just above the bottom
    bar using a screenshot and Paint's color selector.
    background-image: linear-gradient(to bottom, rgba(0, 100, 175, 0), rgba(0, 100, 175, 1))
  }
  */

  /* Star rating input form */

    #star_rating_input_div {
      width: 100vw;
      height: 2.6vw;
      position: fixed;
      bottom: 0vw;
      left: 0vw;
      z-index: 3;
      background-color: rgb(32, 43, 75);
      /* backdrop-filter: blur(7px); */
    }

    #star_rating_input_form {
      display: flex;
      flex-direction:row-reverse;
      justify-content: flex-end;

      /* The following is an attempt at centering the star rating input.  Find the best way to center the stars.  */
      position: fixed;
      left: 44vw;
      bottom: -1.1vw;
      letter-spacing: 0vw;
    }

    .star {
      position: fixed;
      opacity: 0;
      pointer-events: none;
    }

    .star_label {
      cursor: pointer;
      font-size: 0;
      color: rgb(100,100,100);
      transition: color 0.1s ease-in-out;
    }

    .star_label:before {
      content: "★";
      display: inline-block;
      font-size: 2.8vw;
    }

    .star:checked ~ .star_label {
      color: rgb(210, 179, 1);
      color: rgb(210, 179, 1);
    }

    .star_label:hover,
    .star_label:hover ~ .star_label {
      color: rgb(210, 179, 1);
    }

    .star:checked + .star_label:hover,
    .star:checked + .star_label:hover ~ .star_label,
    .star:checked ~ .star_label:hover,
    .star:checked ~ .star_label:hover ~ .star_label,
    .star_label:hover ~ .star:checked ~ .star_label {
      color: rgb(210, 179, 1);
    }

    #rating_submit_button {
      /* height: 1.6vw; */
      position: fixed;
      bottom: .3vw;
      right: 32vw;
      text-decoration: none;
      background-color: rgb(100, 100, 100);
      color: rgb(255, 255, 255);
      border-radius: .6vw;
      border: none;
      font-size: 1.2vw;
      padding: .3vw .9vw .3vw .9vw;
    }

    #star_rating_selection_image {
      height: 1.97vw;
      position: fixed;
      bottom: .32vw;
      right: 43vw;
    }

    #rating_submitted_text {
      font-size: 1.2vw;
      font-weight: 900;
      position: fixed;
      bottom: -1vw;
      right: 31vw;
    }

  /* End */

/* End */

/* Signup page */
  #community_agreement_div {
    width: 60vw;
    margin-left: 20vw;
  }

  #community_culture_heading {
    font-size: 3vw;
    margin-bottom: -1vw;
  }

  #community_agreement_heading {
    font-size: 3vw;
    margin-bottom: -1vw;
  }

  #community_agreement_button {
    text-decoration: none;
    background-color: rgba(30, 42, 64, .50);
    color: rgb(255, 255, 255);
    border-radius: .6vw;
    border: none;
    font-size: 1.4vw;
    padding: .5vw 1vw .5vw 1vw;
  }

  #signup_form_div {
    width: 34vw;
    float: left;
    margin-left: 33vw;
    position: relative;
  }

  #sign_up_first_name_input {
    width: 30vw;
    background-color: rgb(255, 255, 255);
    color: rgb(40, 40, 40);
    font-family: 'Lato';
    font-size: 1.4vw;
    line-height: 1.8;
    padding: .4vw 2vw .4vw 2vw;
    border: none;
    border-radius: 1vw;
  }

  #sign_up_last_initial_input {
    margin-top: 2vw;
    width: 6vw;
    background-color: rgb(255, 255, 255);
    color: rgb(40, 40, 40);
    font-family: 'Lato';
    font-size: 1.4vw;
    line-height: 1.8;
    padding: .4vw 2vw .4vw 2vw;
    border: none;
    border-radius: 1vw;
  }

  #sign_up_email_input {
    margin-top: 2vw;
    width: 30vw;
    background-color: rgb(255, 255, 255);
    color: rgb(40, 40, 40);
    font-family: 'Lato';
    font-size: 1.4vw;
    line-height: 1.8;
    padding: .4vw 2vw .4vw 2vw;
    border: none;
    border-radius: 1vw;
  }

  #sign_up_password_input {
    margin-top: 2vw;
    width: 30vw;
    background-color: rgb(255, 255, 255);
    color: rgb(40, 40, 40);
    font-family: 'Lato';
    font-size: 1.4vw;
    line-height: 1.8;
    padding: .4vw 2vw .4vw 2vw;
    border: none;
    border-radius: 1vw;
  }

  #sign_up_password_repeat_input {
    margin-top: 2vw;
    width: 30vw;
    background-color: rgb(255, 255, 255);
    color: rgb(40, 40, 40);
    font-family: 'Lato';
    font-size: 1.4vw;
    line-height: 1.8;
    padding: .4vw 2vw .4vw 2vw;
    border: none;
    border-radius: 1vw;
  }

  #sign_up_submit_button {
    margin-top: 2vw;
    width: 34vw;
    text-decoration: none;
    background-color: rgba(30, 42, 64, .50);
    color: rgb(255, 255, 255);
    border-radius: 1vw;
    border: none;
    font-size: 1.4vw;
    padding: 1vw 0vw 1vw 0vw;
  }

/* End */

/* Log in or sign up page */

#log_in_or_sign_up_form {
    width: 34vw;
    float: left;
    margin-left: 33vw;
    position: relative;
  }

  /* A few items in the log in or sign up file have IDs that use style specs from the log_in page and the sign_up page. */

  #log_in_prompt {
    margin-bottom: -6vw;
  }
  
  #sign_up_prompt {
    margin-top: 8vw;
  }

  #signup_button_on_log_in_or_sign_up_page {
    margin-top: 2vw;
    width: 34vw;
    text-decoration: none;
    background-color: rgba(30, 42, 64, .50);
    color: rgb(255, 255, 255);
    border-radius: 1vw;
    border: none;
    font-size: 1.4vw;
    padding: 1vw 0vw 1vw 0vw;
  }

/* End */

/* Color selection pages */
  
  .color_prompt {
    margin-left: 32vw;
    margin-right: 32vw;
  }

  .color_selection_form {
    position: relative;
  }

  #display_of_first_color_selection {
    margin-left: 32vw;
    margin-top: 2.3vw;
    margin-bottom: 4vw;
    height: 8vw;
    border-radius: 1vw;
    box-shadow: .3vw .3vw rgb(40, 40, 40);
  }

  #color_selection_next_button {
    position: absolute;
    top: 31vw;
    margin-left: 32vw;
    text-decoration: none;
    background-color: rgba(30, 42, 64, .50);
    color: rgb(255, 255, 255);
    border-radius: .6vw;
    border: none;
    font-size: 1.4vw;
    padding: .5vw 1vw .5vw 1vw;
  }

  /* Refer to https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons */
  
  /* Hide radio buttons */
    .color_swatch_radio {
      opacity: 0;
      width:0;
      height: 0;
    }
  /* End */

  /* Styling the color swatch images */
    .color_swatch_radio + img {
      cursor: pointer;
    }

    /* Width, height and object-fit below cause the color grid image to fill its grid position. */
    .color_grid_image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 1vw;
      box-shadow: .3vw .3vw rgb(40, 40, 40);
    }
  /* End */

  /* Styling 'checked' color swatch images */
    .color_swatch_radio:checked + img {
      outline: 2px solid white;
    }
  /* End */

  /* Setting up 4x3 and 3x2 grids for color swatches */
    .color_grid_a {
      display: grid;
      /* The following line means 4 columns with a column width of 8vw.  */
      grid-template-columns: repeat(4, 8vw);
      /* The following line means 3 rows with a row height of 8vw.  */
      grid-template-rows: repeat(3, 8vw);
      grid-gap: 1vw;
      position: absolute;
      right: 32.5vw;
    }

    .color_grid_b {
      display: grid;
      grid-template-columns: repeat(3, 8vw);
      grid-template-rows: repeat(2, 8vw);
      grid-gap: 1vw;
      position: absolute;
      right: 37vw;
    }
  
/* End */

/* Login page */
  
  #login_form {
    width: 34vw;
    float: left;
    margin-left: 33vw;
    position: relative;
  }

  #login_email_input {
    margin-top: 9vw;
    width: 30vw;
    background-color: rgb(255, 255, 255);
    color: rgb(40, 40, 40);
    font-family: 'Lato';
    font-size: 1.4vw;
    line-height: 1.8;
    padding: .4vw 2vw .4vw 2vw;
    border: none;
    border-radius: 1vw;
  }

  #login_password_input {
    margin-top: 2vw;
    width: 30vw;
    background-color: rgb(255, 255, 255);
    color: rgb(40, 40, 40);
    font-family: 'Lato';
    font-size: 1.4vw;
    line-height: 1.8;
    padding: .4vw 2vw .4vw 2vw;
    border: none;
    border-radius: 1vw;
  }

  #login_submit_button {
    margin-top: 2vw;
    width: 34vw;
    text-decoration: none;
    background-color: rgba(30, 42, 64, .50);
    color: rgb(255, 255, 255);
    border-radius: 1vw;
    border: none;
    font-size: 1.4vw;
    padding: 1vw 0vw 1vw 0vw;
  }

  #login_gravity {
    margin-bottom: -6.6vw;
  }

/* End */

/* Storyteller page */

  /* Byline */

    .byline_on_storyteller_page_div {
      position: relative;
      /* The byline div and a <p> tag used in headers of other pages react a bit differently to the body.  The following margin-top gives the byline div the same page placement as other page headings. */
      margin-top: 4.7vw;
      margin-left: 19.4vw;
      height: 7vw;
      margin-bottom: -3.5vw;
    }

    .circle_lower_on_storyteller_page {
      height: 3vw;
      position: absolute;
      top: 3vw;
      left: 0vw;
    }

    .circle_upper_on_storyteller_page {
      height: 3vw;
      position: absolute;
      top: 0vw;
      left: 0vw;
    }

    .name_on_storyteller_page {
      font-size: 3vw;
      position: absolute;
      top: -3.8vw;
      left: 7.8vw;
    }

    .storyteller_number_on_storyteller_page {
      position: absolute;
      top: 1.9vw;
      left: 8.05vw;
    }

    #follow_button {
      position: absolute;
      top: 3.73vw;
      left: 21vw;
      text-decoration: none;
      background-color: rgba(30, 42, 64, .50);
      color: rgb(255, 255, 255);
      border-radius: .6vw;
      border: none;
      font-size: 1.27vw;
      padding: .05vw .8vw .05vw .8vw;
    }

    #following_button {
      position: absolute;
      top: 3.73vw;
      left: 21vw;
      text-decoration: none;
      background-color: rgb(242, 245, 196);
      color: rgb(60, 60, 60);
      border-radius: .6vw;
      border: none;
      font-size: 1.27vw;
      padding: .05vw .8vw .05vw .8vw;
    }

    #as_you_submit_stories {
      margin-top: 9vw;
      margin-left: 19.5vw;
    }

  /* End */

  /* Modified story suggestion box */

    .modified_story_suggestion_box {
      position: relative;
      margin: auto;
      width: 50vw;
      height: 30vw;
      padding: 5vw;
      background-color: rgba(30, 42, 64, .35);
      margin-top: 9vw;
      overflow: hidden;
      border-radius: 1vw;
    }

    .modified_box_read_more_button {
      /* height: 1.6vw; */
      position: relative;
      /* The following value moves the button that far away from the left as if pushing off of the left. */
      left: 42.1vw;
      top: 30.8vw;
      text-decoration: none;
      background-color: rgb(100, 100, 100);
      color: rgb(255, 255, 255);
      border-radius: .6vw;
      border: solid white .1vw;
      /* In order to achieve enough contrast, I've applied a box shadow around the read more button. */
      box-shadow: 2px 2px 4px 4px rgba(40, 40, 40, .15), -2px -2px 4px 4px rgba(40, 40, 40, .25);
      font-size: 1.2vw;
      padding: .3vw .9vw .3vw .9vw;
      z-index: 2;
    }

    #modified_story_suggestion_title {
      font-size: 1.8vw;
      margin-top: -3.2vw;
      line-height: 2.6vw;
    }

    #own_storyteller_page_story_menu_icon {
      height: .45vw;
      position: absolute;
      top: -6.7vw;
      right: -1.2vw;
      padding: 1.2vw;
    }

    /* By making story_menu_dropdown position:absolute and its parent position:relative, the dropdown does not push content below it down when it appears. */
    #parent_of_story_menu_dropdown {
      position: relative;
    }
    

    #story_menu_dropdown {
      /* width and position of "Edit/Delete/Hide" dropdown box background */
      width: 7.5vw;
      position: absolute;
      top: -4.5vw;
      right: 0vw;
      text-align: left;
      border-radius: .6vw;
    }

  /* End */

  /* Delete story page */
    #delete_story_div {
      width: 60vw;
      margin-left: 19.3vw;
    }

    #confirm_story_deletion_button {
      text-decoration: none;
      background-color: rgba(30, 42, 64, .50);
      color: rgb(255, 255, 255);
      border-radius: .6vw;
      border: none;
      font-size: 1.4vw;
      padding: .5vw 1vw .5vw 1vw;
    }

    #cancel_story_deletion_button {
      position: relative;
      top: -2.72vw;
      left: 8vw;
      text-decoration: none;
      background-color: rgba(30, 42, 64, .50);
      color: rgb(255, 255, 255);
      border-radius: .6vw;
      border: none;
      font-size: 1.4vw;
      padding: .5vw 1vw .5vw 1vw;
    }

    #story_deleted_div {
      width: 60vw;
      margin-left: 19.3vw;
    }

    #return_to_story_page_following_deletion {
      text-decoration: none;
      background-color: rgba(30, 42, 64, .50);
      color: rgb(255, 255, 255);
      border-radius: .6vw;
      border: none;
      font-size: 1.4vw;
      padding: .5vw 1vw .5vw 1vw;
    }
    
  /* End */

  /* Highest-rated page */
    #highest_rated_heading {
      font-size: 3vw;
      margin-left: 19.2vw;
      margin-bottom: -4vw;
    }
  /* End */

  /* Shuffle page */
    #shuffle_heading {
      font-size: 3vw;
      margin-left: 19.2vw;
      margin-bottom: -4vw;
    }
  /* End */

  /* Following page */

    /* Byline */

    #storytellers_I_follow_heading {
      font-size: 3vw;
      margin-left: 19.2vw;
      margin-bottom: 5vw;
    }

    a.storyteller_link_on_following_page {
      text-decoration: none;
      color: white;
    }

    a:hover.storyteller_link_on_following_page {
      color: rgb(180, 180, 180);
    }
    
    .byline_on_following_page_div {
      position: relative;
      margin: auto;
      width: 60vw;
      height: 5.8vw;
      background-color: rgba(30, 42, 64, .35);
      margin-top: 2.6vw;
      overflow: hidden;
      border-radius: 1vw;
    }

    .circle_lower_on_following_page {
      height: 1.9vw;
      position: absolute;
      top: 2.9vw;
      left: 5vw;
    }

    .circle_upper_on_following_page {
      height: 1.9vw;
      position: absolute;
      top: 1vw;
      left: 5vw;
    }

    .name_on_following_page {
      font-size: 1.7vw;
      position: absolute;
      top: -.9vw;
      left: 10vw;
    }

    .storyteller_number_on_following_page {
      font-size: 1.2vw;
      position: absolute;
      top: 1.5vw;
      left: 10vw;
    }

    #not_yet_following {
      margin-left: 19.5vw;
      margin-top: -.7vw;
    }

  /* End */

  /* Bookmarks page */

    #bookmarks_heading {
      font-size: 3vw;
      margin-left: 19.2vw;
      margin-bottom: -4vw;
    }

    #no_stories_bookmarked_message {
      margin-left: 19.5vw;
      margin-top: 8.3vw;
    }

  /* End */

  /* Info page */

    #Keyclax_info_div {
      width: 60vw;
      margin-left: 20vw;
    }

    #community_culture_info_heading {
      font-size: 3vw;
      margin-bottom: -1vw;
    }

    #community_agreement_info_heading {
      font-size: 3vw;
      margin-bottom: -1vw;
    }

    #keyclax_support_info_heading {
      font-size: 3vw;
      margin-bottom: -1vw;
    }

    #trademarks_info_heading {
      font-size: 3vw;
      margin-bottom: -1vw;
    }

  /* End */

  /* Keyclax support */

    #keyclax_support_heading {
      font-size: 3vw;
      margin-left: 19.2vw;
    }

    #keyclax_support_greeting {
      margin-left: 19.3vw;
    }

    #report_form_issue_textarea {
      margin-top: 2vw;
      width: 56vw;
      height: 30vw;
      margin-left: 19.4vw;
      background-color: rgb(255, 255, 255);
      color: rgb(40, 40, 40);
      font-family: 'Lato';
      font-size: 1.4vw;
      line-height: 1.8;
      padding: 1vw 2vw 3vw 2vw;
      border: none;
      border-radius: 1vw;
    }

    #submit_report_button {
      margin-left: 19.4vw;
      margin-top: 1vw;
      text-decoration: none;
      background-color: rgba(30, 42, 64, .50);
      color: rgb(255, 255, 255);
      border-radius: .6vw;
      border: none;
      font-size: 1.4vw;
      padding: .5vw 1vw .5vw 1vw;
    }

    #report_form_first_name_textarea {
      margin-left: 19.4vw;
      width: 30vw;
      background-color: rgb(255, 255, 255);
      color: rgb(40, 40, 40);
      font-family: 'Lato';
      font-size: 1.4vw;
      line-height: 1.8;
      padding: .4vw 2vw .4vw 2vw;
      border: none;
      border-radius: 1vw;
    }

    #report_form_last_initial_textarea {
      margin-top: 2vw;
      margin-left: 19.4vw;
      width: 6vw;
      background-color: rgb(255, 255, 255);
      color: rgb(40, 40, 40);
      font-family: 'Lato';
      font-size: 1.4vw;
      line-height: 1.8;
      padding: .4vw 2vw .4vw 2vw;
      border: none;
      border-radius: 1vw;
    }

    #report_form_email_textarea {
      margin-top: 2vw;
      margin-left: 19.4vw;
      width: 30vw;
      background-color: rgb(255, 255, 255);
      color: rgb(40, 40, 40);
      font-family: 'Lato';
      font-size: 1.4vw;
      line-height: 1.8;
      padding: .4vw 2vw .4vw 2vw;
      border: none;
      border-radius: 1vw;
    }
  
  /* End */

/* End */