/* Universal Font Section */ /* As far as we know, these fonts are unrestricted license or public domain. We've included the details in our copyright section, but if we're using your font in error please let us know and we will either license it or remove it from our site. Thanks! */ @font-face { font-family: "Calligraffitti"; src: url(../fonts/Calligraffitti-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: "Metamorphous"; src: url(../fonts/Metamorphous-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: "Metamorphous-Bold"; src: url(../fonts/Metamorphous-Regular.ttf); font-weight: 700; font-style: normal; } @font-face { font-family: "Montserrat"; src: url(../fonts/Montserrat-VariableFont_wght.ttf); font-optical-sizing: auto; font-weight: 430; font-style: normal; } /* Fonts for Select Elements */ h1, h2, h3, h4, h5, h6, nav, footer, .headertitle { font-family: "Metamorphous",'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } /* Universal Attributes */ /* This is meant to adapt the size to viewing window. */ * { font-size: calc(12px + .3vw); } body { background-color: hsla(165.52, 19.21%, 29.61%, 1); max-width: fit-content; margin-left: auto; margin-right: auto; font-family: Montserrat, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } /* Link Formatting and Decoration */ /* General Linkage */ a { color: hsla(25, 64%, 15%, 1); text-decoration: underline dotted; } a:hover { color: hsla(25, 64%, 33%, 1); text-decoration: underline solid; } a:active { color: hsla(25, 64%, 33%, 1); text-decoration: line-through dotted; } a:visited { color: hsla(25, 64%, 25%, 1); text-decoration: underline dotted; } /* Nav Links */ .navmenu a,.endmenu a, .footmenu a { color: hsla(94, 64%, 15%, 1); text-decoration: none; } .navmenu a:hover, .endmenu a:hover, .footmenu a:hover { color: hsla(94, 64%, 33%, 1); text-decoration: none; } .navmenu a:active, .endmenu a:active, .footmenu a:active { color: hsla(94, 64%, 33%, 1); text-decoration: none; } .navmenu a:visited, .endmenu a:visited, .footmenu a:visited { color: hsla(94, 64%, 15%, 1); text-decoration: none; } /* Current Page */ /* Subtle decoration to hint at the page ppl are currently on! */ .currentpage { text-decoration: overline dotted !important; text-decoration-thickness: 2px !important; } .currentpage { text-decoration: overline dotted hsla(94, 64%, 66%, .5); text-decoration-thickness: 2px; } /* Formatting for the heading (h) tags */ /* These should relative to the base body font size. We set all of them out of planned laziness! */ h1, h2, h3, h4, h5, h6 { background-color: hsla(45, 67%, 87%, 1); background: linear-gradient(90deg,hsla(45, 67%, 96%, 0.5) 0%, hsla(45, 67%, 87%, .6) 10%, hsla(45, 67%, 96%, 0.5) 75%); padding-top: .2em; padding-bottom: .1em; padding-left: .1em; } h1 { font-size: 1.6em; } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; } h5 { font-size: 1.05em; } h6 { font-size: 1em; } header, nav, main, footer { max-width: 1440px; min-width: 320px; margin-left: 13px; margin-right: 13px; } /* Head Section */ header { display: block; flex-wrap: wrap; background-color: hsla(45, 67%, 96%, 0.75); background-image: url(../images/bgcrop.jpg); background-blend-mode: lighten; border: 5px 5px 0px 5px solid hsla(93.23, 25.9%, 60%, 1); border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; justify-content: flex-start; margin-top: 11px; } .headeralignment { display: inline-flex; margin: 0 auto; } .headerlogo { max-width: 125px; max-height: 125px; padding-left: 5px; padding-right: 7px; } .headercontainer { vertical-align: top; } .headertitle { font-size: 2em; background: unset; padding: unset; } .headersubtitle { color: hsla(60, 0.5%,33%, 1); font-family: "Calligraffitti", cursive; background: unset; padding: unset; } /* Nav Section */ nav { background-color: hsla(93.23, 25.9%, 80.22%, 1); color: hsla(234, 19%, 25%, 1); border-top: 1px dashed hsla(234, 19%, 25%, 1);; border-bottom: 2px solid hsla(234, 19%, 75%, 1); border-right: 2px solid hsla(234, 19%, 75%, 1); border-left: 2px solid hsla(234, 19%, 75%, 1); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; text-align: center; margin-top: -4px; margin-bottom: 15px; } nav ul { list-style-type: none; display: inline-flex; } nav li { font-size: 1.3em; font-weight: 700; } .navmenu::after, .footmenu::after { content: " - "; font-weight: 300; } /* Main Section */ main { margin-left: 13px; margin-right: 13px; } section { background-color: hsla(45, 67%, 96%, 1); box-sizing: border-box; display: block; border: 5px solid hsla(93.23, 25.9%, 60%, 1); border-radius: 25px; justify-content: flex-start; margin: 0 auto; padding: 2px 5px 2px 15px; margin-bottom: 15px; } /* Indents */ .h2indent { padding-left: 2vw; } /* Important Announcements */ .superimportant { background-color: hsla(272, 34%, 75%, 1); border-radius: 25px; border: 5px solid hsla(272, 34%, 25%, 1); padding: 1px; } .important { text-align: center; } .announcementheading { font-size: 1.1em; background-color: hsla(272, 34%, 25%, 1); background: radial-gradient(circle,hsla(272, 34%, 25%, 1) 50%, hsla(272, 34%, 75%, .8) 95%); color: hsla(45, 67%, 96%, 1); padding: 3px; border-radius: 1.1em; } /* Footer */ footer { background-color: hsla(93.23, 25.9%, 80.22%, 1); box-sizing: border-box; display: block; border: 5px solid hsla(93.23, 25.9%, 60%, 1); border-radius: 25px; justify-content: flex-start; margin: 0 auto; padding: 0px 5px 0px 15px; margin-bottom: 15px; margin-left: 13px; margin-right: 13px; text-align: center; } footer ul { list-style-type: none; display: inline-flex; } footer li { font-size: 0.9em; font-weight: 700; }