/* CSS Reset - Box Sizing */
*,
*::before,
*::after
{
  box-sizing: border-box;
}

@font-face 
{
  font-family: "Linux Biolinum G";
  src: url("font/linux-biolinum-g.otf") format("opentype");
  font-display: swap;
}

@font-face 
{
  font-family: "Samurai Bob";
  src: url("font/CFSamuraiBob.ttf") format("truetype");  
  font-display: swap;
}

/* handle the background */
html
{ 
  background-color: #FFFFFF;
}

body
{
  margin: 0;
  padding: 0;
}

.th_content_container_div
{
  max-width: 800px;
  margin:    auto; 
}

.th_main_title_container
{
  margin:  0;
  padding: 0;
}

.th_main_title_text_heading1
{
  display: block;

  font-family: "Samurai Bob";

  font-size: clamp(72px, calc(72px + 5.5vw), 134px);
  font-weight: bold;

  color: #000000;

  text-align: center;

  margin-top:    0px;
  margin-bottom: 1vw;
}

.th_main_title_THE_height_modifier
{
  height: 50px;
}

.th_main_title_HIKIKOMORI_height_modifier
{
  height:        70px;
  margin-bottom: 20px;
}

.th_main_title_NOVEL_modifier
{
  margin-top: 3vw;
}

.th_main_title_smaller_font_modifier
{
  font-size: clamp(52px, calc(52px + 5.5vw), 114px);
}

.th_curiosity_text_div
{
  font-family: "Linux Biolinum G";

  font-size: clamp(16px, calc(10px + 2.5vw), 30px);
  font-weight: bold;

  color: #000000;

  text-align: center;

  margin-top:    4vw;
  margin-bottom: 1vw;
}

.th_cover_image_img
{
  width: 80vw;

  display: block;

  margin-top: 1vw;
  margin-bottom: 0vw;

  margin-left:  auto;
  margin-right: auto;  
}

.th_buy_link_box_div
{
  font-family: "Linux Biolinum G";
  font-size: clamp(18px, calc(18px + 1.5vw), 32px);

  padding: clamp(8px, 1vw, 12px);

  color: #000000;
 
  border: solid #000000 2px;

  display: inline-block;
}

.th_button_instruction_bar
{
  font-family: "Linux Biolinum G";

  font-size: clamp(18px, calc(18px + 1.5vw), 32px);
  font-weight: bold;

  padding: clamp(8px, 1vw, 12px);

  color: #000000;

  text-align: center;

  margin-top:    5vw;
  margin-bottom: 1vw;
}

.th_button_instruction_bar_small_top_margin
{
  margin-top: 2vw;
}

.th_button_container
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem; 
}

.th_fieldset
{
  border: 1px black solid;
  margin-top: clamp(48px, 9vw, 72px);
  margin-bottom: clamp(32px, 6vw, 48px);
}

.th_fieldset_legend
{
  font-family: "Linux Biolinum G";
  font-size: clamp(14px, calc(14px + 1.4vw), 25.2px);

  border:         1px black solid;
  padding-top:    0.0em;
  padding-right:  0.3em;
  padding-bottom: 0.05em;
  padding-left:   0.3em;
}

.th_readers_endorsement_text_div
{
  font-family: "Linux Biolinum G";
  font-size: clamp(14px, calc(12px + 1.5vw), 24px);

  text-align: left;

  color: #000000;

  margin-top:   0vw;
  margin-left:  1vw;
  margin-right: 1vw;

  padding-left:  0.5vw;
  padding-right: 0.5vw;
}

.th_fan_art_container_div
{
  margin-top:   0vw;
  margin-left:  1vw;
  margin-right: 1vw;

  padding-left:  0.5vw;
  padding-right: 0.5vw;
  padding-bottom: 0.5vh;
}

.th_fan_art_img
{
  width: 70vw;

  display: block;

  margin-top: 1vw;
  margin-bottom: 0vw;

  margin-left:  auto;
  margin-right: auto; 
}

.th_fluffy_kitty_img
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.th_synopsis_header_div
{
  font-family: "Linux Biolinum G";
  font-size: clamp(18px, calc(16px + 1.5vw), 28px);
  font-weight: bold;

  text-align: left;

  color: #000000;

  margin-top:   0vw;
  margin-left:  0vw;
  margin-right: 1vw;

  padding-left:  0.5vw;
  padding-right: 0.5vw;

  margin-bottom: clamp(17px, calc(17px + 1.3vw), 27px);
}

.th_synopsis_text_div
{
  font-family: "Linux Biolinum G";
  font-size: clamp(14px, calc(12px + 1.5vw), 24px);
  font-weight: bold;

  text-align: left;

  color: #000000;

  margin-top:   clamp(40px, 7vw, 60px);
  margin-left:  1vw;
  margin-right: 1vw;
  margin-bottom: clamp(40px, 7vw, 60px);

  padding-left:  0.5vw;
  padding-right: 0.5vw;
}

