body
{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fafafa;
    color: #111;
}
.site_header /*no text in this. its just a container for all the stuff in header */
{
    background-color: rgba(241, 241, 241, 0.984); 
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 7.5px 25px;
}

.header_titles  /*Div with containers for title and subtitle in header*/
{
    color: rgb(0, 0, 0);
    display: flex;
    align-items: baseline;
    gap: 30px;
    margin-left: 10px;
}

.site_title  /*Div with text for title*/
{
    color: #000;
    text-decoration: none;
    font-size: 28px;
    font-weight: bold;
}

.site_title:hover  
{
    color: rgb(0, 112, 186);
    text-decoration: underline;
}

.site_subtitle /*Div with text for subtitle*/
{
    font-size: 18px;
    color: #555;   
}

.logo_img
{
    width: 300px;
}

.header_link_container /*No text. Div with links for About, Mission, Subscribe*/
{
    display: flex;
    flex-direction: row;
    font-size: 20px;
    margin-right: 30px;
    align-items: baseline;
}

.top_link /*Class reffering to links inside the header*/
{
    margin-right: 15px;
    color: rgb(0, 112, 186);
    text-decoration: none;
}

.top_link:hover  
{
    text-decoration: underline;
}

.clicked_link
{
    color: rgb(51, 183, 119);
    font-size: 22.5px;
    margin-right: 20px;
}

.clicked_link:hover
{
    text-decoration: none;
}

.sub_link
{
    margin-right: 15px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 10px 20px;
    background-color: rgb(247, 190, 84);
    border-radius: 15px;
}

.sub_link:hover
{
    box-shadow: 0 0 10px rgb(64, 170, 251), 0 0 20px rgb(39, 124, 188);
    transform: scale(1.08);
}

.section_link_container
{
    text-align: center;
    margin-top: 60px;
}

.section_link
{
    color: rgb(7, 142, 232);
    font-size: 22.5px;
    margin-right: 20px;
    text-decoration: underline;
}

.section_link:hover  
{
    text-decoration: none;
}

.post_header
{
    text-align: center;
    margin-top: 40px;
}

.post_title
{
    font-size: 64px;
    margin: 0 auto 65px auto;
    max-width: 70%;
}

.post_info_container 
{
    display: flex;
    justify-content: center; 
    gap: 25px; 
    margin-top: -40px;      
    
}

.post_info 
{
    color: gray;
    font-size: 27px;
    margin-bottom: 60px;
}

