/*  
    CNMS 165
    Project 5
    Christopher Rounds
    8/15/2026

    styles.css
  
    https://commons.wikimedia.org/wiki/File:NYTimes-Page1-11-11-1918.jpg
*/
@import url('https://fonts.googleapis.com/css2?family=Baskervville+SC:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inconsolata:wght@200..900&family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Mea+Culpa&family=Noto+Sans+Symbols:wght@100..900&family=Noto+Sans+Symbols+2&display=swap');

/* Font usage:

Main fonts
Mea Culpa               Newspaper name; signatures; witches ad
Libertinus Serif        Body text and headers
Baskervville SC         Header small caps; small caps on Crossed Lines (Opinions)
Noto Sans Symbols       Symbols, especially in Weather and Horoscopes
Noto Sans Symbols 2     Symbols, especially in Weather and Horoscopes
EB Garamond             Used in all three ads so they stand out more

Minor fonts
Libre Baskerville       Comic names; witches ad (Opinions)      
Inconsolata             Mechanical speech (Opinions)
*/

* {
    box-sizing: border-box;
}

body {
    background-position-x: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    /* Keep the content at a sane size on high resolutions.
	I have a 1080p monitor, so I can't really test how usable this is in practice, but it looks fine in the inspect tool. */
    max-width: 2000px;
    margin: auto;
}

/* All of the page backgrounds are locations the party has been to within the campaign. I built all the stuff shown. */
.front_page {
    /* Color displayed until the image loads */
    background-color: #5a99d3;
    background-image: url(../images/background_1.jpg);
    background-size: cover;
}

.local_news {
    background-color: #011d09;
    background-image: url(../images/background_2.jpg);
    background-size: cover;
}

.opinions {
    background-color: #574b63;
    background-image: url(../images/background_3.jpg);
    background-size: cover;
}

.entertainment {
    background-color: #373c4f;
    background-image: url(../images/background_4.jpg);
    background-size: cover;
}

.about {
    background-color: #000000;
    background-image: url(../images/background_5.jpg);
    background-size: cover;
}

