/* had to add ../ to get to images folder */
    .bio-page {
  background-image: url('../images/mtsthelens2.jpg');
  height: 100%; background-size: cover;
}

    .left-align {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 4.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
      font-weight: 700;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: left; 
      margin-top: 3em;
}
   
    h3 {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size:2.25rem;  /* font size converted to rem*/
      font-weight: 900;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
}
    /* moved purple button css from index.html to style.css but kept them in row due to page style */
    
    .red-btn {
      background-color: rgb(164, 2, 2); /* Purple background */
      border: none; /* Remove borders */
      color: white; /* White text */
      padding: 12px 30px; /* Some padding */
      cursor: pointer; /* Pointer/hand icon */
      font-size: 1.6rem; /* font size converted to rem*/
      border-radius: 8px; /* Rounded corners */
    }

    .red-btn:hover {
      background-color: rgb(232, 35, 65); /* darker on hover */
    }

  .btns-fixed-row {
  position: fixed;
  right: 16px;
  top: 7%;
  transform: none;  /* keep if you really want centering around that line */
  bottom: auto;                 /* <-- remove the bottom constraint */
  display: flex;
  flex-direction: row;
  gap: 15px;
  z-index: 9999;
  align-items: center;          /* prevent flex items from stretching in height */
}
.btns-fixed-row .btn { flex: 0 0 auto; }  /* ensure buttons keep natural size */

    p {
      font-family: "Times New Roman", serif;  /* font type */
      font-size: 1.5rem;  /* font size converted to rem*/
      font-weight: 900;    /* font weight */          
      color: rgb(5, 5, 5);   /* text color */
}
   /* I struggled with this for a little while but finally got it to match the image size in the html */
    .left-img {
      float: left;
      width: 280px;
      height: 380px;
      margin-right: 24px;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    /*from psuedo-selectors video and added class to links in paragraphs*/
    .links:link {
      color: rgb(164, 2, 2); /* unvisited link color */
    }

    .links:visited {
      color: rgb(100, 0, 0); /* visited link color */
    }

    .links:hover {
      color: rgb(232, 35, 65); /* mouse over link color */
    }

   .tatanka {
      font-family: "Times New Roman", serif;  /* font type */
      font-size: 5rem;  /* font size converted to rem*/
      font-weight: 900;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      border-left: 8px solid rgb(164, 2, 2);
      padding-left: 16px;
      margin: 24px 0;
    }

    .thank-you {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 2.25rem;  /* font size converted to rem*/
      font-weight: 900;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: center;
      margin-top: 40px;
    }

    dt {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 2.5rem;  /* font size converted to rem*/
      font-weight: 900;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      margin-top: 24px;
    }

    dd {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 1.875rem;  /* font size converted to rem*/
      font-weight: 900;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      margin-bottom: 24px;
    }

      /* from Eric's tables css */
    .table-page {background-image: url('../../images/therut25.jpg');
      height: 100%; background-size: cover; /* cannot get this zoom in on full page, works fine on half page*/
}


    .table-welcome {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
      font-weight: 700;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: center; /* changed from left to center */
      margin-top: 24px;
}

    .table-header {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 4.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
      font-weight: 700;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: center; /* changed from left to center */
      margin-top: 24px;
}

    /* table styles moved from tables.html to style.css */
    h2#plan {
      font-family: "DM Serif Display", "Times New Roman", serif; 
      font-size: 3rem;  /* font size converted to rem*/
      font-weight: 900;   /* font weight */
      color: rgb(164, 2, 2);
      text-align: center;
}
  
    
    table {
      font-family: "Times New Roman", serif;  /* font type */
      font-size: 1.5rem;  /* font size converted to rem*/
      font-weight: 900;    /* font weight */          
      color: rgb(252, 249, 249);   /* text color */
      border: 2px solid rgb(164, 2, 2);
      border-collapse: collapse;
      background-color: rgba(232, 35, 65, 0.65);
      width: 75%;
      margin: 20px auto;
      /*margin-bottom: 20px;*/
    }

    th, td {
      border: 2px solid rgb(164, 2, 2);
      padding: 12px;
      text-align: center;
      background-color: rgba(232, 35, 65, 0.55);
      color: white;
    }

   /* from Eric's lists css*/
  .list-page {background-image: url('../../images/hellcat.jpg');
  height: 100%; background-size: cover;
}  
 

 
#list-header { font-family: "Times New Roman", serif;  /* font type */
    font-size: 3rem;  /* font size */
    font-weight: 900;    /* font weight */          
    color: rgb(255, 253, 253);   /* text color */
    text-align: center; /* changed from left to center */
}
     

