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: 1300px) {
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;
display: none;   
}

.logo_img
{
width: 500px;
}

.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;
display: none;
}

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

.clicked_link
{
color: rgb(51, 183, 119);
font-size: 52px;
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;
font-size: 42px;
}

.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
{
margin: 60px auto 40px auto;
max-width: 90%;
gap: 20px;
display: flex;
flex-wrap: wrap; 
justify-content: center;
}

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

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

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

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

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

.post_info 
{
color: gray;
font-size: 50px;
}

.post_img
{
max-width: 100%;
height: auto;
width: 1000px;
border-radius: 0;  
}

.post_body
{
text-align: left;
margin: 60px auto 0 auto;
margin-top: 60px;
font-size: 48px;
max-width: 90%;
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: 38px;
line-height: 1.5;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}

.subscribe_header
{
font-size: 56px;
}

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

.subscribe_input::placeholder
{ 
color: rgb(255, 255, 255);
opacity: .75; 
font-size: 42px;
}

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

.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: 90%;
display: flex;
flex-direction: column;
gap: 15px;
}

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

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

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

.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: 42px;
}

}