body{
    background-color: white
}

form{
    padding: 1rem;
}

fieldset{
    border: 1px solid #444;
    margin: 0 0.5rem 2rem 0.5rem;
    padding: 1rem;
}

label, input{
    display: block;
    width: 100%;
}

input[type="text"]{
    margin: 0.125rem 0 2rem 0;
}

textarea{
    width: 100%;
    margin: 0.125rem 0 1.2rem 0;
}

.button{
    width: 5rem;
    color: white;
    border-radius: 0.5rem;
}

.align-right{
    display: flex;
    justify-content: end;
}

input[type="submit"] {
margin: 0 0.55rem;
background-color: green;
}

input[type="reset"] {
    background-color: red;
    }

    .button:hover{

        filter: opacity(0.5);
    }




/* START BODY/CREATORCONTROVERSY */


body.creator {

    background-color: #f38284;

}

/* END BODY/CREATORCONTROVERSY */




/* START NAVIGATION */


    button#menu-button {
        height: 2rem;
        width: 2rem;
        display: block;
        border: none;
        background-image: url(../img/hamburger.svg); 
        background-repeat: no-repeat;
        background-size: cover;
    }
    #menu {
        display: none;
    }
      /* Add this code to the selector created in Step 3.1 above */
    
      #menu.show-nav {
        position: absolute;  /* position the menu */
        display: block;
        z-index: 100;
        top: 0;
        right: 0.6rem;
        
        background-color: rgb(255, 255, 237);  /* style the dropdown menu */
        padding: 1rem;
        width: 95%;
        margin: 0 auto;
        border: 1px solid #444;
    }  
    #menu-button {
        position: absolute;
        right: 17.75rem;
        top: 6rem;
        padding: 0;
        background-color: transparent;
        z-index: 10;
    }
    #menu-button:hover {
        cursor: pointer;
        }
        .hide-text {
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            padding: 0;
        }
        .icon a img {
            width: 2rem;
            height: auto;
        }      
        li.icon {
            width: 100%;
            height: 1.8rem;
            margin: 1.3rem 0;  /* space apart for easier finger tapping */
          }
          li.icon a {
            display: flex;  /* place logo and span side by side */
            justify-content: start; /* align left */
            align-items: center; /* vertically align */
            
            font-family: bodoni 72, arial, helvetica, sans-serif; /* style span text as desired */
            font-weight: bold;
            text-decoration: none;  /* remove underline */
            font-size: 1.5rem;
            margin: 0; 
            height: 1.5rem;
            width: 100%;
        }
/* END NAVIGATION */









        html { font-size: 100%; margin: 0; padding: 0;
            text-align: center;
            }
            
body {
margin: 0;
padding: 0;
background-image: url(..);
background-size: 305%;
background-repeat: no-repeat;
background-position-x: 38%;
}
            
