@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap'); :root { --font-color: #003366; --font-color-intense: black; --bg-color: #ffffff; --bg-header: #9fdfbe; --bg-header: #c4e4da; --bg-hover: #998884; --h1-color: #3300aa; --h1-font-family: "Raleway"; --redtext: firebrick; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - GLOBAL */ * { box-sizing: border-box; } html { background-color: var(--bg-header); } 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; } a { font-weight: bold; text-decoration: none; } a:active { font-weight: bold; color: #ff0000; } a.hover {background-color: var(--bg-hover); } a:visited { font-weight: normal; color: darkblue; } /* TOPNAV 2022 non-responsive part */ /* also css in media query */ /* also js in HTML */ /* also fontawesome in header */ /* for breadcrumbs (two permanent nav buttons) planned edit to section css file */ .topnav { background-color: var(--bg-header); overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: .3rem .7rem; /* margin: 30px; */ text-decoration: none; font-size: 1.1rem; font-weight: normal; } .topnav a { transition: all .1s ease-in-out; background-color: var(--bg-header); } /* Change the color of links on hover */ /* Hide the hamburgerstack in fullscreen mode. */ .topnav a, .topnav a:visited { color: var(--font-color); } .topnav a:hover { background-color: var(--bg-hover); border-radius: 1rem; box-shadow: inset 0 0 5px var(--h1-color); color: var(--bg-color); transform: scale(1.1); } /*.topnav a.active {*/ /* color: var(--font-color);*/ /* font-weight: bold;*/ /* background-color: var(--bg-hover);*/ /* border: 1px solid var(--font-color-intense);*/ /* border-radius: 50%;*/ /*}*/ .topnav .icon { display: none; } header, footer { background-color: var(--bg-header); margin: 0; } img { max-width: 100%; height: auto; } article p { margin: 10px; } h1 { color: var(--h1-color); color: white; text-shadow: 1px 1px black; background: linear-gradient(to right, indigo, violet, blue, green, yellow, orange, red); font-weight: normal; font-family: var(--h1-font-family); text-align: center; margin: 3px 0 0 0; } h2 { font-weight: bolder; /* Below is problematic for use on ALL pages -- just FYI may belong in tag anyway.*/ background-image: linear-gradient(var(--bg-header), var(--bg-color), var(--bg-color)); text-align: center; color: #3300aa; margin: 0; letter-spacing: 1px; border-top: 1px solid var(--bg-hover); } #top_chuck { width: 222px; max-height: 100%; border: 0; border-radius: 0; float: left; } iframe { /* For youtube embeds, mostly. */ max-width: 100%; } div#review p { width: 80%; margin: 0 auto; border-left: none; border-radius: 2em; padding: 1rem .5rem; line-height: 1.5rem; hyphens: auto; text-indent: .5rem; } div#review p#yes { border: 5px double #0197a3; border-left: none; } img#yes-no { float: left; width: 100px; max-width: 33%; margin-right: 0.5rem; } .redtext { color: var(--redtext);} /* GLOBAL mobile - - - - - - - - - - - - - - - - - - - - - - - GLOBAL mobile */ @media only screen and (max-width: 600px) { body { margin: 0; } /* TOPNAV 2022 mobile-part */ .topnav a:nth-child(n+3) {display: none;} .topnav a.icon { float: right; display: block; } .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: center; } 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: lighter; } #top_chuck { max-width: 30%; max-height: 100%; border: 0; border-radius: 0 10px 10px 0; margin-right: 7px; padding-left: 0; float: left; } div#review p { width: 95%; } } @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; /* this margin creates a thin whit3e line */ font-size: 1.1rem; } #top_chuck { margin-right: 10px; border-radius: 0 1.5rem 1.5rem 0; } 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 NAVIGATION M */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 */