<style>
/*BODY OF SITE*/

  body { 
    width: 1000px;
    margin:auto;
    background-color: #B08D57;
   }
   img {
    max width: 100%;
    height: auto;
    
   }

   figure {
    display: inline-flex;
    width: 320px;
    margin: 5px;
   }
   


   .background-img { /*I want to add olive to this somehow*/
    background-color: #fadadd; 
   }

   .logo-img {
    background-image: url('images/background_printedlogo.jpg');
   }
   

   .styled-hr {
     border: none;
     height: 2px;
     background-color: #B08D57;
   }
/*HIGHLIGHTED HEADING*/
.highlighted-heading {
    background-color: #ffffff;
    color: #8b5722;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

   nav {
    width: flex; /*added for mobile*/
    font-family: 'Helvetica, sans-serif'; /* Clean font naviagtion*/
    text-align: center;
    margin: 20px;
   }

   nav a { 
    
    width: 30%;
    color: #B08D57;
    text-decoration: none;
    padding: 1px;
    padding-right: 5px;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    font-size: 22px;
   }

   nav a:hover {
    color: #CD7F32; /* Darker bronze gold on hover */
    border-bottom: 2px solid #CD7F32; /* Stylish underline effect on hover */
   }
 
   nav a.selected {
    color: #8b5722; /* darker bronze than hover effect */
    border-bottom: 2px solid #CD7F32; /* Same underlined effect as hover */
}

/* FOR MOBILE DEVICES */
@media only screen and (min-width: 1000px) {
    nav a {
        display: inline;
    }

    nav li {
        display: inline;
        padding: 0 18px;
    }
}

/*LINK COLORS */
a:link {
    color: #436925;
}
a:visited {
    color: #7a5506;
}
a:hover {
    color: #CD7F32; 
}
a:active {
    color: #e6b88a; 
    border-bottom: 2px solid #436925; /
}
/*end link colors*/


/*HOVER EFFECT*/
abbr:hover {
    color: #436925; /* Change text color on hover */
    text-decoration:dotted; /* Add underline on hover */
}


   #header { /*behind logo*/
    background-color: #ffffffd2;
    width:auto;
    color: white;
    padding: 0px;
    text-align: center;
    font-family: 'Helvetica, sans-serif';
   }
/*FONT TYPES*/


.bold-headers {  /* used for list items in containers that need to be like a h2 */
    font-size: 1.5em;
    font-weight: bold;
    color: #B08D57;
    text-align: center; 
    list-style-type: none;

}

   h1 { 
    text-align: center; 
    color:#B08D57; 
    font-family:'cursive';
    text-decoration: double;
   }

   h5 {
    font-family:Helvetica, sans-serif;
    font-size: 20px;
   }

   h2 { 
    color: #B08D57;
    text-align: center; 
   }
   
   ul.circle-list { /*services list*/
    list-style-type: circle;
   }

   h3 { 
    font-family: monaco; 
    font-size: 30px;
   }

   p {
    font-size: 16px;
    font-family: Verdana, Geneva;
   }

   .center-text {
    text-align:center;
   }

    .highlight { 
    color: #B08D57;
   }

   .monaco-font {
    font-family: 'monaco'; 'Arial Narrow Bold';
   }

    .standard-text {
        font-size: 16px;
        flex-wrap: 10px;
    }

    .bold-text {
        font-weight: bold;
    }

    .large-text {
        font-size: 20px
    }

   
    .heart {
        fill: #B08D57;
        width: 10px;
        height: 10px;
    }

    main { /* This is everything within main element*/
        order: 2;
        flex: 4;
        padding-left: 20px;
      }
      
      .font1 { 
        color: #B08D57;
        text-align: center; 
        font-family: sans-serif;
       }

/* RESUME COLUMNS */

.resume-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    gap: 20px; /* Space between items */
    padding: 20px;
    padding-left: 30px;
    border: 8px solid #B08D57; /* Border around the container */
}

.resume-column {
    flex: 1 1 45%; /* Grow and shrink with a minimum width of 45% */
    padding: 20px;
    padding-left: 40px;
    border: 1px solid #ccc; /* Border around each column */
    background-color: #f9f9f9;
}


img {max-width:100%; height:auto, display:block;}



/*LINKS FOR PRIOR COMPANIES*/

.flex-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    gap: 20px; /* Space between items */
    border: 5px solid #B08D57; /* Border around the container */
    padding: 10px; padding-right: 20px; padding-left: 30px; padding-bottom: 30px;
}

.flex-item {
    flex: 1 1 45%; /* Grow and shrink with a minimum width of 45% */
    padding: 10px;
    border: 1px solid #ccc; /* Border around each item */
    background-color: #f1f1f1;
    text-align: center;
}
@media (max-width: 600px) {
    .flex-item {
        flex: 1 1 100%; /* Full width on small screens */
    }
}
     .container {
        display: flex;
        flex-direction: row;
        padding: 10px;
        padding-left: 30px;
     } 

     .small-container {
        display: flex;
        flex-direction: row;
        padding: 20px;
        padding-left: 30px;
        padding-bottom: 10px;
        border: 7px solid #B08D57;
     } 

     /* Container used for transcript page*/
     .box-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center; 
        padding: 20px; 
    }
    .box-container-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left; 
        padding: 20px; 
    }

     /* Container used for other two columns in transcript page */
.transcript-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between; 
    padding: 20px; 
}

