/*
Browns:
#734524
#3f1B00

Cream:
#FFF6DE

Pinks:
#E6C8D0
#B2818F
#874759
#672035
#380010

Teals:
#315D58
#164742
*/

/* A custom font */
@font-face {
    font-family: "Black Signature";
    src: 
        url("../fonts/black-signature/blacksignature.woff2"),
        url("../fonts/black-signature/blacksignature.woff");
}

/* Root properties common to all documents */
    html {
        font-family: "comfortaa", sans-serif;
        font-size: 12pt;
        width: 100%;
        max-width: 100%;
    }

    /* I'm making body relatively positioned in order to position elements within it.
    It's a column flexbox, wide as the viewport. It's at least as tall as the viewport. */
    body {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100dvw;
        max-width:100%;
        min-height: 100dvh;
        background-color: whitesmoke;
        overflow-x: hidden;
}

/* This section pertains to the header, and is applied to all pages */
    /* Header itself. Fixed to top of screen. Z-index adjusted so it's above everything else.*/
    header {
        height: 70px;
        width: 100dvw;
        position: fixed;
        display: flex;
        max-width:100%;
        z-index: 4;
        max-width: 100%;
    }

    /* Box of Melitta logo at top left of header*/
    header svg:nth-of-type(2) {
        position: absolute;
        border: 1px solid #3F1B00;
        border-radius: 5px;
        top: 9px;
        left: 9px;
    }

    /* Text of Melitta logo at top left of header*/
    header h3{
        font-family: "Black Signature", serif;
        color: #672035;
        text-shadow: -1.5px -0.5px 1px rgb(21, 21, 21, 0.4);
        display: block;
        font-size: 35px;
        position: absolute;
        top: 9px;
        margin: 10px 33px;
        transition: color 0.25s ease-in-out;
    }

    /* A hover effect on the Text of Melitta logo at top left of header. Just color change */
    header h3:hover{
        color: #9d3a58;
    }

    /* This is a div directly descended from the header. It contains an svg (my nav menu icon) and a menu. It is positioned initially at the top right of the screen, and covers only the nav icon */
    #navMenu{
        position: absolute;
        display: flex;
        flex-direction: column;
        height: 50px;
        top: 9px;
        right: 9px;
        width: 50px;
        align-items: end;
    }

    /* Make the nav menu div bigger when hovered */
    #navMenu:hover {
        height: 200px;
    }

    /* Nav menu icon. positioned absolutely.*/
    #navMenu svg {
        position: absolute;
        border: 1px solid #3F1B00;
        border-radius: 5px;
        top: 0px;
        right: 0px;
        z-index: 3;
    }

    /* The actual menu. Position is adjusted to align just under the header. Moved offscreen to the right before it is hovered. Fixed width. Transition on the "right" property for a nice slide-in effect*/
    #navMenu menu{
        position: absolute;
        top: 61px;
        right: -150px;
        display: flex;
        flex-direction: column;
        overflow-x: visible;
        align-items:end;
        width: 95px;
        padding-left: 0;
        margin: 0px;
        transition: right 0.5s ease-in-out;
    }

    /* When the navMenu div is hovered, move the menu onscreen. This is how the menu shows when hovering over the icon. */
    #navMenu:hover menu{
        right: 0px;
    }

    /* Small lighting effect on hover for the menu icon */
    #navMenu>svg:hover {
        filter: brightness(1.05);
    }

    /* Styling for individual menu li items. Some positioning adjustment, fixed width, a bit of padding so they're not too cramped, a border to seperate them visually. Aligned to the right, I just think it looks better that way */
    #navMenu menu li {
        position: relative;
        right: -9px;
        display: block;
        width: 95px;
        background-color: #FFF6DE;
        margin: 0px;
        padding: 5px 0px 2px;
        border: 1px solid black;
        text-align: right;
    }

    /* Visually show which meny item is being hovered with a lighting effect */
    #navMenu menu li:hover{
        filter: brightness(1.05);
    }

    /* No underlines on the links. Give them some padding so they're not right on the edge of their boxes */
    #navMenu menu li a{
        text-decoration: none;
        padding: 0 20px 0 0;
    }

    /* While the menu is hovered, continue to show it. This way, After the user moves their mouse off the icon, so long as they are anywhere on the menu, it will still display. */
    header #navMenu>menu:hover {
        right: 0px;
    }

    /* Note: I'm also toggling the menu display on click, but that's in the JS file. */