.post_img
{
    max-width: 75%;
    height: auto;
    width: 1000px;
    border-radius: 15px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.post_body
{
    text-align: left;
    margin: 60px auto 0 auto;
    margin-top: 60px;
    font-size: 22px;
    max-width: 50%;
    line-height: 1.6;
    color: #222;
}

.subscribe_box
{
    color: whitesmoke;
    background-color: rgb(17, 87, 131);

    margin-top: 80px;

    text-align: center;

    padding-top : 80px;
    padding-bottom: 80px;
}

.subscribe_subtitle
{
    font-weight: normal;
    font-size: 18px;
    line-height: 1.5;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.subscribe_header
{
    font-size: 40px;
}

.subscribe_input
{
    color: rgb(255, 255, 255);
    background-color: rgb(5, 35, 88);
    padding: 10px;
    font-size: 18px;
    border: none;
    margin-right: 10px;
    border-radius: 10px;
}

.subscribe_input::placeholder
{ 
    color: rgb(255, 255, 255);
    opacity: .75; 
}

.subscribe_button {
    background-color: rgb(247, 190, 84);
    padding: 10px 25px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 12px;
    border: none;
    transition: 0.3s;
}

.subscribe_button:hover {
    background-color: rgb(240, 161, 12);
    box-shadow: 0 0 20px rgba(232, 152, 3, 0.7),
                0 0 40px rgba(175, 114, 1, 0.4);
    transform: scale(1.08);
}

.comment_box {
    margin: 60px auto 0 auto;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comment_name,
.comment_text 
{
    font-size: 18px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-family: Arial, Helvetica, sans-serif;
}

.comment_button 
{
    align-self: center;
    padding: 12px 24px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 15px;
    border: none;
    background-color: rgb(197, 214, 253);
    transition: 0.2s;
}

.comment_button:hover 
{
    background-color: rgb(10, 115, 200);
    box-shadow: 0 0 15px rgba(10, 115, 200, 0.7),
                0 0 30px rgba(10, 115, 200, 0.4);
    transform: scale(1.08);
    color: white;
}
#subscribeResult{
    font-weight: bolder;
    font-size: x-large;
}






















/* THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
THIS IS FOR MOBILE DOWN BELOW 
*/





























@media (max-width: 600px) {
  /* basics */
  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fafafa;
    color: #111;
    line-height: 1.6;
  }

  /* header */
  .site_header {
    background-color: rgba(241,241,241,0.984);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    padding: 8px 12px;           /* smaller */
    flex-wrap: wrap;             /* allow wrap on small screens */
  }

  .header_titles {
    color: #000;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-left: 0;
  }

  .site_title {
    color: #000;
    text-decoration: none;
    font-size: 22px;             /* was 28/52 — much smaller */
    font-weight: 700;
  }

  .site_subtitle {               /* keep hidden on phones */
    display: none;
  }

  .logo_img {
    width: 200px;                /* was 200 — fits header */
    height: auto;
  }

  .header_link_container {
    display: flex;
    flex-direction: row;
    font-size: 16px;
    margin-right: 0;
    align-items: center;
    gap: 8px;
  }

  .top_link { display: none; }

  .clicked_link {
    color: rgb(51,183,119);
    font-size: 18px;
    margin-right: 10px;
  }

  .sub_link {
    margin-right: 0;
    color: #000;
    text-decoration: none;
    padding: 10px 14px;          /* down from 10x20 */
    background-color: rgb(247,190,84);
    border-radius: 12px;
    font-size: 16px;             /* down from 42px */
  }

  /* section links */
  .section_link_container {
    margin: 24px auto 24px auto;
    max-width: 92%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  .section_link {
    color: rgb(7,142,232);
    font-size: 18px;             /* down from 52px */
    text-decoration: underline;
  }

  /* post header/body */
  .post_header {
    text-align: center;
    margin-top: 20px;
  }

  .post_title {
    font-size: 32px;             /* down from 82px */
    margin: 0 auto 24px auto;
    max-width: 92%;
  }

  .post_info_container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: -10px 0 12px 0;
  }

  .post_info {
    color: gray;
    font-size: 18px;             /* down from 50px */
  }

  .post_img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 0;
    display: block;
    margin: 0 auto;
  }

  .post_body {
    text-align: left;
    margin: 24px auto 0 auto;
    font-size: 18px;             /* down from 48px */
    max-width: 92%;
    line-height: 1.7;
    color: #222;
  }

  /* subscribe */
  .subscribe_box {
    color: #f5f5f5;
    background-color: rgb(17,87,131);
    margin-top: 48px;
    text-align: center;
    padding: 32px 0;             /* down from 80px */
  }

  .subscribe_header {
    font-size: 24px;             /* down from 56px */
    margin: 0 0 8px 0;
  }

  .subscribe_subtitle {
    font-weight: normal;
    font-size: 16px;             /* down from 38px */
    line-height: 1.6;
    max-width: 92%;
    margin: 0 auto 16px auto;
  }

  .subscribe_input {
    color: #fff;
    background-color: rgb(5,35,88);
    padding: 12px;               /* down from 25px */
    font-size: 16px;             /* down from 42px */
    border: none;
    border-radius: 10px;
    width: 80%;
    max-width: 80%;            /* keep a sane width */
    margin: 0 auto 10px auto;
    display: block;
  }

  .subscribe_input::placeholder {
    color: #fff;
    opacity: .75;
    font-size: 16px;
  }

  .subscribe_button {
    background-color: rgb(247,190,84);
    padding: 12px 16px;          /* down from 24x25 */
    font-size: 16px;             /* down from 42px */
    cursor: pointer;
    border-radius: 12px;
    border: none;
    transition: .3s;
    color: #000;
    display: inline-block;
  }

  #subscribeResult{
    font-weight: 700;
    font-size: 16px;             /* down from 42px */
    margin-top: 8px;
  }

  /* comments */
  .comment_box {
    margin: 32px auto 0 auto;
    max-width: 92%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .comment_name,
  .comment_text {
    font-size: 16px;             /* down from 42px */
    padding: 12px;               /* down from 22px */
    border-radius: 10px;
    border: 1px solid #ccc;
    font-family: Arial, Helvetica, sans-serif;
  }

  .comment_name::placeholder,
  .comment_text::placeholder {
    font-size: 16px;
  }

  .comment_button {
    align-self: center;
    padding: 12px 18px;          /* down from 22x48 */
    font-size: 16px;             /* down from 45px */
    cursor: pointer;
    border-radius: 12px;
    border: none;
    background-color: rgb(197,214,253);
    transition: .2s;
    color: #000;
  }
}