/* Column styling */
.transcript-column {
    flex: 1;
    align-items: center;
    min-width: 200px;
    margin: 15px;
    box-sizing: border-box; 
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        flex-direction: column; 
    }
}/*end transcript page */



      aside {
        order: 1;
        flex: .5;
        padding: 10px;
        padding-right: 20px;
        background-color: #ffffffd2;
        border-right: 5px solid #B08D57;
        border-left: 5px solid #B08D57;
      }
      
      aside h3 {
        font-size: 18px;
        margin-top: 0;
      }
      
      aside ul {
        list-style-type: none;
        padding: 5px;
      }
      
      aside ul li {
        margin-bottom: 10px;
      }

      #footer {
        width: 100%;
        background-color: #ffffffd2;
        color: white;
        padding: 5px;
        text-align: center;
        font-family: 'Verdana, Geneva';
      }
         #bottom-footer {
            position:fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #ffffff;
            color: white;
            padding: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            text-align: center;
            font-family: 'Verdana, Geneva';
          }
      /* CUSTOM LISTS */

      /* assignment request to use different sizes*/
      ol {
        list-style-type: upper-roman;
        padding-left: 20px; /* Indent the list */
    }
    .px-item {
        font-size: 25px; /* Using px */
    }
    .pt-item {
        font-size: 22pt; /* Using pt */
    }
    .em-item {
        font-size: 1.5em; /* Using em */
    }
    .percent-item {
        font-size: 150%; /* Using % */
    }


/*Fancy List with Gold Arrows*/ 
      #fancy-list {
        list-style-type: none; /* no default bullet points */
        text-align:center; 
        
    }
    
    #fancy-list li {
        display: flex;
        align-items: justify;
        justify-content: left;
        font-size: larger
    }
    
    #fancy-list li img {
        margin-right: 10px; /* Space between arrows and text */
    }

/*Simpler list but with font play */
    #font-list {
    text-align: center; 
    font-family:'Arial Narrow', Arial, sans-serif, Helvetica, sans-serif;
    margin-bottom: 30px;
    list-style-type: circle
    }

    #font-list li {
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: x-large
    
    }


/*Container for Scrolling Images */


.scrolling-container {
    margin-top: auto;
    overflow: hidden;
    width: 100%;
    background-color: #B08D57;
    padding-right: 30px;
}

.scrolling-images {
    display: flex;
    animation: scroll-left 20s linear infinite;
}

.scrolling-images img {
    width: 300px; 
    height: 500px;
    margin-right: 10px; /* Space between images */
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/*SECTION FOR PORTFOLIO PAGE*/



 
.portfolio-column-left {
    text-align: center;
    display: left;
    flex: 1 1 45%; 
    flex-wrap: wrap;
    padding: 10px;
    padding-left: 10px;
    padding right: 10px;
    border: 1px solid #ccc;
    background-color: #fffefe;
    float: inline;
      
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    .portfolio-column-left {
        flex: 1 1 100%; /* Full width on smaller screens */
    }
}

.portfolio-column-left figcaption {
    text-align: center;
    border: none;
}
.portfolio-column-right {
    text-align: center;
    display: right;
    flex: 1 1 45%; 
    flex-wrap: wrap;
    padding: 10px;
    padding-left: 10px;
    padding right: 10px;
    border: 1px solid #ccc;
    background-color: #fffefe;
    float: inline;
}
/* Media query for mobile devices */
@media (max-width: 600px) {
    .portfolio-column-right {
        flex: 1 1 100%; /* Full width on smaller screens */
    }
}
.portfolio-column-right figcaption {
    text-align: center;
    border: none;
}




/*CONTACT FORM STYLING*/
/* Style for table headers */

/* Style for the required field indicator */
label.required::after {
    content: "*"; /* Add asterisk after label */
    color: #ff0000; /* Red for asterisk */
    font-weight: bold; /* Bold asterisk */
}

th {
    background-color: #fffefe; /* Light grey background */
    text-align: center;
    color: #383636; /* Dark grey text */
    font-weight: bold; /* Bold text */
    font-family: Helvetica, sans-serif;
    padding: 10px; /* Padding for space around text */
    border-bottom: 2px solid #8b5722; /* Light grey bottom border */
}

/* Optional: Style for the table itself */
table {
    width: 550px; 
    border: 8px solid #B08D57; /* Corrected border property */
    border-collapse: collapse; /* Remove space between cells */
    margin: 0 auto; /* Center table on page */
}

/* Style for table data cells */
td {
    padding: 10px; /* Padding for space around text */
    border-bottom: 1px solid #B08D57; /* Bottom border */
    font-family: Helvetica, sans-serif;
    font-size: 14px; /* Corrected font size */
    font-weight: bold; /* Added font weight */
}

/* Add vertical line between first and second columns */
td:first-child, th:first-child {
    border-right: 2px solid #B08D57; /* Light grey right border */
}

/* Style for input fields */
input, textarea {
    font-family: Helvetica, arial, sans-serif; /* Change font for input fields */
    font-size: 14px; /* Adjust font size if needed */
    padding: 10px; /* Padding for space around text */
    border: 2px solid #B08D57; /* Border color */
    background-color: #fdfdfd; /* Light gold background */
    outline: none; /* Remove default outline */
}

/* Style for the comment textarea */
textarea {
    width: 350px; /* Full width of the cell */
    height: 100px; /* Set height */
    border: 2px solid #B08D57; /* Border color */
    background-color: #fdfdfd; /* Light gold background */
    resize: vertical; /* Allow vertical resizing */
    outline: none; /* Remove default outline */
}

/* Style for the submit button */
.submit-button {
    background-color: #B08D57; /* Gold background */
    color: #fff; /* White text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Padding for space around text */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    display: inline-flex; /* Align image and text */
    align-items: center; /* Center items vertically */
}

.submit-button img {
    margin-right: 10px; /* Space between image and text */
}


</style>