/* The container of the whole paper */
.wrapper {
    /* Transition property so the page smoothly expands with media queries */
    transition: 1s;
    width: 70%;
    height: 90%;
    margin: 3em auto;
    padding: 1em;
    /* Rounded corners */
    border-radius: 0.7em;
    /* Fallback background color to reduce the "blinking" effect before the real background loads */
    background-color: #e6d6c9;
    /* Reusing the background from Project 4*/
    background-image: url(../images/paper.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* Box-shadow adds a slight 3D effect by darkening the edges */
    box-shadow:
        inset 1em 1em 1.5em 0.2em #00000013,      /* Left/top */
        inset -1em -1em 1.5em 0.2em #00000027,    /* Right/bottom */
        1em 1em 2em 0.5em #00000016;            /* Outer drop-shadow */
    /* 
    Public domain image source:
	https://commons.wikimedia.org/wiki/File:J.H._Trowbridge_Machines_for_Packing,_Wrapping,_and_Labeling_Tobacco_-_DPLA_-_e576f7a88a14d313d4240dfc56cbdc54_(page_4).jpg

	(I cropped it, and edited it a bunch to make it look more "papery" at this scale.)

	The average background color of the texture is about #d0ad8e according to https://matkl.github.io/average-color/
    */ 
}

header {
    text-align: center;
    color: #000;
}

header h1, header h2, header h3, header p {
    padding: 0.2em;
    margin: auto;
}
.newspaper_name {
    font-size: 7em;
    font-family: "Mea Culpa", cursive;
    font-weight: normal;
    /* animation: glow 3s infinite alternate; */
}
   
header h2, header p, header a {
    font-family: 'Baskervville SC', Times, serif;
    /* This is halfway between normal and bold */
    font-weight: 550;
    text-transform: lowercase;
}

.issue {
    display: table;
    width: 100%;
} 
header hr {
    margin: 0em auto;
}
header p {
    font-size: 115%;
    vertical-align: middle;
}
header .left {
    display: table-cell;
    width: 25%;
    text-align: left;
}
header .right {
    display: table-cell;
    width: 25%;
    text-align: right;
}
header .center {
    display: table-cell;
    width: 50%;
}

.article .small_box {
    margin: 1.5em 1.5em 0 1.5em;
    border: rgba(0, 0, 0, 0.4) 1px solid;
    padding: 0.3em;
    font-size: 95%;
}

.smaller {
    font-size: 70%;
    vertical-align: top;
}
.italic {
    font-style: italic;
}
.bold {
    font-weight: bold;
}

header ul {
    margin: auto; 
    padding: 0;
    font-weight: bold;
    font-size: 1.2em; 
    list-style: none;  
}

header li {
    display: inline-flex;
}

header a {
    color: #260331;
    text-decoration: none;
    padding: 0.5em;
}

header a:hover, footer a:hover {
    background-color: #2b2a2a;
    /* It's a magical newspaper, so the links glow when you hover on them */
    animation: a_glow 1s infinite alternate;
}

@keyframes a_glow {
    0% {
        color: rgb(247, 147, 34) 
        
    }
    100% {
        color: rgb(255, 231, 15)
    }
}

header a:active, footer a:active {
    background-color: #000000;
    color: #ff9100;
}

header a:active {
    /* Outline doesn't increase the element's size, so, unlike border, it doesn't push other elements away */
    outline: #ff9900 2px solid;
}



main {
    font-family: "Libertinus Serif", serif;
}

.headlines h1 {
    text-align: center;
    font-style: italic;
    font-size: 4em;
    text-transform: uppercase;
    margin: auto;
    font-weight: 550;
    /* animation-name: slide-in;
    animation-duration: 1s; */
  
}

/* @keyframes slide-in {
    0% {
        transform: scaleY(30%)
        scaleX(30%)
    }
    50% {
        transform: scaleY(110%)
        scaleX(110%)
    }
    100% {
        transform: scaleY(100%)
        scaleX(100%)
    }
} */

.page_title h1 {
    text-align: center;
    font-size: 3.5em;
    margin: auto;
    font-weight: 550;
    font-family: "Libertinus Serif", serif;
    padding: 0;
}

main h2, main h3 {
    text-align: center;
    margin: auto auto 0.3em auto;
}
main h2 {
    font-size: 1.6em;
}
main h3 {
    font-size: 1.25em;
}

main h4 {
    font-size: 1.25em
}
main p {
    font-size: 1.25em;
}
main a {
    text-decoration: none;
}

hr {
    /* Keep hrs from overlapping inset images in articles */
    display: flex;
    opacity: 40%;
    margin-top: 0em;
}

.hr_margin_top {
    margin-top: 1.33em;
}

.monospace {
    /* Separate the monospace a little more from surrounding text */
    padding: 0 0.5em;
    font-family: "Inconsolata", monospace;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.articles_block {
    width: 100%;
    display: grid;
    /* Four columns of equal width */
    /* If you use the browser's inspect tool, and select the grid, you can see the actual grid cells outlined if you click the (grid) button. */
    grid-template-columns: repeat(4, 1fr);
}
/* .articles_block > div {border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgb(233 171 88 / 50%);
  padding: 1em;
} */

.article {
    /* Add relative positioning to articles so the .border_left properties will work */
    position: relative;
    padding: 0.6em;
    margin: 0 0 1.2em 0; 
}

.article p {
    margin: 1em 0 0 0;
}

/* ----------- Special types of articles ------------- */
.two_tall {
    /* This item is 1x2: it will take up one column (default) and two rows. */
    grid-row: span 2;
}

.three_tall {
    /* This item is 1x3 */
    grid-row: span 3;
}

.two_wide {
    /* This item is 2x1 */
    grid-column: span 2;
}
.four_wide {
    /* This item is 4x1 */
    grid-column: span 4;
    columns: 2;
}

.feature h2 {
    /* Features are mainly distinguished by a bigger title */
    font-size: 2.5em;  
}

.sidebar {
    /* Articles in a bordered box. The newspaper term for this is a sidebar. They use these to add some additional details to the adjacent story.

    /* This item's grid size is specified with a sizing class, not here */
    
    /* Additional margin on this element so the top of its border lines up with the adjacent columns */
    margin-top: 0.6em;
    border: rgba(0, 0, 0, 0.4) 1px solid;
    font-size: 90%;
    padding: 0.6em;
}

.box {
    /* .box is a sidebar with normal text size 
    Also it has larger margins, so it doesn't touch other bordered elements */
    margin: 0.6em;
    border: rgba(0, 0, 0, 0.4) 1px solid; 
    padding: 0.6em;
}

.dotted {
    /* .dotted is a sidebar with normal text size and a dotted border */
    margin-top: 0.6em;
    border: rgba(0, 0, 0, 0.4) 4px dotted; 
    padding: 0.6em;
}

/* These two classes can be applied to other elements to make them float, used for inset images and info boxes */
.float_right {
    float: right;
    max-width: 50%;
    margin: 0 0 1em 1em; 
}

.float_left {
    float: left;
    max-width: 50%;
    margin: 0 1em 1em 0; 
}

/* *** use for media queries? on index 
.clear {
    clear: both;
}
*/
.margin_top {
    /* Used in mid-article sidebar to give it a top margin */
    margin-top: 1em;
}
.inset_image {
    margin-bottom: 1.8em;
}

.inset_image img {
    opacity: 90%;
    max-width: 100%;
    filter: sepia(45%);
    background-color: rgba(0, 0, 0, 0.8);
    padding: 2px;
    border-radius: 3px;
}

/* 
This is a bit of a hack, but... it works.
It's for the glowing animated borders when hovering on article images.
I wanted an obvious effect so users would know they can click the images for full resolution.

I found out how to do this here:

https://www.letsbuildui.dev/articles/how-to-animate-borders-in-css

For non-hovered images (see the rule above) I included a black "border" using 3px padding and a black background, which also has the -- in my opinion -- nice effect of giving the images an outline.
*/

.inset_image img:hover {
    animation: img_glow 1s infinite alternate;
}

@keyframes img_glow {
    0% {
        background-color: rgb(250, 138, 9) 
        
    }
    100% {
        background-color: rgb(255, 15, 15)
    }
}

.inset_image p {
    margin: auto;
    font-style: italic;
    font-size: 1em;
}

/* .border_left_full: a selector only active in four column mode. */
.border_left::before, .border_left_full::before {
  content: "";
  background: rgb(0, 0, 0);
  opacity: 20%;
  width: 2px;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.weather {
    margin: auto;
    width: fit-content;
    /* Grid for the weather prophecies */
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 1em;
}


.weather p:nth-child(4n+1) {
    /* Dates */
    font-weight: bold;
    text-align: right;
}

.weather p:nth-child(4n+2) {
    /* Separators */
    /* Hide them as the window size decreases */
    overflow: hidden;
}

.weather p:nth-child(4n+3) {
    /* Symbols */
    font-size: 1.5em;
    font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
    font-weight: bold; 
}

.weather .rain, .weather .drizzle, .weather .cloudy, .weather .mana_1, .weather .mana_2 {
    /* Outline the icons a little so they look more magical 
    Except the two yellow/orange ones, for contrast */
    text-shadow:    
        0 0 0.3em rgb(255, 254, 254);
}

.weather .rain {
    animation: rain_glow 1.5s infinite alternate;  
}
@keyframes rain_glow {
    0% {color: rgb(41, 9, 226);}
    100% {color: rgb(0, 153, 255);}
}
.weather .drizzle {
    animation: drizzle_glow 5.5s infinite alternate;  
}
@keyframes drizzle_glow {
    0% {color: rgb(131, 220, 247);}
    100% {color: rgb(0, 153, 255);}
}
.weather .sun {
    /* Different shadow so it stands out */
    text-shadow:    
        0 0 0.3em rgb(255, 97, 6);
    animation: sun_glow 2.5s infinite alternate;  
}
@keyframes sun_glow {
    0% {color: rgb(255, 230, 0);}
    100% {color: rgb(255, 255, 0);}
}
.weather .cloudy {
    animation: cloudy_glow 2.5s infinite alternate;  
}
@keyframes cloudy_glow {
    0% {color: rgb(58, 58, 58);}
    100% {color: rgb(134, 134, 134);}
}
.weather .mana_1 {
    animation: mana_glow 1.5s infinite alternate;  
}

.weather .mana_2 {
    animation: mana_glow 0.75s infinite alternate;
}
@keyframes mana_glow {
    0% {color: rgb(119, 6, 81);}
    100% {color: rgb(255, 0, 149);}
}
.weather .meteor {
    text-shadow:    
        0 0 0.3em rgb(255, 97, 6);
    animation: meteor_glow 1.5s infinite alternate;
}
@keyframes meteor_glow {
    0% {color: rgb(228, 36, 11);}
    100% {color: rgb(255, 102, 0);}
}

.ad_arcane {
    font-family: "EB Garamond", serif;
}

.ad_arcane h2 {
    font-size: 2em;
    font-weight: 900;
}

.ad_arcane ul {
    font-size: 1.2em;
    margin: auto;
    width: fit-content;
    letter-spacing: 0.02em;
    font-weight: 550;
    font-style: oblique;
}
.ad_arcane p {
    width: 90%;
    margin: 1em auto 0 auto;
    text-align: center;
    letter-spacing: 0.02em;
}

/* The joke here is that Farmer F *is* Betharyl (Fungeye). She showed up a few episodes ago and the players seemed to like her a lot. */
.ad_betharyl {
    font-family: "EB Garamond", serif;
    text-align: center;
    /* I wanted a simple way for the images to be at the very top and bottom of the container, with the text div taking up the rest. Flex works for that. */
    display: flex;
    flex-direction: column;
    letter-spacing: 0.02em;
}

.ad_betharyl div {
    margin: auto auto;
}

.ad_betharyl h1, .ad_betharyl h2 {
    margin: 0.6em;
}
.ad_betharyl h1 {
    font-size: 2.6em;
}
.ad_betharyl h2 {
    font-size: 1.2em;
}

/* Div to contain the p text so it has a bit more margin */
.ad_betharyl .ad_copy {
    width: 80%;
    margin: 1.5em auto; 
}

.ad_betharyl p {
    margin-top: 1em;
}

.ad_betharyl .ad_final_box {
    display: flex;
    flex-direction: row;
    gap: 1.5em;
    margin: 2em auto 1em auto;
    width: 90%;
}

.ad_betharyl .ad_big_b {
    content: "";
    background-color: #ccc2b44d;
    filter: sepia(65%);
    width: 60%;
    min-width: 6em;
    height: 60%;
    margin:auto;
    border: rgba(0, 0, 0, 0.4) 1px solid;
    border-radius: 100%;
    box-shadow: 0px 0px 13px 3px rgba(160, 101, 24, 0.2);
}

.ad_betharyl .ad_final_text {
    margin: auto;
    font-style: oblique;
    font-size: 1.5em;
    vertical-align: middle;
    letter-spacing: 0.02em;
    word-spacing: 0.02em;
}

/* Properties for the ad's header and footer images */
.ad_betharyl .ad_header, .ad_betharyl .ad_footer {
    filter: sepia(55%);
    height: 3em;
    width: 100%;
    object-fit: cover; 
    border-radius: 5px;
    opacity: 90%;
}

.ad_betharyl .ad_header { 
    object-position: 80% 50%;
    margin-bottom: 1em;
}

/* Same picture, just positioned differently */
.ad_betharyl .ad_footer {
    object-position: 70% 33%;
    margin-top: 1em;
}

.ad_witches h1 {
    text-align: center;
    font-size: 4em;
    font-family: "Mea Culpa", cursive;
    margin: 0 0 0.05em 0;
    font-weight: 200;
}

.ad_witches h2, .ad_witches h3 {
    font-family: "EB Garamond", serif;
    margin: 0 0 0.5em 0;
    font-weight: 550;
}

.ad_witches h2 {
    font-size: 2em;
    font-style: italic;
}

.ad_witches h3 {
    font-size: 1.4em;
}
.ad_witches ul {
    /* Flex display to add gaps between the elements */
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    font-family: "Libre Baskerville", serif;
    line-height: 1.3em;
    font-size: 1em;
    letter-spacing: 0.02em;
    margin: 0 0 1.5em 0;
    list-style-type: square;
}
.ad_witches .oblique {
    font-size: 1.4em;
    font-style: oblique;
}

.ad_witches p {
    text-align: center;
    font-family: "Libre Baskerville", serif;
    font-size: 0.9em;
    letter-spacing: 0.02em;
}

/* Last p line */
.ad_witches p:last-child {
    margin-top: 2.5em;
}

.ad_witches .happy_customers {
    /* Display as grid so the pointing hands always stay on the sides of the text */
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 0.6em;
}

/* Old-fashioned pointing hands */
.ad_witches .symbol {
    font-size: 2.2em;
    font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
    font-weight: bold; 
    /* Flex to vertical align the hands -- noticeable at small resolutions */
    display: flex;
    align-items: center;
}

/* Align the hands */
.ad_witches .symbol:nth-of-type(1) {
    justify-content: right;
}
.ad_witches .symbol:nth-of-type(3) {
    justify-content: left;
}
.crossed_lines {
    display: grid;
    grid-template-columns: 50% 50%;
    border: rgba(0, 0, 0, 0.2) 1px solid;
    background: url(../images/crossed_lines.png) no-repeat center/30% 200%;
}

.crossed_lines h2 {
    /* Logo */
    /* Add a subtle outline around the text for when it overlaps with the background image */
    text-shadow: 0.1em 0.1em #ebdaca;
    font-family: "Baskervville SC", cursive;
    font-style: italic;
    text-transform: lowercase;
    margin: 0;
    text-align: right;
    padding: 2% 10% 1em 0;
}
.crossed_lines .left_align {
    text-align: left;
    padding: 1em 0 2% 10%;
}

.article > .byline {
    /* Direct child to make this more specific than the article p selector */
    text-align: center;
    font-style: italic;
    margin: auto auto 1em auto;
}

.horoscopes {
    width: fit-content;
    /* Grid for the horoscopes*/
    display: grid;
    grid-template-columns: auto auto 50%;
    gap: 1.5em 1em;
}



.horoscopes p:nth-child(3n+1) {
    /* Zodiac names */
    margin: auto 0;
    text-align: right;
}

.horoscopes p:nth-child(3n+2) {
    /* Symbols */
    margin: auto auto;
    font-size: 2em;
    font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
    font-weight: bold; 
    text-shadow:    
        0 0 0.3em rgba(250, 125, 240, 0.3);
}
.horoscopes p:nth-child(3n+3) {
    text-align: left;
    min-width: 6em;
}

/* .jokes p:nth-child(2n+2) {
    transition: .1s;
    filter: blur(.2em);
}

.jokes p:nth-child(2n+2):hover {
    filter:none
} */



.blurb {
    font-style: italic;
    font-size: 100%;
}

.comic div {
    width: fit-content;
    /* Grid for the horoscopes*/
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.5em;
    
}

.comic h2 {
    margin: auto;
    font-family: "Libre Baskerville", serif;
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    text-align: left;
    word-spacing: .2em;
}

.comic img {
    border: rgba(0, 0, 0, 1) 3px solid;
    width: 100%;
}

.signature {
    font-family: "Mea Culpa", cursive;
    font-size: 2em;
    margin: 0 0 0 1.5em;
}

.signature_normal {
    font-size: 0.6em;
    font-family: "Libertinus Serif", serif;
    font-style: italic;
    padding-left: 0.3em;
}

.about_content {
    width:60%;
    margin: auto;
}

.about_content  h1 {
    text-align: center;
    font-size: 2.5em;
    margin: auto;
    font-weight: 550;
    font-family: "Libertinus Serif", serif;
    padding: 0;
}

.address {
    width: fit-content;    
    border: rgba(0, 0, 0, 0.2) 1px solid; 
    margin: 2.5em auto;
    padding: 0 2em;
}

.address, .contact_form {
    text-align: center;  
}

form {
    margin: 1.5em 0 3em 0;
}

form h2 {
    
    margin: 1.3em 0 0.4em 0;
}
.form_item {
    width: 70%;
    height: 2em;
}

textarea {
    width: 70%;
    margin-bottom: 1.5em;
}

input {
    width: 40%;
    height: 2em;
}

footer ul {
    text-align: center;
    font-family: "Libertinus Serif", serif;
    color: rgba(0, 0, 0, 0.77);
    margin: auto; 
    padding: 0;
    font-size: 1.2em; 
    list-style: none; 
}

footer li {
    padding: 0em 2em;
    display: inline-flex;
}


footer a {
    border-radius: 1em;
    font-size: 125%;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    padding: 0.5em 1em;

}

footer a:active {
    /* Outline doesn't increase the element's size, so, unlike border, it doesn't push other elements away */
    outline: #ff9900 3px solid;
}

/* --------- Media queries -------- */

/* Scale text site-wide for higher resolutions */
@media screen and (min-width: 2500px) {
	/* 1440p */
	html {
		font-size: 125%
	}
}

@media screen and (min-width: 3500px) {
	/* 4k */
	html {
		font-size: 150%
	}
}

/* Smaller sizes */
@media screen and (max-width: 1650px) {

    /* The floating inset images start forcing the headlines to act weird around this size, so allow them take up the whole column.
    
    Exclude inset images that are within the articles (like the one on the Entertainment page) */
    .inset_image:not(.margin_top) {
        max-width: 100%;
        margin: 0 0 1em 0; 
    }
}

@media screen and (max-width: 1600px) {
    /* Reclaim space from sides */
    .wrapper {
        width: 80%;
    }
    /* .float_right:not(.inset_image), .float_left:not(.inset_image) {
        max-width: 30%;
    } */
}

@media screen and (max-width: 1400px) {
    /* Reclaim space from sides */
    .wrapper {
        width: 90%;
    }
}

@media screen and (max-width: 1000px) {
    /* Reclaim space from sides */
    .articles_block {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Elements with expand property that are NOT two-wide now grow to 2-wide */
    .expand:not(.two_wide) {
        grid-column: span 2;
    }
    /* 2-wide elements with expand property now fill the 3-column grid. */
    .expand.two_wide {
        grid-column: span 3;
    }

    /* These are items which need to go from 1 column to 3 */
    .superexpand {
        grid-column: span 3;
    }

    /* Entertainment flows poorly with 3 columns, so it's set to two */
    .entertainment .articles_block {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Disable the border_left_full rule by removing its content.   
    These are elements which now have nothing to the left of them, so they shouldn't have a border. */
    .border_left_full::before {
        content: none;
    }

    .form_item, textarea {
        width: 100%
    }
    footer li {
        padding: 0em 1em;
    }
    .about_content {
        width:75%;
    }
}

@media screen and (max-width: 850px) {
    footer li {
        /* The footer is about to show items asymmetrically, so stop being inline flex */
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width: 600px) {
    /* Grid layout removed */
    .articles_block {
        display: block; 
    }

    /* Add a visual border to separate the items, except on sidebar and dotted which already have borders, and not on the final element either */
    .articles_block > div:not(.sidebar):not(.dotted):not(:last-child) {
        border-bottom: 2px solid rgba(0, 0, 0, 0.25);
    }

    /* All remaining border_lefts removed */
    .border_left::before {
    content: none;
    }
    .about_content {
    width:90%;
    }
    .newspaper_name {
        font-size: 5.5em;
    }

    .headlines h1 {
        font-size: 3em;
    }

    /* Comics are about to get too small to read, so display the panels vertically (this is why the panels are separate images!) */
    .comic div {
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 450px) {
	.headlines h1 {
        font-size: 2.5em;
    }
    .newspaper_name {
        font-size: 4.5em;
    }
    .ad_betharyl .ad_final_box {
        display: block;
    }
}

@media screen and (max-width: 400px) {
    .page_title h1 {
        font-size: 3em;
    }
}
@media screen and (max-width: 360px) {
    .float_left, .float_right {
        max-width: none;
        margin: 0.5em auto;
    }
    .page_title h1 {
        font-size: 2.4em;
        overflow-wrap: break-word;
    }

    /* The horoscope flow breaks, so flow it in two columns instead */
    .horoscopes {
        grid-template-columns: auto auto;
        gap: 0.5em;
    }   
    .horoscopes p:nth-child(3n+1) {
        /* Zodiac names */

        text-align: left;
        grid-column: span 1;
        font-weight: bold;
    }

    .horoscopes p:nth-child(3n+2) {
        /* Symbols */
        grid-column: span 1;
    }
    .horoscopes p:nth-child(3n+3) {
        grid-column: span 2;
        margin: 0 0 0.75em 0;
        padding-bottom: 0.75em;
        
    }
    /* Add separator below horoscopes all except final one */
    .horoscopes p:nth-child(3n+3):not(:last-child) {
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    }    
}

@media screen and (max-width: 300px) {
	html {
		font-size: 90%;
        
	}
    .ad_witches .symbol {
        font-size: 1.5em;

    }
}


@media screen and (max-width: 240px) {
	html {
		font-size: 80%;
	}

}