/* This section is for the styling of my Main elements. */
    
    /* All the mains are column flexboxes, wide as the viewport, with center-aligned items and a cream-yellow background. The max-width property is there because on some browsers, a vertical scrollbar will make 100dvw bigger than the actual viewport width. This prevents that. */
    main {
        display: flex;
        flex-direction: column;
        width: 100dvw;
        align-items: center;
        max-width: 100%;
        background-color: #FFF6DE;
    }

    /* Each of my three mains has slightly different height calculations. I know this isn't ideal and it's far from scalable. Changes to the copy might necessitate changing these values. But I couldn't figure out how to make the pages truly dynamic at ALL possible viewport sizes without doing this or using javascript. */ 
    main.productPage {
        height: calc(1300px + calc(0.3 * calc(1000px - 100dvw)));
    }

    main.aboutPage {
        height: calc(2150px + calc(0.3 * calc(1000px - 100dvw)));
        min-height: 100dvh;
    }

    main.contactPage {
        height: calc(1300px + calc(0.3 * calc(1000px - 100dvw)));
        min-height: 100dvh;
    }

/* Now I'll cover the content of my Index's main */

    /* #masthead is, of course, the masthead on my index page. It's a column flexbox, center aligned, as wide as the viewport. Also both hardcoded to be 900px high at 1536px width, and to increase in height as width decreases (to accomodate the elongated content) */
    #masthead {
        width: 100dvw;
        height: calc(900px - calc(0.4 * calc(1536px - 100dvw)));
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        max-width: 100%;
    }

    /* This code scales the SVGs making up the back layer of my masthead. The only scale up to a max height or width. As screen width decreases, height and width also decrease. But I've set the width of the SVG to scale slightly less linearly. I want it to take up a larger PERCENTAGE of screen width at lower screen widths, otherwise it gets too small. */
    #masthead svg {
        width: calc(120% + calc(0.15 * calc(1536px - 100dvw)));
        height: calc(900px - calc(0.4 * calc(1536px - 100dvw)));
        max-height: 900px;
        max-width: 1900px;
    }

    /* Oh god. I'm commenting this more than a week since I wrote it. Ok. I'm setting the central yellow rect in my SVG to 75% of the height of the SVG, minus 60px to account for the header */
    #masthead svg rect:nth-child(7){
        height: calc(75% - 60px)
    }

    /* This is the top brown rect behind the central yellow rect */
    #masthead svg rect:nth-child(4){
        height: calc(53% - 60px)
    }

    /* This is a div for masthead text and the product image on the masthead. I fixed the aspect ratio so it doesn't get wonky. It's positioned absolutely so it can be moved over the center of the masthead. It scales with the viewport, but not indefinitely. It's a column flexbox containing the text and image. */
    #mastheadContent {
        position: absolute;
        aspect-ratio: 510 / 475;
        width: 50%;
        max-width: 800px;
        height: auto;
        top: 65px;
        display:flex;
        flex-direction: column;
        align-items: center;
    }

    /* Img tag inside mastheadContent. Proportionally sized. */
    #mastheadImage {
        width: 60%;
        min-width: calc(60% + calc(0.07 * calc(1536px - 100dvw)));
        height: auto;

    }

    /* H1 gets a nice custom font, some color, some shadow, and transition for when it gets hovered */
    h1 {
        font-family: "Black Signature", serif;
        font-size: 3.5rem;
        color: #672035;
        margin: 5%;
        text-shadow: -1.5px -0.5px 1px rgb(21, 21, 21, 0.4);
        transition: color 0.25s ease-in-out;
    }

    /* Color change on hover for h1 */
    h1:hover {
        color: #9d3a58;
    }

    /* contentBox is the second half of index's main. It contains all the page copy, and the call to action. It works mostly the same as the masthead does, just with different height and width settings. */
    #contentBox{
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        width: 100dvw;
        height: calc(1000px + calc(0.4 * calc(1536px - 100dvw)));
        max-width: 1900px;
        position: relative;
        background-color: whitesmoke;
    }

    /* These are tweaks to make my overly-complex SVGs scale to the page. The first two rules deal with invisible white ellipses that are covering pars of cream rects in order to create a funky shape. For reference, the next few rules center on the "Call to action" */

    /* I KNOW THEY TRIGGER AN ERROR IN W3C VALIDATOR! BUT THEY'RE REAL PROPERTIES! THEY WORK! IF I REMOVE THEM IT BREAKS! */
    #contentBox svg:nth-of-type(1) ellipse:nth-of-type(1), #contentBox svg:nth-of-type(1) ellipse:nth-of-type(2){
        cy: calc(98% - 20% - 200px);
    }
    #contentBox svg:nth-of-type(1) ellipse:nth-of-type(3), #contentBox svg:nth-of-type(1) ellipse:nth-of-type(4){
        cy: calc(calc(98% - 20%) + 20%);
    }

    /* The next two rules deal with the cream rects */
    #contentBox svg:nth-of-type(1) rect:nth-of-type(1), #contentBox svg:nth-of-type(1) rect:nth-of-type(2){
        height: calc(20% + 200px);
        y: calc(98% - 20% - 200px);
    }

    #contentBox svg:nth-of-type(1) rect:nth-of-type(3){
        y: calc(98% - 10% - 200px);
    }
    
    
    /* This svg is the rounded brown rectangles behing the images in my call to action */
    #contentBox svg:nth-of-type(2) {
        position: absolute;
        height: calc(1000px + calc(0.4 * calc(1536px - 100dvw)));
    }

    /* This adjusts the rects in that SVG */
    #contentBox svg:nth-of-type(2) rect {
        y: calc(98% - 10% - 130px);
    }

    /* This div makes up the interactable part of my call to action. It contains two anchor tags. Each anchor contains an image and a text span. It's positioned over the funky rects I just styled. */
    #actionButtons {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        top: calc(98% - 10% - 160px);
    }

    /* The anchor tags in #actionButtons have a fluid width. They are fixed-height horizontal flex boxes with content justified to the center and a small margin on each side. */
    #actionButtons a{
        width: 20%;
        display: flex;
        justify-content: center;
        margin: 0 5%;
        align-items: center;
        height: 115px;
    }

    /* Each of the anchors has one side with more margin */
    #actionButtons a:nth-of-type(1){
        margin-right: 15.9%
    }
    #actionButtons a:nth-of-type(2){
        margin-left: 15.9%
    }

    /* The span in each anchor is styled with a google font. Absolutely positioned. Large font. 4 text shadows to simulate an outline. */
    #actionButtons a span{
        margin-bottom: 20px;
        width: 22dvw;
        position: absolute;
        text-align: center;
        font-size: 3.75rem;
        font-family: "Caramel", serif ;
        color: #B2818F;
        text-shadow: 
            -1px -1px 0 #E6C8C0,
            1px -1px 0 #E6C8C0,
            -1px 1px 0 #E6C8C0,
            1px 1px 0 #E6C8C0

    }

    /* The img tags in my call to action are scaled */ 
    #actionButtons img{
        width: calc(75% - calc(0.06 * calc(100dvw - 1080px)));
        height: auto;
    }

    /* This section contains all the copy for my index. Column flexbox, as wide as its containing div, center aligned items and text. */
    section.indexCopy {
        position: absolute;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Individual p tags in this section are given differing widths due to the oval shape they're inside */
    section.indexCopy p:nth-of-type(1){
        width: 80%;
    }

    section.indexCopy p:nth-of-type(2){
        width: 90%;
    }

    section.indexCopy p:nth-of-type(3){
        width: 75%;
    }

    section.indexCopy p:nth-of-type(4){
        width: 60%;
    }

    /* The heading for this section has a google font, large size, a small top and bottom margin, a dark color, and a bit of a shadow. The main headers on each other page also match this. */
    h2, main.productPage h1, main.aboutPage h1, main.contactPage h1 {
        font-size: 3.75rem;
        font-family: "Caramel", serif ;
        margin: 0.7em 0 0.5em 0;
        color: #3F1B00;
        text-shadow: -1.5px -0.5px 1px rgb(21, 21, 21, 0.4);
    }

    /* paragraph text gets a size adjustment, line height adjustment, a bit of a shadow for texture, and a dark (but not black) color. This should be the same across all pages. */
    p {
        color: #3F1B00;
        font-size:1.6rem;
        line-height: 1.6em;
        text-shadow: -1.5px -0.5px 1px rgb(21, 21, 21, 0.4);
        /* I just did this last minute because it was on the rubric. I can admit though, it lets the letters breath just a fraction more, which is nice */
        letter-spacing: 0.02em;
    }

/* Now I'm moving on to the product page */

    /* SVG at the back of the page. It's as wide as the page. */
    main.productPage svg{
        max-width: 100%;
    }

    /* This is here because it specifically affects SVGs on the product page, but it also affects images in the masthead, images in the product section, and the links in my call to action. It gives them a brighter, saturated look when hovered. */
    main.productPage svg.productBackground ellipse:nth-of-type(even), #masthead img, section.productContent img, #actionButtons a{
        filter: saturate(100%) brightness(1);
        transition: filter 0.3s ease-in-out;
    }

    main.productPage svg.productBackground ellipse:nth-of-type(even):hover, #masthead img:hover, section.productContent img:hover, #actionButtons a:hover{
        filter: saturate(125%) brightness(1.2);
    }

    /* product section. I could probably group the sections actually, but because of how I'm organizing my CSS by page, I'll let there be a little redundancy in the rules. This one scales width-wise with the page, but only up to a point. It's a column flexbox. */
    section.productContent {
        position: absolute;
        width: 65%;
        top: 5%;
        max-width: 1000px;
        max-height: calc(1500px - 10%);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Needed to keep this particular h1 from clipping with the background */
    main.productPage h1{
        width: 80%;
    }

    /* Simulated order form. Static height, scalable width, horizontal flexbox. It's horizontal because the left side will actually be a figure, while the right will contain the fieldset. Does a figure belong in a form, perhaps not. But at least I don't have to add a meaningless div. */
    form {
        height: 400px;
        margin-top: 5%;
        width: 90%;
        display: flex;
        justify-content: space-between;
    }

    /* This figure serves as the product image viewer. It's a column flex, since it will contain an image and also a figcaption (which will have other images to select from and view) */
    figure {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 50%;
        max-width: 550px;
        min-width: 150px;
        height: 100%;
        align-items: center;
        border-radius: 10% 10% 10% 10%;
        border: 5px solid #3F1B00;
        margin: 2% 1% 2% 1%;
        background-color: whitesmoke; 
    }

    /* This is the main image on display in my image viewer. I gave it a bit of a background effect, which intensifies on hover. */
    section form figure>img#galleryView {
        width: 70%;
        margin: auto 0%;
        justify-self: center;
        max-height: 90%;
        filter: saturate(100%) brightness(1) drop-shadow(0 0 0.7rem rgba(44, 44, 44, 0.486));
    }

    figure>img#galleryView:hover{
        filter: saturate(125%) brightness(1.2) drop-shadow(0 0 1rem rgba(44, 44, 44, 0.669));
    }

    /* This contains other images that the user can click to see them as the main image in the figure. */
    figcaption {
        padding: 5px 0%;
        display: flex;
        height: 10%;
        width: 100%;
        justify-content: space-evenly;
        border-top: 5px solid #3F1B00;
    }

    /* Images in the figcaption. Small. Pointer when you mouseover, to indicate clickability. */
    figure figcaption>img {
        width: 10%;
        height: auto;
        cursor: pointer;
        min-width: 25px
    }

    /* This is where all my form inputs are. It has some padding to keep content away from the edges. It scales, but only somewhat. */
    fieldset {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10% 10% 10% 10%;
        border: 5px solid #3F1B00;
        margin: 2% 1% 2% 1%; 
        padding: 0px;
        width: 50%;
        height: 100%;
        max-width: 550px;
        min-width: 150px;
        position: relative;
    }

    /* I put the legend inside the fieldset. Thought it looked better that way. */
    legend {
        position: absolute;
        left: 10px;
        top: 10px;
        font-weight: bold;
    }

    /* Light size and margin tweaks for my input elements to space them out */
    input[type=number] {
        width: 3em;
    }

    input[type=text] {
        width: 90%;
    }

    fieldset>label {
        margin-top: 15px;
    }

    fieldset>label:nth-of-type(1) {
        margin-top: 40px;
    }

    fieldset>button {
        margin-top: 30px;
    }

    /* A ul of product features. Only 80% of the width of the section. */
    section.productContent ul {
        width: 80%;
    }

    /* Small amount of styling for the lis of the ul. */
    section.productContent li {
        margin: 1em 0;
        text-align: left;
        font-size: 1.3rem;
    }