.th_synopsis_paragraph
{
  margin-bottom: clamp(17px, calc(17px + 1.3vw), 27px);
}

.th_bonus_material_container
{
  margin: 1vw;
  padding: 0.5vw;
  text-align: center;
}

.th_bonus_material_text
{
  font-family: "Linux Biolinum G";
  font-size: clamp(14px, calc(12px + 1vw), 20px);
  color: #444444;
  margin: 0 0 clamp(12px, 2vw, 20px) 0;
}

.th_bonus_material_link
{
  font-family: "Linux Biolinum G";
  font-size: clamp(16px, calc(14px + 1vw), 24px);
  color: #0066cc;
  text-decoration: none;
  display: inline-block;
  padding: clamp(8px, 1.5vw, 12px) clamp(16px, 2.5vw, 24px);
  border: 2px solid #000000;
}

.th_bonus_material_link:hover,
.th_bonus_material_link:focus
{
  background-color: #f0f0f0;
}

.th_spacer_before_mailing_list_div
{
  margin-top: clamp(40px, 5vw, 60px);
  margin-left: 1vw;
  margin-right: 1vw;
  margin-bottom: clamp(40px, 5vw, 60px);

  padding-left:  0.5vw;
  padding-right: 0.5vw;
}

.th_privacy_policy_link_div
{
  font-family: "Linux Biolinum G";
  font-size: clamp(12px, calc(12px + 0.25vw), 16px);

  margin-top: clamp(20px, 5vw, 40px);
  margin-bottom: clamp(10px, 2.5vw, 20px);

  text-align: left;

  cursor: pointer;
}

.th_privacy_policy_text_div
{
  display: none;

  font-family: "Linux Biolinum G";
  font-size: clamp(10px, calc(10px + 0.25vw), 14px);

  margin-bottom: clamp(20px, 5vw, 40px);

  text-align: left;

  cursor: pointer;  
}

.th_e__m__a__i__l_div
{
  width: min(40vw, 320px);

  display: block;

  margin-top: 0.5vw;
}


/* if the window is wider than the set amount, then apply these changes */
@media only screen and (min-width: 800px) 
{
  .th_main_title_text_heading1
  {
    font-size: 134px;
  }

  .th_main_title_smaller_font_modifier
  {
    font-size: 114px;
  }

  .th_main_title_NOVEL_modifier
  {
    margin-top: 34px;
  }

  .th_curiosity_text_div
  {
    font-size: 30px;

    margin-top:    32px;
    margin-bottom: 8px;
  }

  .th_cover_image_img
  {
    width: 641px;

    margin-top:    8px;
    margin-bottom: 24px;
  }

  .th_buy_link_box_div
  {
    font-size:   32px;

    padding: 8px 8px 8px 8px;
  }

  .th_buy_link_box_left_mod
  {
    margin-left: 72px;
  }
  
  .th_buy_link_box_right_mod
  {
    margin-right: 72px;
  }  

  .th_synopsis_text_div
  {
    font-size: 24px;

    margin-top:   60px;
    margin-left:  8px;
    margin-right: 8px;
  
    padding-left:  4px;
    padding-right: 4px;
  }  

  .th_fan_art_container_div
  {
    margin-top:   20px;
    margin-left:  8px;
    margin-right: 8px;
  
    padding-left:  4px;
    padding-right: 4px;
  }  

  .th_fan_art_img
  {
    width: 600px;

    margin-top:    8px;
    margin-bottom: 24px;
  }

  .th_synopsis_paragraph
  {
    margin-bottom: 27px;
  }

  .th_fieldset
  {
    margin-top:    48px;
    margin-bottom: 48px;
  }
  
  .th_fieldset_legend
  {
    font-size: 25.2px;
  }
  
  .th_readers_endorsement_text_div
  {
    font-size: 24px;
  
    margin-top:   0px;
    margin-left:  8px;
    margin-right: 8px;
  
    padding-left:  4px;
    padding-right: 4px;
  }

  .th_spacer_before_mailing_list_div
  {
    margin-top:    40px;
    margin-left:   8px;
    margin-right:  8px;
    margin-bottom: 40px;

    padding-left:  4px;
    padding-right: 4px;
  }

  .th_privacy_policy_link_div
  {
    font-size:  16px;
  
    margin-top:    40px;
    margin-bottom: 20px;
  }  
  
  .th_privacy_policy_text_div
  {
    display: none;
  
    font-size:   14px;
  
    margin-bottom: 40px;
  }  

  .th_e__m__a__i__l_div
  {
   width: 320px;

    margin-top: 4px;
  }

}