/* 
Author: Cameron Mandelbaum
Date: 9/14/2025
File Name: styles.css
*

/* CSS Reset */
html, body, div, span, applet, object, iframe, video, h1, h3 {
  margin: 0;
  padding: 0;
  border: 0;
}

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

/* Style rules for body and image */
body {
background-color: #e3eaf8;
}

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

  /* Style rules for skip navigation link */
 .skip {
    position: absolute;
    left: -999px;
}

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



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

nav ul {
  list-style-type: none; 
  margin: 0;            
  padding: 0;          
  text-align: center;   
}

nav li{
  display: inline-block;
  font-size: 1.5em;
  font-family: Geneva, Arial, sans-serif;
  font-weight: bold
}

nav li a{
  display: block; 
  color: #5F41A6; 
  padding: 0.5em 2em; 
  text-decoration: none;
}


/*Style rules for main content*/
main selector{
    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;
}

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

id selector{
     text-align: center;
}

/* Style rules for form elements */
@media only screen and (max-width: 600px) {
  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 selector{
    text-align: center;
    font-size: 0.85em;
    background-color: #2a1f14;
    color: #5F41A6;
    padding: 1% 0%;
}

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

.social img {
  display: inline-block;
  padding: 4%;
}




/*Media Query for Tablet Viewport*/
@media screen and (min-width: 620px), print {
    /* Desktop Viewport: Show desktop class, hide mobile-tablet class */
    .tab-desk, .desktop {
        display: block;
    }
    .mobile, .mobile-tablet {
        display: none;
    }
    /*Tablet Viewport: Style rules for nav area*/
    nav li {
        border-top: none;
        display: inline-block;
        font-size: 1.25em;
    }
    nav li a {
        padding: 0.5em;
    }
    .grid {
        display: grid;
        grid-gap: 10px;
        }
    aside {
        grid-column: 1 / span 2;
    }
}
  /* Tablet Viewport: Style rule for form element */
  form {
    width: 70%;
    margin: 0 auto;
  }
  /* Tablet Viewport: Style rules for footer area */
  footer {
  overflow: auto;
    }
    
  .copyright {
      float: left;
      width: 65%;
    }
    
   .social {
      float: right;
      width: 25%;
    }





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



/*Media Query for Large Desktop Viewports*/
@media screen and (min-width: 1920px){
    body {
        background: linear-gradient(to bottom, #f6eee4, #78593a);
    }
    #wrapper {
        width: 1920px;
        margin: 0 auto;
    }
    main {
        background-color: #f6eee4;
    }
    .grid {
        display: grid;
    }
    aside {
        grid-column: 1 / span 4;
        font-size: 3em;
    }


}


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


/*Media Query for Desktop Viewport*/
@media screen and (min-width: 1000px), print{
    /*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;
    }
    .grid {
        display: grid;
        gap: 30px;
    }
    aside {
        grid-column: 1 / span 3;
        font-size: 2em;
    }
     /* 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;
    }
}


/*Desktop Viewport: Style rules for main content*/
#info ul {
  margin-left: 5%;
}