<style>

/*EXISTINGS TAGS*/

body {
width : 1000px;
margin : auto;
background-color : #B08D57;
}   

img {
height : auto;
}

figure {
display : inline-flex;
width : 320px;
margin : 5px;
}

nav {
font-family : 'Helvetica, sans-serif';
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;
border-bottom : 2px solid #CD7F32;
}
nav a.selected {
color : #8b5722;
border-bottom : 2px solid #CD7F32;
}

nav a {
display : inline;
}
nav li {
display : inline;
padding : 0 18px;
}
a:link {
color : #436925;
}
a:visited {
color : #7a5506;
}
a:hover {
color : #CD7F32;
}
a:active {
color : #e6b88a;
border-bottom : 2px solid #436925
}
abbr:hover {
color : #436925;
text-decoration : dotted;
}
h1 {
text-align : center;
color : #B08D57;
font-family : 'cursive';
text-decoration : double;
}
h2 {
color : #B08D57;
text-align : center;
}
h3 {
font-family : monaco;
font-size : 30px;
}                  
h5 {
font-family : Helvetica, sans-serif;
font-size : 20px;
}
p {
font-size : 16px;
font-family : Verdana, Geneva;
}
main {
order : 2;
flex : 4;
padding-left : 20px;
}
img {
max-width : 100%;
height : auto;
display : block;
}
aside {
order : 1;
flex : 0.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;
}       
ol {
list-style-type : decimal;
padding-left : 20px;
}

blockquote {
    margin-left: 20px;
    margin-right: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-left: 10px solid #B08D57 ;
    text-align: justify;
}

blockquote::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #436925;
}

label.required::after {
content : "*";
color : #ff0000;
font-weight : bold;
}
th {
background-color : #fffefe;
text-align : center;
color : #383636;
font-weight : bold;
font-family : Helvetica, sans-serif;
padding : 10px;
border-bottom : 2px solid #8b5722;
}
table {
width : 550px;
border : #B08D57 solid 8px;
border-collapse : collapse;
margin : 0 auto;
}
td {
padding : 10px;
border-bottom : 1px solid #B08D57;
font-family : Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
}
td:first-child, th:first-child {
border-right : 2px solid #B08D57;
}
input, textarea {
font-family : Helvetica, arial, sans-serif;
font-size : 14px;
padding : 10px;
border : #B08D57 solid 2px;
background-color : #fdfdfd;
outline : none;
}
textarea {
width : 350px;
height : 100px;
border : #B08D57 solid 2px;
background-color : #fdfdfd;
resize : vertical;
outline : none;
}

/*ID's*/

#header {
background-color : #ffffffd2;
width : auto;
color : white;
padding : 0;
text-align : center;
font-family : 'Helvetica, sans-serif';
}
#fancy-list {
list-style-type : none;
text-align : center;
}
#fancy-list li {
display : flex;
justify-content : left;
font-size : larger;
}
#fancy-list li img {
margin-right : 10px;
}
#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;
}   
#footer {
background-color : #ffffffd2;
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';
}


/*CLASSES*/

.background-img {
background-color : #fadadd;
}

.gradient-background {
    background: radial-gradient(circle, 
      rgba(250, 218, 221, 0.8), 
      rgba(241, 241, 240, 0.8), 
      rgba(253, 253, 253, 0.8), 
      rgba(250, 218, 221, 0.8), 
      rgba(139, 87, 34, 0.8), 
      rgba(250, 218, 221, 0.8)  
    );
    min-height: 100vh; 
    padding: 50px; 
  }
  
.logo-img {
background-image : url("images/background_printedlogo.jpg");
}
.styled-hr {
border : none;
height : 2px;
background-color : #B08D57;
}
.newsletter-hr {
    width: 80%;
    border: 3px solid #436925; 
    border-radius: 6px;
    margin: 20px auto;
}
.highlighted-heading {
background-color : #ffffff;
color : #8b5722;
padding : 10px;
border-radius : 5px;
text-align : center;
}
.bold-headers {
font-size : 1.5em;
font-weight : bold;
color : #B08D57;
text-align : center;
list-style-type : none;
}
ul.circle-list {
list-style-type : circle;
}
.center-text {
text-align : center;
}
.highlight {
color : #B08D57;
}
.standard-text {
font-size : 16px;
}
.bold-text {
font-weight : bold;
}
.large-text {
font-size : 20px;
}
.heart {
fill : #B08D57;
width : 10px;
height : 10px;
}
.font1 {
color : #B08D57;
text-align : center;
font-family : sans-serif;
}
.resume-container {
display : flex;
flex-wrap : wrap;
gap : 20px;
padding : 20px;
padding-left : 30px;
border : #B08D57 solid 8px;
}
.resume-column {
flex : 1 1 45%;
padding : 20px;
padding-left : 40px;
border : #ccc solid 1px;
background-color : #f9f9f9;
}
.flex-container {
display : flex;
flex-wrap : wrap;
gap : 20px;
border : #B08D57 solid 5px;
padding : 10px;
padding-right : 20px;
padding-left : 30px;
padding-bottom : 30px;
}
.flex-item {
flex : 1 1 45%;
padding : 10px;
border : #ccc solid 1px;
background-color : #f1f1f1;
text-align : center;
}
@media (max-width: 600px) 

.flex-item {
flex : 1 1 100%;
}
.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 : #B08D57 solid 7px;
}
.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;
}
.transcript-container {
display : flex;
align-items : center;
flex-wrap : wrap;
justify-content : space-between;
padding : 20px;
}
.transcript-column {
flex : 1;
align-items : center;
min-width : 200px;
margin : 15px;
box-sizing : border-box;
}
@media (max-width: 768px) 
.container {
flex-direction : column;
}
.px-item {
font-size : 25px;
}
.pt-item {
font-size : 22pt;
}
.em-item {
font-size : 1.5em;
}
.percent-item {
font-size : 150%;
}
.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;
}      
.portfolio-column-left {
text-align : center;
flex : 1 1 45%;
flex-wrap : wrap;
padding : 10px;
padding-left : 10px;
border : #ccc solid 1px;
background-color : #fffefe;
}
@media (max-width: 600px) 
.portfolio-column-left {
}
.portfolio-column-left figcaption {
text-align : center;
}
.portfolio-column-right {
text-align : center;
flex : 1 1 45%;
flex-wrap : wrap;
padding : 10px;
padding-left : 10px;
border : #ccc solid 1px;
background-color : #fffefe;
}
.portfolio-column-right {
flex : 1 1 100%;
}
.portfolio-column-right figcaption {
text-align : center;
border : none;
}
.box {
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
text-align : center;
padding : 30px;   
border:#436925 solid 3px; 
}
.infobar {
    background-color: #77726c; /* Dark background */
    color: #fff; /* Light text */
    padding: 10px;
    text-align: center;
    margin: 15px 0;
    overflow: hidden; /* Ensure the text stays within the infobar */
    position: relative;
}
.custom-bullets-gold {
    list-style-image: url('images/gold_note_icon.png');
    padding-left: 30px;
}

/* CSS for Box Shadow */
.box-shadow {
box-shadow: 10px 10px 8px #faf8f8; /* Horizontal offset, Vertical offset, Blur radius, Shadow color */
}

.submit-button {
background-color : #B08D57;
color : #fff;
border : none;
padding : 10px 20px;
font-size : 16px;
cursor : pointer;
display : inline-flex;
align-items : center;
}
.submit-button img {
margin-right : 10px;
}
</style>                                                                                                                                                                                                                         