html { font-size:16px; margin:0; padding:0; box-sizing:border-box; }
* { font-size:1rem; margin:0; padding:0; box-sizing:border-box; }
body { 
    font-size:1rem; color:#17181d; 
    font-family:"Inter", Arial, sans-serif;
    font-weight:300; font-style:normal;
    margin:0; padding:1rem; box-sizing:border-box; 
    background-color:#000000; background-image:url('/newspaper/images/texture_usu-art-room2.png'); background-repeat:repeat; 
}
/* used this tool: https://www.imgonline.com.ua/eng/make-seamless-texture.php */
strong { font-size: inherit; }
em { font-size: inherit; }
s { font-size: inherit; }
a { font-size: inherit; }
div { font-size: inherit; }
span { font-size: inherit; }

/* NEW COLORS, with help from: https://color.adobe.com/create/image */
.colorWINE { color:#371c29; }
.colorWHITE { color:#eeeced; }
.colorGRAY { color:#b4a2a6; }
.colorPEACH { color:#b87675; }
.colorBLACK { color:#0c0909; }
.colorTEAL { color:#356a62; }

header { 
    margin:0rem 0.125rem 0rem 0.125rem; margin-bottom:2rem; padding:1.333rem 0.6rem 1.72rem 0.6rem; 
    color:#eeeced; text-align:center; 
    background-color:#000000; background-image:url('/newspaper/images/copperband2.png'); 
    background-size:cover; background-position:center; background-repeat:no-repeat; 
    border-radius:1.333rem; box-shadow:0px 0px 20px rgba(0, 0, 0, 0.9); 
}
.headerLOGO { display:block; margin:0 auto; margin-bottom:0.4rem; padding:0; width:94%; max-width:calc(900px - 3rem); aspect-ratio: 900 / 96; box-sizing:border-box; }
nav ul { list-style:none; margin:0; padding:0; }
nav ul li { display:inline-block; font-weight:normal; margin:0rem 0.9rem; padding:0; }
nav ul li a { text-decoration:none; color:#f7f1eb; font-size:1.25rem; margin:0; padding:0; }

main { max-width:900px; margin:0 auto; margin-bottom:2.25rem; padding:0; }
section { 
    width:calc(100%); margin:0; margin-bottom:1.5rem; padding:1.5rem; overflow:hidden; 
    border-radius:0.667rem; box-shadow:0px 4px 13px rgba(0, 0, 0, 0.75); 
    background-color:#f7f1eb; background-image:url('/newspaper/images/sectionfrost.png'); 
    background-size:100% 150px; background-position:top; background-repeat:no-repeat; 
}
section h2 { color:#000000; font-size:1.9rem; margin:0; margin-bottom:1.4rem; padding:0; }
section p { font-size:1.55rem; line-height:2.25rem; margin:0; margin-bottom:1.5rem; padding:0; }
section ul.custom-bullet { list-style-type:none; margin:0; padding:0; }
section ul.custom-bullet li {
    margin:0; margin-bottom:0.75rem; padding:0; padding-left:2rem; line-height:2.5rem; 
    background-image:url('/images/icon-note.png'); background-repeat:no-repeat; background-position:-0.25rem 0rem; background-size:1.75rem 1.75rem;
}
.preTXT { 
    width:calc(95%); margin:0; padding:0; overflow:hidden; 
    font-size:1.25rem; line-height:1.7rem; color:#440022; 
    font-family:"Cutive Mono",monospace;
    font-weight:400; font-style:normal;
} 
.preTXT2 { 
    width:calc(95%); margin:0; padding:0; overflow:hidden; 
    font-size:1.4rem; line-height:1.8rem; color:#440022; 
    font-family:"Cutive Mono",monospace;
    font-weight:400; font-style:normal;
} 

.homepageLEFT { float:left; width:39%; margin:0; padding:0; box-sizing:border-box; }
.homepageAnnouncement { font-size:1.3rem; line-height:1.7rem; padding-right:2.8rem; }
.homepageRIGHT { float:left; width:61%; margin:0; padding:0; box-sizing:border-box; }
.teaserBUCKET { cursor:pointer; float:left; width:calc(50% - 1.1rem); margin:0rem 1.1rem 1.1rem 0rem; padding:0; background-color:#FFFFFF; border:solid 3px #000000; box-sizing:border-box; }
.teaserTITLE { width:calc(97%); text-align:center; color:#CC0000; font-size:1.1rem; font-weight:bold; margin:0 auto; padding:0.4rem 0.333rem 0.4rem 0.333rem; box-sizing:border-box; }
.teaserTHUMB { width:100%; aspect-ratio: 287 / 138; max-height:7rem; overflow:hidden; margin:0; padding:0; background-color:#000000; background-size:cover; background-position:center; background-repeat:no-repeat; border-top:solid 1px #AA4488; border-bottom:solid 2px #000000; box-sizing:border-box; }
.teaserBLURB { width:calc(97%); text-align:center; color:#225544; font-size:0.9rem; font-weight:normal; line-height:2.0rem; margin:0 auto; padding:0rem 0.2rem 0rem 0.2rem; box-sizing:border-box; }

.docDIV {
    float:left; margin:5px 20px 10px 5px; padding:15px; 
    width:270px; height:375px; overflow:hidden; 
    text-align:center; line-height:20px;
}

.pGWIZ { /* Maintains a 37% height-to-width ratio (851x315) */
    display:block;
    width:100%; aspect-ratio: 100 / 37.0152761457; box-sizing:border-box;
    margin:0.75rem 0rem 1.25rem 0rem; padding:0; 
    background-size:cover; background-position:center; background-repeat:no-repeat; 
    border:solid 3px #000000;
}
.pGWIZ:hover { border:solid 3px #80A0CC; }
.gwizANSWER { 
    position:relative; 
    width:100%; height:100%; box-sizing:border-box;  
    margin:0; padding:0;
    background-color:rgba(56,28,44,0.85); 
}
.gwizAnswerTXT { 
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    margin:0; padding:0rem 0rem 1.5rem 0rem;
    text-align:center; line-height:3.6rem; 
    font-size:3.2rem; color:#eeeced; font-weight:bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.couponFRAME { box-sizing:border-box;
    float:left; display:block;
    width:calc(33.333% - 1rem); aspect-ratio: 100 / 33.333; 
    margin:0.25rem 0.333rem 0.5rem 0.333rem; padding:0;  
    border:solid 2px #000000; 
}
.couponBOX { box-sizing:border-box; 
    position:relative; 
    width:100%; height:100%;   
    margin:0; padding:0;  
    background-color:#6688AA; background-image:none; 
    background-size:cover; background-position:center; background-repeat:no-repeat; 
}
.couponTXT { box-sizing:border-box; 
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:100%; margin:0; padding:0rem 0.333rem 0.4rem 0.333rem;  
    text-align:center; line-height:1.8rem; 
    font-size:1.6rem; color:#FFFFFF; font-weight:bold;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.75);
}

footer { 
    color:#f7f1eb; text-align:center; 
    margin:0rem 0.25rem 0.5rem 0.25rem; padding:0.75rem 0rem; 
    background-color:#FFFFFF; background-image:url('/newspaper/images/tiedyeband2.png'); 
    background-size:cover; background-position:center; background-repeat:no-repeat; 
    border-radius:1.333rem; box-shadow:0px 0px 20px rgba(0, 0, 0, 0.9); 
}
footer p { font-size:1.125rem; margin:0; padding:0; }
footer a { font-size:1.125rem; color:#f7f1eb; text-decoration:none; }


/* ============================================ */
/* RESPONSIVE MEDIA QUERIES (portrait)          */
/* ============================================ */
/* mobile portrait widths : 280, 360, 375, 390, 393, 400, 412, 412, 414, 540 */
@media screen and (max-width:583px) and (orientation:portrait) {
    body { padding:0.667rem; }
    header { margin-bottom:1.333rem; padding:0.889rem 0.4rem 1.15rem 0.4rem; border-radius:0.889rem; }
    .headerLOGO { margin-bottom:0.27rem; max-width:calc(583px - 2rem); }
    main { max-width:583px; margin-bottom:1.5rem; }
    section { margin-bottom:1rem; padding:1rem; border-radius:0.444rem; box-shadow:0 0 5px rgba(0, 0, 0, 0.1); }
    section h2 { font-size:1.4rem; margin-bottom:0.7rem; }
    section p { font-size:0.85rem; line-height:1.25rem; margin-bottom:1rem; }
    section ul.custom-bullet li {
        margin-bottom:0.75rem; padding-left:2rem; line-height:2.5rem; 
        background-position:-0.25rem 0rem; background-size:1.75rem 1.75rem;
    }
    .preTXT { font-size:0.725rem; line-height:1.1rem; } 
    .preTXT2 { font-size:0.65rem; line-height:1.27rem; } 

    .homepageLEFT { width:55%; }
    .homepageAnnouncement { font-size:0.95rem; line-height:1.4rem; padding-right:1.75rem; }
    .homepageRIGHT { width:45%; }
    .teaserBUCKET { float:none; width:calc(98%); margin:0rem 0rem 0.6rem 0rem; border:solid 2px #000000; }
    .teaserTITLE { font-size:0.75rem; padding:0.2rem 0.1rem 0.2rem 0.1rem; }
    .teaserTHUMB { max-height:7rem; }
    .teaserBLURB { font-size:0.6rem; line-height:1.5rem; padding:0rem 0.1rem 0rem 0.1rem; }

    .gwizAnswerTXT { padding:0rem 0rem 0.5rem 0rem; line-height:1.7rem; font-size:1.5rem; }
    
    .couponFRAME { margin:0.333rem 0.15rem 0.333rem 0.15rem; }
    .couponTXT { padding:0rem 0.25rem 0rem 0.25rem; line-height:0.8rem; font-size:0.75rem; font-weight:normal; }
    
    footer { padding:0.5rem 0rem; border-radius:0.889rem; }
    footer p { font-size:0.75rem; }
    footer a { font-size:0.75rem; }
}
@media screen and (min-width:0px) and (orientation:portrait) { /* galaxy fold (280x653) */
    nav ul li { margin:0rem 0.14rem; }
    nav ul li a { font-size:0.655rem; }
}
@media screen and (min-width:359px) and (orientation:portrait) { /* samsung galaxy s8+ (360x740) */
    nav ul li { margin:0rem 0.22rem; }
    nav ul li a { font-size:0.725rem; }
}
@media screen and (min-width:374px) and (orientation:portrait) { /* iphone se (375 x 667) */
    nav ul li { margin:0rem 0.29rem; }
    nav ul li a { font-size:0.785rem; }
}
@media screen and (min-width:389px) and (orientation:portrait) { /* iphone 12 pro (390 x 844) */
    nav ul li { margin:0rem 0.35rem; }
    nav ul li a { font-size:0.835rem; }
}
@media screen and (min-width:392px) and (orientation:portrait) { /* pixel 5 (393 x 851) */
    nav ul li { margin:0rem 0.39rem; }
    nav ul li a { font-size:0.875rem; }
}
@media screen and (min-width:399px) and (orientation:portrait) { /* responsive (400 x 858) */
    nav ul li { margin:0rem 0.37rem; }
    nav ul li a { font-size:0.905rem; }
}
@media screen and (min-width:411px) and (orientation:portrait) { /* samsung galaxy s20 ultra (412 x 915)  && samsung galaxy a51/71 (412 x 914) */
    nav ul li { margin:0rem 0.37rem; }
    nav ul li a { font-size:0.925rem; }
}
@media screen and (min-width:413px) and (orientation:portrait) { /* iphone xr (414 x 896) */
    nav ul li { margin:0rem 0.33em; }
    nav ul li a { font-size:0.935rem; }
}
@media screen and (min-width:539px) and (orientation:portrait) { /* surface duo (540 x 729) */
    nav ul li { margin:0rem 0.75rem; }
    nav ul li a { font-size:1.1rem; }
}

/* ============================================ */
/* RESPONSIVE MEDIA QUERIES (landscape)         */
/* ============================================ */
/* mobile landscape widths: 626, 653, 667, 720, 740, 844, 851, 896, 914, 915 */
@media screen and (max-width:988px) and (orientation:landscape) {
    body { padding:0.667rem; }
    header { margin-bottom:1.333rem; padding:0.889rem 0.4rem 1.15rem 0.4rem; border-radius:0.889rem; }
    .headerLOGO { margin-bottom:0.27rem; max-width:calc(988px - 2rem); }
    nav ul li { margin:0rem 1.15rem; }

    main { max-width:988px; margin-bottom:1.5rem; }
    section { margin-bottom:1rem; padding:1rem; border-radius:0.444rem; box-shadow:0 0 5px rgba(0, 0, 0, 0.1); }
    section h2 { font-size:1.4rem; margin-bottom:0.7rem; }
    section p { font-size:1.1rem; line-height:1.7rem; margin-bottom:1rem; }
    section ul.custom-bullet li {
        margin-bottom:0.75rem; padding-left:2rem; line-height:2.5rem; 
        background-position:-0.25rem 0rem; background-size:1.75rem 1.75rem;
    }
    .preTXT { font-size:1.05rem; line-height:1.5rem; } 
    .preTXT2 { font-size:1.1rem; line-height:1.5rem; } 

    .homepageAnnouncement { font-size:1.3rem; line-height:1.7rem; padding-right:2.8rem; }
    .teaserBUCKET { width:calc(50% - 1.1rem); margin:0rem 1.1rem 1.1rem 0rem; }
    .teaserTITLE { font-size:1.1rem; padding:0.4rem 0.333rem 0.4rem 0.333rem; }
    .teaserTHUMB { max-height:7rem; }
    .teaserBLURB { font-size:0.9rem; line-height:2.0rem; padding:0rem 0.2rem 0rem 0.2rem; }
    
    .gwizAnswerTXT { padding:0rem 0rem 0.5rem 0rem; line-height:1.7rem; font-size:2rem; }
    
    .couponFRAME { margin:0.333rem 0.15rem 0.333rem 0.15rem; }
    .couponTXT { padding:0rem 0.6rem 0rem 0.6rem; line-height:1.5rem; font-size:1.4rem; font-weight:normal; }

    footer { padding:0.5rem 0rem; border-radius:0.889rem; }
    footer p { font-size:0.889rem; }
    footer a { font-size:0.889rem; }
}