.list-par {font-family: "Times New Roman", serif;  /* font type */
    font-size: 2rem;  /* font size */
    font-weight: 900;    /* font weight*/          
    color: rgb(164, 2, 2);   /* textcolor */
}


  li {   font-family: "Times New Roman",  serif;  /* font type */
      list-style-type: none; 
      font-size: 2rem;  /* font size */
      font-weight: 900;    /* font  weight*/          
      color: rgb(164, 2, 2);   /*   textcolor */
}

  .purple-btn {
      background-color: darkred;   /* purple background */
      color: white;               /* white text */
      border: none;               /* no border */
      padding: 24px 48px;         /* space inside */
      font-size: 24px;            /* text size */
      border-radius: 8px;         /* rounded corners */
      cursor: pointer;            /* hand cursor on hover */
    }

    .purple-btn:hover {
      background-color: red; /* darker on hover */
    }

  .btns-fixed {
    position: fixed;
    right: 16px;           /* hug right edge */
    top: 50%;              /* vertical center line */
    transform: translateY(-50%);  /* center on that line */
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 9999;
}

  /* from Eric's links css */
  .links-page {
    background-image: url('../images/therims.jpg');
  height: 100%; background-size: cover; /* cannot get this zoom in on full page, works fine on half page*/
}

  .sites-title {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 4.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
      font-weight: 700;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: center; /* changed from left to center */
      margin-top: 24px;
}
  #links>li { /*targets only the li items in the links id*/
      list-style-type: none; /* remove default bullets */
      padding: 100;            /* remove default padding */
      width: 600px;          /* set a width for the list */ 
      margin: 40px auto;  /* center the list */ 
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 2.5rem;  /* font size converted to rem*/
      color: rgb(164, 2, 2);   /* text color */    
  }

  .link:link {
      color: rgb(232, 35, 65); /* unvisited link color */
}
  .link:visited {
      color: rgb(100, 0, 0); /* visited link color */
  }
  .link:hover {
      color: rgb(164, 2, 2); /* mouse over link color */
  }

  /*funny.css moved to style.css*/
  .funny-page {background-image: url('../../images/skoden.JPG');
  height: 100%; background-size: cover;
}

  .funny-title {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 4.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
      font-weight: 700;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: center; /* changed from left to center */
      margin-top: 24px;
}

 /* https://www.w3schools.com/css/css_positioning.asp*/
    .sacred-image {
      display: block; /* Makes the image a block-level element */
      margin-top: 80px;
      margin-left: auto; /* Automatically calculates left margin */
      margin-right: auto; /* Automatically calculates right margin */
      rotate: -10deg;
      border: 3px solid white;
    }

    .stoodis-image {
      display: block; /* Makes the image a block-level element */
      margin-top: 80px;
      margin-left: auto; /* Automatically calculates left margin */
      margin-right: auto; /* Automatically calculates right margin */
      rotate: 10deg;
      border: 3px solid white;
    }    

    .picabo-image {
      display: block;/* Makes the image a block-level element */      
      margin-left: auto; /* Automatically calculates left margin */
      margin-right: auto; /* Automatically calculates right margin */
      rotate: -10deg;
      border: 3px solid white;
    }
    
    .hotdog-image {
      display: block; /* Makes the image a block-level element */      
      margin-left: auto; /* Automatically calculates left margin */
      margin-right: auto; /* Automatically calculates right margin */
      rotate: 10deg;   
    }

    .p-funny {
      font-family: "Times New Roman", serif;  /* font type */
      font-size: 3rem;  /* font size */
      font-weight: 900;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: center;
    }

    /* from Eric's vote css */
    .vote-page {background-image: url('../images/light_restaurant_background.jpg');
    height: 100%; background-size: cover;
  }

    .vote-h1 {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 4.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
      font-weight: 700;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: center; /* changed from left to center */
      margin-top: 24px;
  }

    .vote-h2 {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size: 2.5rem;  /* font size converted to rem*/
      font-weight: 900;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: center;
      margin-top: 24px;
      
    }

  fieldset {
    width: 500px; /* Sets a fixed width */
    
    /* Set the border style, width, and color (GOOGLE)*/
    border: 2px solid rgb(164, 2, 2);
    border-radius: 10px; /* 10 pixels of rounding on all corners */

    /* Optional: Add some padding and margin for better aesthetics */
    padding: 15px;
    margin: 20px auto;
    }

    /* Styling for the legend within the fieldset */
    legend {
    color: rgb(164, 2, 2); /* Darker blue color for the legend text */
    font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
    font-size: 2rem;  /* font size converted to rem*/
    font-weight: bold;
    padding: 0 10px; /* Add horizontal padding to the legend */
    }

    /* textarea CSS W3schools: https://www.w3schools.com/css/tryit.asp?filename=trycss_form_textarea*/
    textarea {
    width: 100%;
    height: 150px;
    padding: 12px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
    }

    input[type="submit"] {
      background-color: rgb(164, 2, 2);   
      color: white;               /* white text */
      border: none;               /* no border */
      padding: 24px 48px;         /* space inside */
      font-size: 16px;            /* text size */
      border-radius: 8px;         /* rounded corners */
      cursor: pointer;            /* hand cursor on hover */
    }

    input[type="submit"]:hover {
      background-color: rgb(232, 35, 65); /* darker on hover */
    }
    /* .action wrapper from chatgpt to center submit button in fieldset*/
    .actions {
    display: flex;
    justify-content: center;   /* centers horizontally */
    gap: 0.75rem;              /* space between buttons if you add more */
    margin-top: 0.75rem;       /* a little breathing room above */
    }

  .iframe-h3 {
      font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
      font-size:2.25rem;  /* font size converted to rem*/
      font-weight: 900;    /* font weight */          
      color: rgb(164, 2, 2);   /* text color */
      text-align: center; 
  }

 iframe {
  display: block;            /* so margins work */
  margin: 0 auto;            /* centers horizontally */
  max-width: 752px;          /* optional cap */
  width: 100%;               /* responsive */
  aspect-ratio: 16 / 9;      /* keep 16:9 */
  height: auto;
  border: 0;
}
/*Eric's Exam Page CSS */
.midterm-page {
  background-image: url("../images/midterm_images/thriller4.jpg"); /* bigger source */
  background-size: cover;          /* fills the area */
  background-position: center;     /* keeps the subject centered */
  background-repeat: no-repeat;
  min-height: 100vh;               /* use full viewport height instead of 100% */
}

