/*
    Author Name: Mariam Simpara
    File Name:style.css
    Date:11/15/23
*/

/*hero*/

.hero{
    background-image:linear-gadient(rgba(255, 255, 255, 0.5)), 
    rgba(255, 255,255, 0.5),url(../images/baby-hawk.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:right;
}

/*Welcome*/
.Welcome{
    position:absolute;
    top:40%;
}

#Display-1{
    font-size:4em;
}

.bg-brown{
    background-color:#f6eee4;
}

/*CSS Reset*/

body, header, nav, main,footer, img, h1, h3 aside, figure, figcaption, section, audio, video{
    margin:0;
    padding:0;
    border:0;
}

/* Style rules for body and images */

 body{
    background-color:#f6eee4;
 }

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

/*style rules for skip navigation link*/

.skip{
    position:absolute;
    left:-999px;
}

.skip:focus{
    color:#f6eee4;
    background-color:#fff;
    text-decoration:none;
    padding:0.5%;
    top:auto;
    left:auto;
    right:1px;
    z-index:1;
}

/* style rules for navigation area */

nav{ 
    background:#f6eee4;
}

nav ul{
    margin:0;
    text-align:center;
}

nav il{
    display:block;
    font-size:1.5em;
    font-family:Geneva, Arial,sans-serif;
    font-weight:bold;
    color:#f6eee4;
    border-top:solid; 
    width: 0.5px;
}

nav li a{
      display: block;
      color:#f6eee4;
      padding:0.5 2em;
      text-decoration:none;
}
    
  /* Style rules for main content */
  
  main{ 
      padding:2%;
      font-family:verdana, Arial, sans-serif;
  }
  
  main p { 
      font-size:1.25em;
  }
  
  main h3 {
      padding:2%;
  }
    
    main ul {
        list-style-type:square;
    }
    
.link{
    color:#4d3319;
    font-style:italic;
    font-weight:bold;
    text-decoration:none;
}

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

#contact {
    text-align:center;
}

/* style rules for footer content */

footer {
    text-align:center;
    font-size:0.85em;
    color:#f3e6d8;
    text-decoration:none;
}

footer a {
    text-align:center;
    font-size:0.85em;
    color:#2a1f14;
    color: #f6eee4;
     padding:1% 0;
}

/*style rules for images within the social class*/

img{
    display:inline;
    padding:4%;
}

/*style rules for mobile viewport*/


/*style rules to show mobile class and hide tab-desk class*/


.mobile .mobile-tablet{
    display:block;
}

.tab-desk .desktop{
    display:none;
}

#nav-links {
    display:none;
}

/*style rules for header area*/

.mobile h1, .mobile h3{
    padding:2%;
    text-align:center
}

nav li a{
    display:block;
    
}

/*style rules for main content*/

main{
    padding:2%;
    font-size:1.25em;
}

main h3{
    padding:2%;
}

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

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

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

/*The element with id="contact"*/

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

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

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

.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;
    width:400px;
    margin:2% auto;
}

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

/*The element with id="info"*/

#info{
    margin-left: 10% ;
}

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

.tel-link a{
    color:#f6eee4;
    text-decoration:none;
    font-size:1.5em;
    display:block;
}

#questions p {
    cursor:pointer;
}

#answer {
    text-align:center;
    font-weight:bold;
    width:80%;
    margin:0 auto;
}

/* Style rules for form elements */

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;
}

/*tablet viewport:style rule for form element*/
form{
    width:70%;
    display:none;
}

/*Tablet Viewport:Style rules for footer area*/

footer{
    overflow:auto;
}

copyright{
    float:left;
    width:65%;
}

social{
    float:right;
    width:25%;
}

/* Media Query for Table Viewport*/
@media screen and (min-width:620px), print {
    .grid{
      display: grid;
  grid-template-columns:auto auto;
  grid-template-columns:1/ span 2;
  grid-gap: 10px;
}
}

.mobile-nav {
    display:none;
}

nav ul{
    margin:0;
    text-align:center;
}

/*Table Viewport:Show tab-desk class, hide mobile class*/

.tab-desk {
    display:block;
}

.mobile{
    display:none;
}

/*Table Viewport: Style rules for nav area*/

nav li{
    display:inline-block;
    font-size:1.25em;
}

/*Media Query for Desktop Viewport*/

@media only 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 a li:hover {
    color: #2a1f14;
    background-color: #f6eee4;
    opacity: 0.5;
}
 

/*Desktop Viewport:style rules for main content*/

#info ul {
    margin: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 rules 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:#f6eee4;
}
 .grid {
    grid-template-columns: auto auto auto auto;
  }
  aside {
    grid-column: 1 / span 4;
    font-size:  3em;
  }

/*Media Query for print*/
    
    @media print {
    	body{
        	background-color: White;
        	color:black;
        }
    }