/* Style sheet created by: Libby Bitner, 9/17/2025 */

/* Style for body specifies a background color */
body {
	background-color: #1D1D1C;
}

/* Style to create a fluid image */
img{
    max-width: 100%;
}

/* Styles for Mobile Layout*/

/* Style for container centers the page and sets the element width */
#container {
	width: 100%;
    margin-left: auto;
	margin-right: auto;
}

/* Style for header specifies top and bottom margin, background color, rounded corners, and center aligns content */
header {
	text-align: center;
}

/* Style for nav specifies text properties */
nav {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25em;
    font-weight: bold;
    text-align: center;
    margin-top: -1.5em;
}

/* Style specifies padding and margins for unordered list */
nav ul{
    padding: 0;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Style for nav li specifies the background color, rounded corners, removes bullet style, and applies margins and padding for list items within the navigation */
nav li {
    background-color: #9D9D93;
    border-radius: 2em;
    list-style-type: none;
    margin: 0.3em;
    padding: 0.4em;
}

/* Style changes navigation ink text color to white and removes the underline */
nav li a {
    color: #FFFFFF;
    text-decoration: none;
}

/* Style displays the mobile class */
.mobile {
    display: inline;
}

/* Style hides the desktop class */
.desktop {
    display: none;
}

/* Style for main element specifies a block display, rounded corners, margins, padding, and border properties */		
main {
    display: block;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1em;
    margin-top: 0.5em;
    padding: 1em;
    border-radius: 2em 0 2em 0;
    background-color: #FFFFFF;
    opacity: 0.85;
}

/* Style for anchor element within the main element */
main a {
    background-color: #9D9D93;
    border-radius: 1em;
    color: #FFFFFF;
    font-weight: bold;
    padding: 0.5em;
    text-decoration: none;
}

/* Style for footer specifies font size, text alignment, and top margins */
footer {
	font-size: .70em;
    text-align: center;
    margin-top: 2em;
    color: #FFFFFF;
}

/* Style for an anchor elements withing the footer element */
footer a {
    color: #FFFFFF;
    text-decoration: none;
}

/* Style hides the tablet class */
.tablet {
    display: none;
}

/* Style rule specifies to not display the equip class */
.equip {
    display: none;
}

/* Style for aside element */
aside {
    font-style: italic;
}

/* Style rule for input, select and text areas form elements*/
input, select, textarea {
    display: block;
    margin-bottom: 1em;
}

/* Style rule for label element */
label {
    display: block;
}

/* Style rule for unordered list within a form */
form ul {
    list-style-type: none;
}

/* Style rule for chkbx class */
.chkbx {
    display: inline;
}

/* Media Query for tablet biewport targets screen size with a minimun width of 660 */

@media only screen and (min-width: 660px) {
    
    /* Style specifies a horzontal display for navigation links */
    nav li {
        display: inline;
        float: left;
        margin-left: 1%;
        margin-right: 1%;
        padding-left: 0;
        padding-right: 0;
        width: 18%;
        white-space: nowrap;
        border-radius: 0;
        background-color: transparent;
    }
    
    /* Style specifies clear and top margin properties for the main element*/
    main {
        clear: left;
        margin-top: -0.3em;
        border-radius: 0;
        overflow: auto;
    }
    
    /* Style specifies to hide the mobile class */
    .mobile {
        display: none;
    }
    
    /* Style specifies to display the dekstop class*/
    .desktop {
        display: inline;
    }
    
    /* Style specifies a display, float, and padding for the eqip class */
    .equip {
        display: inline;
        float: left;
        margin-right: 1.5em;
    }
    
    /* Style specifies a display, list-style-position, and bottom margin for the items class */
    .items {
        display: block;
        list-style-position: inside;
    }
    
    /* Style specifies to diplsay tablet class */
    .tablet {
        display: block;
        margin-top: -3em;
        margin-bottom: -1em;
    }
    
    /* Style specifies a fotn weight and to margin for description list terms */
    dt {
        font-weight: bold; 
        margin-top: 0.7em;
    }
    
    /* Style for the h1 element */
    h1 {
        text-align: center;
    }
    
    /* Style for images within the figure element */
    figure img {
        background-color: #1D1D1C;
        display: inline;
        height: 8em;
        width: 28%;
        margin: 1%;
        padding: 1%;
    }
    
    /* Style for anchor elements within the figure element */
    figure a {
        background-color: transparent;
        padding: 0;
        text-decoration: none;
    }
    
    /* Style specifies bottom padding for the sefction element */
    section {
        padding-bottom: 3em;
    }
    
    /* Style for h1 element within the section element */
    section h1 {
        text-align: left;
    }
    
    section a {
        background-color: transparent;
        color: #1D1D1C;
        font-weight: normal;
        padding: 0;
        text-decoration: underline;
    }
    
    /* Style for contact class */
    .contact {
        background-color: transparent;
        color: #1D1D1C;
        padding: 0;
        text-decoration: underline;
    }
    
    /* Style for article element */
    article {
        background-color: #C1D9CA;
        float: left;
        margin: 0.5%;
        padding: 0.5%;
        text-align: center;
        width: 31%;
    }
    
    /* Style for image element contained within the main article element */
    main article  img {
        border: solid 0.1em #1D1D1C;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Style for paragraph element contained within the main article element */
    main article p {
        color: #000000;
        margin-top: 2%;
        padding: 1%;
        text-align: left;
    }
    
    /* Style for unordered list element contained within the main article element */
    main article ul {
        text-align: left;
    }
    
    /* Style for aside element */
    aside {
        background-color: #FFFFFF;
        border-radius: 0 5em 5em 5em;
        box-shadow: 1em 1em 1em #4D4F4D;
        padding: 1.5em;
        margin: 1em;
    }
    
    /* Style for table element*/
    table {
        border: 0.1em solid #000000;
        border-collapse: collapse;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    
    /* Style specifies border anf padding for th and td elements */
    th, td {
        border: 0.1em solid #000000;
        padding: 1em;
    }
    
    /* Style for th element */
    th {
        background-color: #1D1D1C;
        color: #FFFFFF
    }
    
    /* Style for caption element */
    caption {
        font-size: 1.5em;
        font-weight: bold;
        padding-bottom: 0.5em;
    }
    
    /* Style rule label element */
    label {
        float: left;
        padding-right: 0.5em;
        text-align: right;
        width: 15em;
    }
    
    /* Style rule for btn class */
    .btn {
        margin-left: 12em;
    }
    
}

/* Media query for desktop beiwport target screens with a minimum width of 830px */
@media only screen and (min-width: 830px) {
    
    /* Style specifies a width for container */
    #container {
        background-color: #1D1D1C;
    }
    
    /* Style to left align the header */
    header {
        text-align: left;
    }
    
    /* Style for nav specifies a float, margin and width */
    nav {
        float: right;
        margin-top: -7em;
        margin-right: 3em;
        margin-bottom: 0;
        width: 100%;
    }
  
    /* Style specifies margin and padding for the unordered list within the nav */
    nav ul {
        margin: 0;
        padding-left: 0.50%;
        padding-right: 0.50%;
    }
    
    /* Style for navigation list items specifies a border radius, border, margin, width, and padding */
    nav li {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        width: 20%;
    }
    
    /* Style for navigation links specifies display and padding */
    nav li a {
        display: inline-block;
        padding: 0.7em;
        text-shadow: 0.2em 0.1em #3D3D35;
    }
    
    /* Style rules for pseudo-classes */
    nav li a:link {
        color: #FFFFFF;
    }
    
    nav li a:visited {
        color: #CCCCFF;
    }
    
    nav li a:hover {
        color: #9D9D93;
        font-style: italic;
    }
    
    /* Style specifies border, shadow, margin, and padding for main element */
    main {
        background-color: #1D1D1C; 
    }
    
    /* Style specifies left and right padding for paragraph elements within the main element */
    main p {
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    
    /* Style applies color to h1 element */
    h1 {
        color: #FFFFFF;
    }
    
    /* Style applies height an dopaccity to images within figure element */
    figure img {
        height: 15em;
        opacity: 0.7;
    }
    
    /* Style removes transparency on hover */
    figure img:hover {
        opacity: 1;
    }
    
    /* Style specifies a bottom margin for items class */
    .items {
        margin-bottom: 6em;
    }
    
    /* Style specifies a background color, margin, and padding for footer element */
    footer {
        background-color: #2A2A2A;
        margin-top: -0.2em;
        padding: 2em;
    }
    
    /* Style specifies color and left margin for the section element */
    section {
        color: #FFFFFF;
        margin-left: 1em;
        margin-bottom: 5em;
    }
    
    /* Style for anchor element within the section element */
    section a {
        color: #FFFFFF;
    }
    
    /* Style for paragraph element within the section element */
    section p {
        margin-left: 0;
    }
      
    /* Style for main h2 element */
    main h2 {
        color: #FFFFFF;
    }
    
    /* Style for contact class */
    .contact {
        color: #FFFFFF;
    }
    
    /* Style for main article h2 element */
    main article h2 {
        color: #000000;
    }
    
    /* Style for table element */
    table {
        background-color: #FFFFFF;
        width: 85%;
    }
    
    /* Style for caption element */
    caption {
        color: #FFFFFF;
    }
    
    /* Style rule for form element */
    form {
        background-color: #FFFFFF;
        padding: 1em; 
    }
    
    /* Style rule for paragraph with form element */
    form p {
        color: #000000;
    }
}