h1.midterm-title {
  font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
  font-size: 4.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
  font-weight: 700;    /* font weight */          
  color: rgb(232, 35, 65);   /* text color */
  text-align: center; /* changed from left to center */
  margin-top: 24px;
}

h2.eas {
 font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
  font-size: 3rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
  font-weight: 700;    /* font weight */          
  color: rgb(232, 35, 65);   /* text color */
  text-align: center; /* changed from left to center */
  margin-top: 24px; 
}

img.thumb {
  /*added important because CSS was not responding*/
  width: 80px !important;
  height: 80px !important;
}

h1.exam-list-header {
  font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
  font-size: 4.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
  font-weight: 700;    /* font weight */          
  color: rgb(232, 35, 65);   /* text color */
  text-align: center; /* changed from left to center */
}
.t-head {
  border: 2px solid rgb(164, 2, 2);
  padding: 12px;
  text-align: center;
  background-color: rgba(232, 35, 65, 0.85);
  color: white; 
}


.mid {
  border: 2px solid rgb(164, 2, 2);
  padding: 12px;
  text-align: center;
  background-color: rgba(232, 35, 65, 0.55);
  color: white;
}

footer {
  font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
  font-size: 1.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
  font-weight: 700;    /* font weight */          
  color: rgb(11, 11, 11);   /* text color */
  text-align: center;
  padding: 0.75rem 0;   /* optional */
}

ul.worst {
  width: max-content;   /* shrink-wrap to content */
  margin: 0 auto;       /* center horizontally */
  list-style-image: url("../images/midterm_images/candy-corn-bullet-48.webp"); /*made image with chatgpt*/
  padding-left: 1.75rem;  /* space for the image marker */
}

li.candy {
  font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
  font-size: 2.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
  font-weight: 700;    /* font weight */          
  color: rgb(232, 35, 65);   /* text color */
  text-align: center;
  padding: 0.5rem 0;   /* optional */
}

.review {
  font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
  font-size: 3rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
  font-weight: 700;    /* font weight */          
  color: rgb(164, 2, 2);   /* text color */
  text-align: center; /* changed from left to center */
  margin-bottom: 5px; 
}

.cigs {
 font-family: "DM Serif Display", "Times New Roman", serif;  /* font type */
  font-size: 1.5rem;  /* font size converted to rem https://www.w3schools.com/tags/ref_pxtoemconversion.asp*/
  font-weight: 700;    /* font weight */          
  color: rgb(164, 2, 2);   /* text color */
  text-align: center; /* changed from left to center */  
}