header {
    background-color: #cf1312;
    display: flex;  /* set elements side-by-side */
    padding: 1rem;
    }
            
            #logo {
                height: 3.5rem;
                width: auto;
                flex: 1;  
            }
            
            header div {flex: 3;}  /* 3 times more space for div than logo */
            
            nav {
                width: 100%;  /* fits in 320px mobile */
                margin: 0 auto;  /* centered */
                height: 60px;
                padding: 0;
                background-color: rgba(255,255,255,0.5);
            }
            
            nav ul.navigation {
                list-style-type: none;
                position: relative;  /* absolute positioning calculated from top/left of this box */
                margin: 0 auto;
                padding: 0;
                width: 300px;
            }
            
        .icon {
                height: 50px;
                width: 50px;
                margin: 0;
                padding: 0;
                top: 1px;
            }
            
            .icon svg {
                display: block;
                width: 50px;
                height: auto;
                fill: #009fff;
            }
            
            .index { 
                left: 5px;
            }
            
            .content-farms {
                left: 65px;
            }
            
            .interface-changes {
                left: 125px;
            }
            
            .creator-controversy {
                left: 185px;
                top: 0.325rem;
            }

            .about-designer {
                left: 185px;
                top: 0.325rem;
                
            }
            .faq {
                left: 185px;
                top: 0.325rem;
                
            }
            .contact {
                left: 185px;
                top: 0.325rem;
                
            }
            
            .support span {
                top: -0.6rem;
                left: -0.25rem;
            }
            
            .faq {
                left: 245px;
            }
            
            
            a span {
                display: block;
                width: 100%;
                text-align: center;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 1rem;
                position: relative;
                top: -0.3rem;
            }
            
            
            
            
            
            /* =========== LoVeHA Rule for Text Links =========== */
            
            a {
                position: relative;
            }
            
            a:link {
                color: #009fff;
                text-decoration: none;
            }
            
            a:visited {color: #444;}
            
            a:hover {text-decoration: underline;}
            
            a:active {color: magenta;}
            
            
            
            
            /* =========== LoVeHA Rule for SVG Links =========== */
            
            a:link svg {
                fill: #C7D500;
            }
            
            a:visited svg {fill: #18B300;}
            
            
            @keyframes wiggle {
                0% { transform: rotate(0deg); }
                40% { transform: rotate(4deg); }
                95% { transform: rotate(-4deg); }
                100% { transform: rotate(0deg); }
            }
            
            a:hover svg  {
                animation: wiggle 0.25s infinite;
            }
            
            a:active svg {fill: rgb(255 0 0);}
            
            
            li.currentPage::before {
                position: absolute;
                content: " ";
                top: -15px;
                left: 0px;
                display: block;
                z-index: 1;
                height: 1rem;
                width: 1rem;
                background-size: contain;
                background-repeat: no-repeat;
                background-image: url('data:image/svg+xml,<svg height="800" viewBox="88 100 300 350" width="800" xmlns="http://www.w3.org/2000/svg"><path d="M406.3,233.3c-13.1-14.6-40.1-45.2-56.8-75.8-1.5-1.5-21.1-33.5-43-57.6v-18.9c0-40.1-32.8-72.9-72.9-72.9h-72.9c-31.3,0-64.1,26.2-71.4,57.6-1.5,8-4.4,14.6-7.3,17.5-7.3,8.7-16,29.1-16,56.1v116.6c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3v7.3c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3v58.3c0,20.4,16,36.4,36.4,36.4s36.4-16,37.2-36.4v-165.4c16,27.7,53.2,41.5,81.6,31.3,4.4-1.5,8-3.6,10.2-5.1,10.9-7.3,10.2-16.8,10.2-19.7.7-4.4,0-5.1-10.2-16.8ZM396.8,257.4c-2.9,1.5-5.1,2.9-7.3,3.6-18.9,6.6-50.3-2.2-64.1-26.2l-13.1-19.7c-.3-.6-.7-1.1-1.1-1.5l-6.2-12.4c-1.5-2.9-5.8-4.4-9.5-2.9-2.9,1.5-4.4,5.8-2.9,9.5l6.6,13.1v188c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-204c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v116.6c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-109.3c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v80.2c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-87.4c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v51c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-116.6c0-13.6,2.4-24.5,5.4-32.5.4-.5.8-1.1,1.1-1.8,2.9-9.5,11.7-11.7,27.7-16l4.4-.7c3.6-1.5,6.6-5.8,5.1-9.5-1.5-3.6-5.1-5.8-9.5-5.1l-3.6.7c-3.3.9-6.6,1.8-9.7,2.7.8-2.7,1.6-5.5,2.5-8.5,5.1-24.8,32.1-45.9,56.8-45.9h72.9c32.1,0,58.3,26.2,58.3,58.3v6.6c-1.4-1-2.9-2-4.4-3-4.4-3.6-8-5.8-12.4-9.5-2.9-2.9-7.3-2.2-10.2.7-2.9,2.9-2.2,7.3.7,10.2,4.4,4.4,8.7,7.3,13.1,10.2,4.7,3.4,9.4,6.7,14.1,10.6.2.4.3.7.5,1,21.9,22.6,43,56.8,43,56.8,17.5,31.3,45.2,62.7,58.3,78,2.2,2.9,5.1,6.6,6.6,8,0,2.2-.7,4.4-4.4,6.6Z"/></svg>');
            }
            
            
            li.currentPage1::before {
                position: absolute;
                content: " ";
                top: -4px;
                left: -10px;
                display: block;
                z-index: 1;
                height: 1rem;
                width: 1rem;
                background-size: contain;
                background-repeat: no-repeat;
                background-image: url('data:image/svg+xml,<svg height="800" viewBox="88 100 300 350" width="800" xmlns="http://www.w3.org/2000/svg"><path d="M406.3,233.3c-13.1-14.6-40.1-45.2-56.8-75.8-1.5-1.5-21.1-33.5-43-57.6v-18.9c0-40.1-32.8-72.9-72.9-72.9h-72.9c-31.3,0-64.1,26.2-71.4,57.6-1.5,8-4.4,14.6-7.3,17.5-7.3,8.7-16,29.1-16,56.1v116.6c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3v7.3c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3v58.3c0,20.4,16,36.4,36.4,36.4s36.4-16,37.2-36.4v-165.4c16,27.7,53.2,41.5,81.6,31.3,4.4-1.5,8-3.6,10.2-5.1,10.9-7.3,10.2-16.8,10.2-19.7.7-4.4,0-5.1-10.2-16.8ZM396.8,257.4c-2.9,1.5-5.1,2.9-7.3,3.6-18.9,6.6-50.3-2.2-64.1-26.2l-13.1-19.7c-.3-.6-.7-1.1-1.1-1.5l-6.2-12.4c-1.5-2.9-5.8-4.4-9.5-2.9-2.9,1.5-4.4,5.8-2.9,9.5l6.6,13.1v188c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-204c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v116.6c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-109.3c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v80.2c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-87.4c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v51c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-116.6c0-13.6,2.4-24.5,5.4-32.5.4-.5.8-1.1,1.1-1.8,2.9-9.5,11.7-11.7,27.7-16l4.4-.7c3.6-1.5,6.6-5.8,5.1-9.5-1.5-3.6-5.1-5.8-9.5-5.1l-3.6.7c-3.3.9-6.6,1.8-9.7,2.7.8-2.7,1.6-5.5,2.5-8.5,5.1-24.8,32.1-45.9,56.8-45.9h72.9c32.1,0,58.3,26.2,58.3,58.3v6.6c-1.4-1-2.9-2-4.4-3-4.4-3.6-8-5.8-12.4-9.5-2.9-2.9-7.3-2.2-10.2.7-2.9,2.9-2.2,7.3.7,10.2,4.4,4.4,8.7,7.3,13.1,10.2,4.7,3.4,9.4,6.7,14.1,10.6.2.4.3.7.5,1,21.9,22.6,43,56.8,43,56.8,17.5,31.3,45.2,62.7,58.3,78,2.2,2.9,5.1,6.6,6.6,8,0,2.2-.7,4.4-4.4,6.6Z"/></svg>');
            }
            
            h1 {
                color: #cf1312;
                text-shadow: 2px 2px 10px #444;
                font-size: 2rem;
                font-family: "bodoni-urw", serif;
                font-weight: 700;
                font-style: normal;
                        
                }

            div {
            font-size: 1.5rem;
            color: white;
            margin-top: 0.25rem;
            font-weight: bold;

            }

header { margin: 0%;

       }

header div { font-family: 'Boreal', 'Impact', 'Arial Narrow Bold', sans-serif;
}


/* START MAIN */


main p {
	color: black;
	font-family: 'Bodoni URW', 'Boreal';
	margin: 16px;
	text-align: left;
	font-size: 16px;
}


/* END MAIN */


legend {
color: black;
}
label {
color: black;
text-align: left;
}


/* START FOOTER */


footer li {
font-size: 10rem
}

footer p {
color:#18B300
}

/* END FOOTER */

@media only screen and (min-width: 64em) {
    button#menu-button {
        display: none;
    }

    #menu {
        display: flex;
    }
}