/* Here's my about page styling */

    /* SVG "background". This one is super funky. */
    main.aboutPage svg{
        max-width: 100%;
    }

    /* Main section of content. This section gets a background and a border to help it stand out from a rather loud background. */
    section.aboutContent {
        position: absolute;
        width: 65%;
        top: 5%;
        max-width: 1000px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-color: #FFF6DE;
        border-radius: 50px;
        border: 3px solid #3F1B00
    }

    /* The p tags of this section span 90% of the section */
    section.aboutContent p{
        width: 90%;
    }

    /* This section has an image. It's free to scale with the section, within a range.*/
    section.aboutContent img {
        width: 50%;
        min-width: 150px;
        max-width: 300px;
    }

    /* I learned paths, they were fun! Anyway I blurred and slightly darkened these ones for an almost oil-paint look. */
    path {
        filter:blur(0.04rem) brightness(0.9);
    }

/* Contact page */

    /* I was pretty out of gas by this point, so this page is short and sweet. No SVG, just a section. */
    section.contactContent {
        position: absolute;
        width: 80%;
        top: 10%;
        max-width: 1000px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #contactPanels {
        height: 90%;
        display: flex;
        justify-content: space-around;
        text-align: left;
        align-items: center;
    }

    #contactPanels form, #contactPanels>div {
        width: 45%;
    }

    #contactPanels form fieldset {
        width: 100%
    }

    textarea {
        margin-top: 20px;
        width: 85%;
        height: 200px;
    }

