/*
Name: Angel Tercero-Villatoro
File: /home/anglwebh/public_html/classes/1510/lesson10/css/styles.css
Date: 3/26/2025

    /*CSS Reset*/
    body, header, nav, main, footer, img, h1, h3, ul, aside, figure, figcaption, video {
        margin:0;
        padding:0;
        border:0;
    }

    /*Style rule for body and image*/
    body {
        background-color: #f6eee4;
    }

    img, video {
        max-width:100%;
        display:block;
    }

    /*Style rules for mobile viewport*/


    /*Style rules to show mobile class and hide tab-desk class*/
    .mobile, .mobile-tablet {
        display: block;
    }

    .tab-desk, .desktop, #nav-links {
        display: none;
    }

    /*Style rules for header area*/
    .mobile h1, .mobile h3{
        padding:2%;
        text-align:center;
    }

    .mobile h1 {
        font-family: 'Emblema One', sans-serif;
        margin: 2% 0 0 3%;
    }

    .mobile h3{
        font-family:'Lora', sans-serif;
    }

    /*Style rules for navigation area*/
    nav {
        background-color:#2a1f24;
    }

    .mobile-nav a {
        color: #fff;
        text-align: center;
        font-size: 2em;
        text-decoration: none;
        padding: 3%;
        display: block;
    }

    .mobile-nav a.nav-icon {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        color: #f6eee4;
        padding: 2%;
    }

    .nav-icon div {
        height: 40px;
        width: 40px;
        color: #2a1f14;
    }

    /*Style rules for main content*/
    main {
        padding:2%;
        font-family:Verdana, Arial, sans-serif;
    }

    main p {
        font-size:1.25em;
    }

    main h3 {
        padding-top:2%;
    }

    main ul {
        list-style-type:square;
    }

    .link {
        color:#4d3319;
        text-decoration:none;
        font-weight:bold;
        font-style:italic;
    }

    .action {
        font-size:1.75em;
        font-weight:bold;
        text-align:center;
    }

    .round {
        border-radius:6px;
    }

    aside {
        text-align:center;
        font-size:1.5em;
        font-weight:bold;
        text-shadow:4px 4px 10px #c5a687;
    }

    figure {
        border:4px solid #2a1f14;
        box-shadow:6px 6px 10px #c5a687;
        max-width:400px;
        margin:2% auto;
    }

    figcaption {
        padding:2%;
        border-top:4px solid #2a1f14;
    }

    #info ul {
        margin-left:10%;
    }

    #contact, #form h2 {
        text-align: center;
    }

    .tele-link {
        background-color:#2a1f14;
        padding:2%;
        width: 80%;
        margin:0 auto;
    }

    .tele-link a{
        color:#f6eee4;
        text-decoration:none;
        font-weight:bold;
    }
    
    #questions p {
        cursor: pointer;
    }
    
    #answer {
        text-align: center;
        font-weight: bold;
        width: 80%;
        margin: 0 auto;
    }
    
    #answer h2 {
        display: none;
    }
    
    /*Style rules for form elements*/
    
    /*Media Viewport*/
    fieldset, input, textarea {
        margin-bottom: 2%;
    }
    
    fieldset legend {
        font-weight: bold;
        font-size: 1.25em;
    }

    label {
        display: block;
        padding-top: 2%;
    }

    form #submit {
        margin: 0 auto;
        display: block;
        padding: 2%;
        background-color: #78593a;
        color: #f6eee4;
        font-size: 1.25em;
        border-radius: 10px;
    }

    /*Style rules for footer content*/
    footer {
        text-align:center;
        font-size:0.85em;
        padding:1% 0 1% 0;
    }

    footer a {
        color:#f6eee4;
        text-decoration:none;
    }

    /*Media Query for Tablet Viewport*/
    @media screen and (min-width: 620px), print {

	/*Tablet Viewport: Show tab-desk class, hide mobile class*/
	.tab-desk {
	    display:block;
	}
	
	.mobile, .mobile-nav {
	    display:none;
	}
	
	/*Tablet Viewport: Style rules for nav area*/
	nav ul {
	    list-style-type: none; 
	    text-align: center; 
	}
	
	nav li {
	    border-top:none;
	    display:inline-block;
	    font-size:1.25em;
	    font-family: 'Geneva', Arial, sans-serif;
	    font-weight: bold;
	    
	}
	nav li a {
	    padding:0.5em;
	    display: block;
	    color: #f6eee4;
	    text-decoration: none;
	}

    .grid {
        display: grid;
        columns: auto auto;
        grid-gap: 10px;
    }

    aside {
        grid-column: 1 / span 2;
    }

    /*Tablet Viewport: Style rule for form element*/
    form{
        width: 70%;
        margin: 0 auto;
    }

}

    /*Media Query for Desktop Viewport*/
    @media screen and (min-width:1000px), print {
    
    /*Desktop Viewport: Show desktop class, hide mobile-tablet class */
    .desktop {
        display: block;
    }
    
    .mobile-tablet {
        display: none;
    }

    /*Desktop Viewport: Style rules for nav area*/
    nav li {
        font-size:1.5em;
    }
    
    nav li a {
        padding:0.5em 1.5em;
        
    }
    nav li a:hover {
        color: #2a1f14;
        background-color: #f6eee4;
        opacity: 0.5;
    }
    
    /*Desktop Viewport: Style rules for main area*/
    #info ul {
        margin-left: 5%;
    }
    
    .grid {
        grid-template-columns: auto auto auto;
        grid-gap: 30px;
    }
    
    aside {
        grid-column: 1 / span 3;
        font-size: 2em;
    }

    /* Style rules for table*/
    table {
        border: 1px solid #2a1f14;
        border-collapse: collapse;
        margin: 0 auto;
    }

    caption {
        font-size: 1.5em;
        font-weight: bold;
        padding: 1%;
    }

    th, td {
        border: 1px solid #2a1f14;
        padding: 1%;
    }

    th {
        background-color: #2a1f14;
        color: #fff;
        font-size: 1.15em;
    }

    tr:nth-child(odd) {
    background-color: #deccba;
    }

    /*Desktop Viewport: Style rule for form elements*/
    form {
        width: auto;
    }

    .form-grid {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 20px;
    }

    .btn {
        grid-column: 1 / span 2;
    }

}
    /*Media Query for Large Desktop Viewports*/
    @media screen and (min-width:1921px), print{
        body {
            background:linear-gradient(#f6eee4, #78593a);
        }

        #wrapper {
            width: 1920px;
            margin: 0 auto;
        }

        main {
            background-color:#f6eee4;
        }
    
        .grid {
            grid-template-columns: auto auto auto auto;
        }
    
        aside {
            grid-column: 1 / spam 4;
            font-size: 3em;
        }
    
    }
    /*Media Query for Print*/
    @media print{
    
        body{
            background-color:white;
            font:black;
        }
        
    }