@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap'); :root { --font-color: #003366; --bg-color: #ffffff; --bg-header: #9fdfbe; --h1-color: #3300aa; --h1-font-family: "Raleway"; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - GLOBAL */ * { box-sizing: border-box; } body { box-sizing: border-box; font-size: 100%; max-width: 960px; margin: auto; line-height: 1.4; color: var(--font-color); background-color: var(--bg-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } header, footer { background-color: var(--bg-header); margin: 0; } img { max-width: 100%; height: auto; } article p { margin: 10px; } h1 { color: var(--h1-color); font-weight: normal; font-family: var(--h1-font-family); text-align: center; margin: 20px 0 0 0; } h2 { font-weight: bolder; /* Below is problematic for use on ALL pages -- just FYI may belong in tag anyway.*/ background-image: url("https://darwinawards.com/i/bgmain.jpg"); text-align: center; color: #3300aa; margin: 0; letter-spacing: 1px; } a { font-weight: bold; text-decoration: none; } a:active { font-weight: bold; color: #ff0000; } a.hover { background-color: lightgray; } a:visited { font-weight: normal; /* This has no effect. */ color: darkblue; } .right_margin { /* This paragraph is header text. */ } #top_chuck { width: 222px; max-height: 100%; border: 0; border-radius: 0; float: left; } iframe { /* For youtube embeds, mostly. */ max-width: 100%; } /* GLOBAL mobile - - - - - - - - - - - - - - - - - - - - - - - GLOBAL mobile */ @media only screen and (max-width: 600px) { body { margin: 0; } header { padding: 0 0 7px 0; } h1 { font-size: 1.5rem; /* NOTE: This actually IS the font setter/ */ } h2 { padding: 10px 0; /* NOTE: Maybe shift to the local story template.*/ font-size: 1.25rem; /* NOTE: Actually IS the font setter! */ } .right_margin { /* This paragraph is header text. */ padding: 0 0 3px 5px; margin-bottom: 1px; /* margin: leaves a thin whit3e line */ font-size: 0.9rem; font-weight: light; } #top_chuck { max-width: 30%; max-height: 100%; border: 0; border-radius: 0; float: left; } #top_chuck { border-radius: 50%; border-radius: 0 10px 10px 0; margin-right: 7px; padding-left: 0; float: left; } } @media only screen and (min-width: 601px) { body { /*background-color: pink;*/ } header, footer { padding: 0; } h1 { font-size: 2rem; /* NOTE: This actually IS the font setter/ */ letter-spacing: 2px; } h2 { padding: 25px; } .right_margin { margin-right: 100px; padding: 0 0 3px 5px; margin-bottom: 1px; /* margin: leaves a thin whit3e line */ font-size: 1.1rem; } #top_chuck { margin-right: 10px; } article { margin: 10px; } } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - NAVIGATION */ UL.nav { list-style-type: none; border: 0; margin: 0; padding: 0; overflow: hidden; background-color: #dddddd; } LI.nav { border: 5px outset lightgreen; display: inline; list-style-type: none; float: left; border-radius: 11px; margin-right: 5px; } LI.nav A { display: block; /* makes block clickable; float needed for horizontalness--- */ /* width: 100px; ---for vertical sidebar--- */ margin: 0; background-color: #dddddd; font-size: 0.95rem; padding: 9px 14px; text-align: center; overflow: hidden; color: black; text-decoration: none; } li.nav a:hover { background-color: linen; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - NAVIGATION MOBILE */ @media only screen and (max-width: 600px) { img.story_img_large { display: none; } LI.nav { border-radius: 7px; margin-right: 4px; width: 28%; } LI.nav A { font-size: 0.7rem; padding: 5px 11px; } } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - END DEPRECATED */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - DEPRECATED */ body.slush { background-color: #998884; } header.slush, footer.slush { height: 200px; background-color: white; background-image: linear-gradient(#998884, white, white, white); } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - END DEPRECATED */