/* This section deals with the footer */

    /* The footer is an absolutely positioned, horizontal flexbox at the bottom of the page. It has a fixed height. */
    footer {
        position: absolute;
        display:flex;
        justify-content: center;
        width: 100%;
        overflow-y: hidden; 
        bottom: -100px;
        z-index: 3;
        font-size: 1.5rem;
    }

    /* I've divided the content of the footer into two divs on either side of an image. Each side takes up 30% of screen width, is a column flexbox, and has a slight margin to keep it from hugging the very bottom of the page. */
    #leftFooter, #rightFooter {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        text-align: center;
        margin-bottom: 20px;
    }

    /* The footer image is scaled, but not too big. Aspect ratio is preserved. */
    footer img {
        width:50%;
        max-width: 450px;
        height: auto;
    }

    /* My main page footer has no background to avoid covering part of the page design. The other pages can have a white background on the footer though. */
    footer.productPage, footer.aboutPage, footer.contactPage {
        background-color: whitesmoke;
    }


/* Media Queries */

    /* In general these are just tweaks to height, width, font-size, and sometimes position, based on the size of the screen. */
    @media (min-width: 1500px){
        #contentBox svg:nth-of-type(2), #contentBox svg:nth-of-type(3), #contentBox{ height: 1000px; }
        #masthead, #masthead svg { height: 900px; }
        section.productContent, main.productPage {height: 1500px;}
        #actionButtons img {min-width: 185px;}
        #leftFooter, #rightFooter {max-width: 500px;}
    }

    @media (max-width: 1100px){
        #actionButtons a span{
            font-size: 3.4rem;
        }
        footer {
            bottom: -80px
        }
    }

    @media (max-width: 1010px){
        #actionButtons a span{
            font-size: 3.2rem;
        }
    }

    @media (max-width: 900px){
        #actionButtons a span{
            font-size: 3rem;
            width: 25dvw;
        }
        #actionButtons a{
            width: 25%;
        }
        
        #actionButtons a:nth-of-type(1){
            margin-right: 15%
        }
        #actionButtons a:nth-of-type(2){
            margin-left: 15%
        }
        #contentBox svg:nth-of-type(2) rect:nth-of-type(1)  {
            x: 10%;
            width: 25%;
        }
        #contentBox svg:nth-of-type(2) rect:nth-of-type(2) {
            x: 65%;
            width: 25%;
        }
        footer {
            bottom: -60px
        }
        
    }

    @media (max-width: 805px){
        html {
            font-size: 11.5pt;
        }
        header {
            height: 65px;
        }
        #navMenu menu{
            top: 58.5px;
        }
        header svg:nth-of-type(2), header h3, #navMenu{
            top: 6.5px;
        }
    }

    /* This particular break point also turns my product page form from a horizontal to a column flexbox, so things don't get TOO squished. */
    @media (max-width: 750px){
        #actionButtons a span{
            width: 30dvw;
        }
        #actionButtons a:nth-of-type(1){
            margin-right: 12%
        }
        #actionButtons a:nth-of-type(2){
            margin-left: 12%
        }
        #contentBox svg:nth-of-type(2) rect:nth-of-type(1)  {
            x: 10%;
            width: 32%;
        }
        #contentBox svg:nth-of-type(2) rect:nth-of-type(2) {
            x: 58%;
            width: 32%;
        }
        footer {
            bottom: -40px
        }
        form {
            flex-direction: column;
            align-items: center;
            justify-content: start;
            height: 600px;
        }
        figure, fieldset {
            height: 48%;
        }
        #contactPanels {
            flex-direction: column;
            text-align: center;
        }
        main.contactPage {
            height: calc(1500px + calc(0.3 * calc(1000px - 100dvw)));
        }
        #contactPanels form, #contactPanels>div {
            width: 95%;
            height: auto;
        }
    }

    @media (max-width: 590px){
        html {
            font-size: 11pt;
        }
        #actionButtons a span{
            font-size: 2.7rem;
        }
        footer {
            font-size: 1.3rem
        }
    }

    @media (max-width: 520px){
        #actionButtons a span{
            width: 35dvw;
        }
        html {
            font-size: 10.5pt;
        }
        footer {
            bottom: -20px;
            font-size: 1.2rem;
        }
    }

    @media (max-width: 420px){
        html {
            font-size: 10pt;
        }
        header, #navMenu{
            height: 60px;
        }
        header svg:nth-of-type(2), #navMenu{
            top: 6px;
            height: 46px
        }
        #navMenu menu{
            top: 54px;
        }
        #navMenu svg {
            height: 46px
        }
        
        header h3 {
            top: 5px;
        }
        footer {
            bottom: -10px;
            font-size: 1.1rem;
        }
    }

    @media (max-width: 360px){
        #actionButtons a span{
            width: 45dvw;
        }
        html {
            font-size: 9.5pt;
        }
    }

    @media (max-width: 310px){
        #actionButtons a span{
            width: 50dvw;
        }
        html {
            font-size: 8.5pt;
        }
    }

    @media (max-height: 550px){
        header {
            height: 60px;
        }
        header svg:nth-of-type(2), #navMenu{
            top: 6px;
            height: 46px
        }
        #navMenu svg {
            height: 46px
        }
        header h3 {
            top: 5px;
        }
    }

    @media (max-height: 450px){
        header h3 {
            top: 4px;
        }
        main {
            margin-top: -30px;
        }
    }

    @media (max-height: 400px){
        header {
            height: 50px;
        }
        header svg:nth-of-type(2), #navMenu{
            top: 4px;
            height: 40px;
        }
        #navMenu svg, #navMenu{
            width: 40px;
            height: 40px;
        }
        #navMenu menu{
            top: 46px;
        }
        header h3 {
            top: -2px;
        }
        main {
            margin-top: -30px;
        }
    }

/* Link state styling */
    a:link {
        color: #874759;
    }
    a:visited {
        color: #672035;
    }
    a:hover {
        color: #B2818F;
    }
    a:active {
        color: #FFF6DE;
    }