:root{
    --light: #f2972e;
    --dark: #931420;
    --aside: #ffebc6;
    --dark_menu: black;
    --light_menu: white;

    --chenhangshiji_background: #F5F5F5;
    --chenhangshiji_primary: #FF5733;
    --chenhangshiji_accent: #33FF57;
    --chenhangshiji_text: #333333;

    --chenhangshiji_background_200: #EBEBEB;
    --chenhangshiji_background_300: #C2C2C2;
    --chenhangshiji_primary_200: #FF8A5F;
    --chenhangshiji_primary_300: #FFF3BF;
    --chenhangshiji_accent_200: #009700;
    --chenhangshiji_text_200: #5C5C5C;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    min-height: 100%; /* so the box stretches across the entire screen */
    /*background-image: linear-gradient(to bottom, white 0%, var(--light) 200%);*/
    background-image: linear-gradient(to bottom, white 0%, var(--chenhangshiji_primary) 200%);
}

body{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    /*font-size: calc(100% + 1vw) ;*/
    /*font-size: 100%;*/
    font-size: calc(90% + 0.1vw);
    /*font-size: calc(90% + 0.2vw);*/
    /*font-size: calc(90% + 0.3vw);*/
    line-height: 1.5;
    /*width: 90%;*/
    /*width: 90vw;*/
    /*width: calc(100% - 40px);*/
    /*width: min(90%, 1024px);*/
    /*width: min(90%, 1280px);*/
    width: 1024px;
    /*margin: 1em auto;*/
    margin: 0 auto;
    /*background-color: white;*/
    background-color: var(--chenhangshiji_background);
    /*border: 1px solid var(--dark);*/
    /*border: 1px solid var(--chenhangshiji_primary);*/
    border: 1px solid var(--chenhangshiji_accent);
    /*padding: 1em; !* adds space between border and content *!*/
    padding: 0; /* adds space between border and content */
    /*line-height: 1.5; !* unitless measure *!*/
}

h1, h2, h3, p, ul{
    padding: .25em 0;
    /*padding: .5em 0;*/
    /*color: black;*/
    color: var(--chenhangshiji_text);
}

h1{
    font-size: 150%;
}

h2{
    font-size: 135%;
}

h3{
    font-size: 120%;
}

li, p{
    /*font-size: 95%;*/
    font-size: 100%;
}

a, em{
    font-weight: bold;
    text-decoration: none;
    font-size: 100%;
}

a:link, a:visited{
    /*color: var(--dark);*/
    color: var(--chenhangshiji_text);
    /*color: var(--chenhangshiji_primary);*/
    /*color: black;*/
    /*color: green;*/
    font-size: 100%;
}

a:hover, a:focus{
    /*color: var(--light);*/
    color: var(--chenhangshiji_accent);
    text-decoration: none;
    /*font-size: 125%;*/
    font-size: 100%;
}

ul{
    line-height: 1.5;
    margin-left: 2em;
}

header{
    line-height: 1.2;
    text-align: center;
    /*border-bottom: 2px solid var(--light);*/
    border-bottom: 2px solid var(--chenhangshiji_accent);
    & img{
      display: block; /* show and format logo image */
      float: left;
      /*margin: .5em 2em .5em 0;*/
      margin: 0;
      /*width: 100%;*/
      /*max-width: 80px;*/
      /*width: min(100%, 80px);*/
      width: clamp(40px, 10%, 80px);
      /*width: clamp(40px, 10%, 80px);*/
      /*width: clamp(30px, 100%, 200px);*/
      /*border-radius: 10px 0 0 0; !* round upper-left corner *!*/
    }
    & h2{
      font-size: 225%;
      /*color: var(--light);*/
      color: var(--chenhangshiji_primary);
      padding: 0;
    }
    & h3{
      font-style: italic;
      /*color: var(--dark);*/
      color: var(--chenhangshiji_primary_200);
      padding-bottom: 1em;
    }
}

main{
    clear: left;
    display: flex;
    flex-direction: row; /* 2-column layout */
    padding-bottom: .5em;
    & a.date_passed{
      color: gray;
    }
}

section{
    padding: 1em 0;
    flex-basis: 65%;
    & img{
      width: min(100%, 600px);
    }
}

aside{
    flex-basis: 35%;
    background-color: var(--aside);
    height: fit-content;
    padding: 1em 1.5em;
    margin: 1em 0 1em 1.5em;
    border-radius: 25px;
    & h2{
      padding: 0;
    }
    & h3{
      color: var(--dark);
    }
}

footer{
    /*position: static;*/
    /*position: absolute;*/
    /*position: fixed;*/
    /*position: relative;*/
    /*position: sticky;*/
    /*bottom: 0;*/
    /*border-top: 2px solid var(--light);*/
    border-top: 2px solid var(--chenhangshiji_accent);
    padding-top: .5em;
    & p{
      /*font-size: 80%;*/
      font-size: 100%;
      text-align: right;
    }
}

.navbar{
    background-color: var(--dark_menu);
    & ul{
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    & a{
      display: block;
      padding: .25em 1em;
      margin: .25em;
      text-decoration: none;
      color: var(--light_menu);
    }
    & a:hover, a:focus{
      text-decoration: underline;
    }
    & a.current{
      border: 2px solid;
      border-radius: 10px;
      text-decoration: none;
    }
}

.menu{
    z-index: 1; /* to make sure it displays on top of container */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /*justify-content: space-between;*/
    /*justify-content: space-around;*/
    /*justify-content: flex-start;*/
    /*justify-content: center;*/
    /*justify-content: flex-end;*/
    align-items: stretch;
    /*align-items: flex-start;*/
    /*align-items: flex-end;*/
    /*align-items: center;*/
    /*align-items: baseline;*/
}

.menu li:has(.submenu){
    position: relative;
    & small::after{
      content: "\25bc"; /* down triangle */
    }
    & small{
      margin-left: .25em; /* add space for arrow */
    }
    &:hover > .submenu{
     display: block;
    }
}

.submenu{
    position: absolute; /* relative to the item that contains it */
    top: auto;
    left: 0;
    color: var(--light_menu);
    background-color: var(--dark_menu);
    width: 175%;
    display: none;
    & > li a{
      margin: 0 2px 2px;
    }
}

.submenu-link::after{
    content: "\25bc";
    font-size: small;
}

.menu > li:first-child a{
    margin-left: 0;
}

.menu > li:last-child a{
    margin-right: 0;
}

#checkbox-toggle{
    display:none; /* hide menu input button */
}

.menu-btn{
    display: none; /* hide menu button */
}

table{
    /*border: 1px solid black;*/
    border-collapse: collapse;
    /*width: 1022px;*/
    margin: 0 auto;
    padding: 0;
}

th, td{
    /*border: 1px solid black;*/
    /*padding: .2em .7em;*/
    padding: 0;
    max-width: 126.4px;
    /*text-align: right;*/
    text-align: left;
    &.left{
     text-align: left;
    }
}

table.table_header_jsp{
    /*border: 1px solid black;*/
    width: 1022px;
    /*width: min(90%, 1022px);*/
    margin: 0 auto;
    padding: 0;
}

td.td_first_of_table_header_jsp{
    /*border: 1px solid var(--chenhangshiji_primary);*/
    background-color: var(--chenhangshiji_text);
    & a{
      text-decoration: none;
      color: var(--chenhangshiji_background);
    }
    & a:link, a:visited{
      text-decoration: none;
      color: var(--chenhangshiji_background);
      font-size: 100%;
    }
    & a:hover, a:focus{
      text-decoration: none;
      color: var(--chenhangshiji_primary);
      font-size: 100%;
    }
}

table.table_index_jsp{
    /*border: 1px solid black;*/
    width: 1022px;
    margin: 0 auto;
    padding: 0;
    & a{
      text-decoration: none;
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_text);
    }
    & a:link, a:visited{
      text-decoration: none;
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_text);
      font-size: 100%;
    }
    & a:hover, a:focus{
      text-decoration: none;
      /*color: var(--chenhangshiji_text);*/
      /*          color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_accent);
      font-size: 100%;
    }
}

tbody.tbody_table_index_jsp tr:nth-child(even){ /* even rows in table body */
    /*background-color: silver;*/
    background-color: var(--chenhangshiji_background_200);
    /*background-color: var(--chenhangshiji_background_300);*/
    /*background-color: var(--chenhangshiji_background);*/
    /*background-color: var(--chenhangshiji_accent);*/
}

thead, tfoot{
    background-color: lightgreen;
}

tfoot{
    font-weight: bold;
}

th:first-child, td:first-child{ /* all cells in first column */
    text-align: left;
}

th:nth-child(2), td:nth-child(2){ /* all cells in second column */
    /*text-align: center;*/
    text-align: left;
}

tbody tr:nth-child(even){ /* even rows in table body */
    /*background-color: silver;*/
    /*background-color: var(--chenhangshiji_background);*/
}

figure.table{
    border: 1px solid black;
    width: 450px;
    padding: 1em;
}

figcaption{
    display: block;
    font-weight: bold;
    text-align: center;
    font-size: 120%;
    padding-bottom: .25em;
}

table{
    border-collapse: collapse;
    /*border: 1px solid black;*/
    /*margin: .5em auto;*/
}

tr:first-child th:first-child{
    vertical-align: bottom; /* Product */
}

tr:first-child th:nth-child(2){
    /*text-align: center; !* Sales *!*/
    text-align: left; /* Sales */
}


table.table_chsj_product_index_jsp{
    /*border: 1px solid black;*/
    width: 1022px;
    margin: 0 auto;
    padding: 0;
    & a{
      text-decoration: none;
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_text);
    }
    & a:link, a:visited{
      text-decoration: none;
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_text);
      font-size: 100%;
    }
    & a:hover, a:focus{
      text-decoration: none;
      /*color: var(--chenhangshiji_text);*/
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_accent);
      font-size: 100%;
    }
}

tbody.tbody_table_chsj_product_index_jsp tr:nth-child(even){ /* even rows in table body */
    /*background-color: silver;*/
    background-color: var(--chenhangshiji_background_200);
    /*background-color: var(--chenhangshiji_background_300);*/
    /*background-color: var(--chenhangshiji_background);*/
    /*background-color: var(--chenhangshiji_accent);*/
}

h2.h2_chsj_product_index_jsp{
    color: var(--chenhangshiji_primary);
}


table.table_chsj_product_products_through_categoryid_and_nationid_jsp{
    /*border: 1px solid black;*/
    width: 1022px;
    margin: 0 auto;
    padding: 0;
    & a{
      text-decoration: none;
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_text);
    }
    & a:link, a:visited{
      text-decoration: none;
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_text);
      font-size: 100%;
    }
    & a:hover, a:focus{
      text-decoration: none;
      /*color: var(--chenhangshiji_text);*/
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_accent);
      font-size: 100%;
    }
}

tbody.tbody_table_chsj_product_products_through_categoryid_and_nationid_jsp tr:nth-child(even){ /* even rows in table body */
    /*background-color: silver;*/
    background-color: var(--chenhangshiji_background_200);
    /*background-color: var(--chenhangshiji_background_300);*/
    /*background-color: var(--chenhangshiji_background);*/
    /*background-color: var(--chenhangshiji_accent);*/
}

h2.h2_chsj_product_products_through_categoryid_and_nationid_jsp{
    color: var(--chenhangshiji_primary);
}


table.table_chsj_product_product_through_categoryid_and_nationid_jsp{
    /*border: 1px solid black;*/
    width: 1022px;
    margin: 0 auto;
    padding: 0;
    & a{
      text-decoration: none;
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_text);
    }
    & a:link, a:visited{
      text-decoration: none;
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_text);
      font-size: 100%;
    }
    & a:hover, a:focus{
      text-decoration: none;
      /*color: var(--chenhangshiji_text);*/
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_accent);
      font-size: 100%;
    }
}

td.right_td_chsj_product_product_through_categoryid_and_nationid_jsp{
    /*border: 1px solid var(--chenhangshiji_primary);*/
    /*background-color: var(--chenhangshiji_text);*/
    background-color: var(--chenhangshiji_background);
    text-align: right;
    vertical-align: top;
    width: 150px;
    & a{
      text-decoration: none;
      color: var(--chenhangshiji_background);
    }
    & a:link, a:visited{
      text-decoration: none;
      color: var(--chenhangshiji_background);
      font-size: 100%;
    }
    & a:hover, a:focus{
      text-decoration: none;
      color: var(--chenhangshiji_accent);
      font-size: 100%;
    }
}

tbody.tbody_table_chsj_product_product_through_categoryid_and_nationid_jsp tr:nth-child(even){ /* even rows in table body */
    /*background-color: silver;*/
    background-color: var(--chenhangshiji_background_200);
    /*background-color: var(--chenhangshiji_background_300);*/
    /*background-color: var(--chenhangshiji_background);*/
    /*background-color: var(--chenhangshiji_accent);*/
}

h2.h2_chsj_product_product_through_categoryid_and_nationid_jsp{
    color: var(--chenhangshiji_primary);
    & a{
      text-decoration: none;
      color: var(--chenhangshiji_primary);
      /*color: var(--chenhangshiji_text);*/
    }
    & a:link, a:visited{
      text-decoration: none;
      color: var(--chenhangshiji_primary);
      /*color: var(--chenhangshiji_text);*/
      font-size: 100%;
    }
    & a:hover, a:focus{
      text-decoration: none;
      /*color: var(--chenhangshiji_text);*/
      /*color: var(--chenhangshiji_primary);*/
      color: var(--chenhangshiji_accent);
      font-size: 100%;
    }
}




/*table{*/
/*    border: 1px solid black;*/
/*    border-collapse: collapse;*/
/*}*/
/*th, td{*/
/*    border: 1px solid black;*/
/*    padding: .2em .7em;*/
/*    text-align: right;*/
/*&.left{*/
/*     text-align: left;*/
/* }*/
/*}*/
/*thead, tfoot{*/
/*    background-color: lightgreen;*/
/*}*/
/*tfoot{*/
/*    font-weight: bold;*/
/*}*/

/*th:first-child, td:first-child{ !* all cells in first column *!*/
/*    text-align: left;*/
/*}*/
/*th:nth-child(2), td:nth-child(2){ !* all cells in second column *!*/
/*    text-align: center;*/
/*}*/
/*tbody.tbody_table_index_jsp tr:nth-child(even){ !* even rows in table body *!*/
/*    background-color: silver;*/
/*}*/

/*figure.table{*/
/*    border: 1px solid black;*/
/*    width: 450px;*/
/*    padding: 1em;*/
/*}*/
/*figcaption{*/
/*    display: block;*/
/*    font-weight: bold;*/
/*    text-align: center;*/
/*    font-size: 120%;*/
/*    padding-bottom: .25em;*/
/*}*/
/*table{*/
/*    border-collapse: collapse;*/
/*    border: 1px solid black;*/
/*    margin: .5em auto;*/
/*}*/

/*tr:first-child th:first-child{*/
/*    vertical-align: bottom; !* Product *!*/
/*}*/
/*tr:first-child th:nth-child(2){*/
/*    text-align: center; !* Sales *!*/
/*}*/

/************************************/

/**************************************************************/
/**************************************************************/
/**************************************************************/
/**************************************************************/

/*@media only screen and (max-width: 745px){*/
/*    header{*/
/*        text-align: center; !* center headings *!*/
/*& img{*/
/*      display: none; !* hide logo image *!*/
/*  }*/
/*}*/
/*main{*/
/*    flex-direction: column; !* 1-column layout *!*/
/*}*/
/*aside{*/
/*    margin: 1em 0; !* no left margin *!*/
/*}*/
/*footer{*/
/*& p{*/
/*      text-align: center !* center text *!*/
/*  }*/
/*}*/

/*.navbar{*/
/*    position: relative;*/
/*    background-color: var(--dark_menu);*/
/*& a{*/
/*      display: block;*/
/*      padding: .25em 1em;*/
/*      margin: .25em;*/
/*      text-decoration: none;*/
/*      color: var(--light_menu);*/
/*  }*/
/*& a:hover, a:focus{*/
/*      text-decoration: underline;*/
/*  }*/
/*& a.current{*/
/*      border: 2px solid;*/
/*      border-radius: 10px;*/
/*      text-decoration: none;*/
/*  }*/
/*& ul{*/
/*      list-style-type: none;*/
/*      margin: 0;*/
/*      padding: 0;*/
/*  }*/
/*}*/

/*.menu{*/
/*    position: absolute; !* in relation to .navbar *!*/
/*    left: 0;*/
/*    display: none; !* menu initially hidden *!*/
/*    background-color: var(--dark_menu);*/
/*}*/
/*#checkbox-toggle{*/
/*    display: none; !* checkbox always hidden *!*/
/*}*/
/*.menu-btn{*/
/*    display: block; !* show menu button *!*/
/*    padding: 0.25em 1em;*/
/*    color: var(--light_menu);*/
/*    font-size: 24px;*/
/*}*/
/*.menu-btn::after{*/
/*    content: "\2630"; !* hamburger symbol *!*/
/*}*/
/*#checkbox-toggle:checked ~ .menu{*/
/*    display: block;*/
/*}*/
/*#checkbox-toggle:checked ~ .menu-btn::after{*/
/*    content: "\2716"; !* close (X) symbol *!*/
/*}*/

/*.menu li:has(.submenu){*/
/*    position: relative;*/
/*& small::after{*/
/*      content: "\25b6"; !* right triangle *!*/
/*  }*/
/*& small{*/
/*      margin-left: .25em; !* add space *!*/
/*  }*/
/*&:hover > .submenu{*/
/*     display: block;*/
/* }*/
/*}*/

/*.submenu{*/
/*    position: absolute; !* relative to the menu item that contains it *!*/
/*    top: 0;*/
/*    left: 100%;*/
/*    background-color: var(--dark_menu);*/
/*    color: var(--light_menu);*/
/*    width: 150%;*/
/*    display: none;*/
/*}*/
/*}*/

/*.section_tickets{*/
/*    container-type: inline-size; !* define the container *!*/
/*    container-name: tickets;*/
/*    padding: 1em 0;*/
/*    flex-basis: 65%;*/
/*& img{*/
/*      width: min(100%, 600px);*/
/*  }*/
/*}*/

/*.tickets{*/
/*    display: flex;*/
/*    flex-direction: row; !* display tow tickets per row *!*/
/*    flex-wrap: wrap;*/
/*    justify-content: center;*/
/*    padding: 0;*/
/*& a{*/
/*      flex-basis: 45cqw;*/
/*      display: block;*/
/*      padding: .75em;*/
/*      margin: .25em 0;*/
/*      text-decoration: none;*/
/*      color: var(--dark_menu);*/
/*      font-size: 18px; !* fixed font size *!*/
/*      font-weight: normal;*/
/*      background: url("../images/logo.jpg") no-repeat;*/
/*      min-height: 94px; !* fixed height for background images *!*/
/*  }*/
/*& a:hover, a:focus{*/
/*      color: var(--light_menu);*/
/*      background: url("../images/8601_cover_t.jpg") no-repeat;*/
/*  }*/
/*}*/

/*@container tickets (max-width: 450px){*/
/*    .tickets{*/
/*        flex-direction: column; !* display one ticket per row *!*/
/*        padding: 0 3em;*/
/*    }*/
/*}*/

/*ul.circle{*/
/*    list-style-type: circle;*/
/*}*/

/*ul.star{*/
/*    list-style-image: url("../images/favicon.ico");*/
/*}*/

/*ol.nested{*/
/*    list-style-type: lower-alpha;*/
/*}*/

/*h2, ul, li{*/
/*    margin:0;*/
/*    padding: 0;*/
/*}*/

/*h2{*/
/*    padding-bottom: .25em;*/
/*}*/

/*ul{*/
/*    padding-left: 1em; !* determines left alignment *!*/
/*}*/

/*li{*/
/*    padding-left: .25em; !* space between bullet and text *!*/
/*    padding-bottom: .25em; !* space after list item *!*/
/*}*/

/*div.chapter09_07_howToLinkToAnotherPage{*/
/*& img{*/
/*      width: min(100%, 80px);*/
/*  }*/
/*}*/

/*@media only screen and (max-width: 640px){*/
/*    th, td{*/
/*        display: block;*/
/*    }*/

/*    !* hide header and first 2 cells of footer *!*/
/*    thead{*/
/*        display: none;*/
/*    }*/
/*    tfoot th, tfoot td:nth-of-type(1){*/
/*        display: none;*/
/*    }*/

/*    !* style first data cell like a header *!*/
/*    tbody td:first-child{*/
/*        font-weight: bold;*/
/*        background-color: lightgreen;*/
/*    }*/

/*    !* turn off borders that are no longer needed *!*/
/*    table{*/
/*        border: none;*/
/*    }*/
/*    tbody td{*/
/*        border-bottom: none;*/
/*    }*/

/*    !* add headings to data cells in body and footer *!*/
/*    tbody td:nth-of-type(2)::before{*/
/*        content: "Year Invented: ";*/
/*    }*/
/*    tbody td:nth-of-type(3)::before{*/
/*        content: "Sales: ";*/
/*    }*/
/*    tfoot td:nth-of-type(2)::before{*/
/*        content: "Total Sales: ";*/
/*    }*/

/*    !* position headings so they're left aligned *!*/
/*    td::before{*/
/*        !*position: absolute;*!*/
/*        !*left: 30px;*!*/
/*    }*/
/*}*/

/*input, select, button{*/
/*    font-size: inherit;*/
/*    padding: .2em;*/
/*    margin-bottom: .5em;*/
/*    border-radius: 5px;*/
/*}*/

/*label{*/
/*    display: block;*/
/*    margin-bottom: .25em;*/
/*}*/

/*input, select{*/
/*    width: 100%;*/
/*}*/

/*input{*/
/*    !*padding: .4em;*!*/
/*    !*margin-bottom: .5em;*!*/
/*    margin-bottom: 1em;*/
/*    margin-right: .5em;*/
/*}*/

/*textarea{*/
/*    width: 100%;*/
/*    padding: .2em;*/
/*    height: 5em;*/
/*    font-family: inherit; !* inherit from <body> element *!*/
/*    font-size: inherit; !* inherit from <input> element *!*/
/*}*/

/*button{*/
/*    cursor: pointer;*/
/*    width: 8em;*/
/*    padding: .5em;*/
/*    margin-top: 1em;*/
/*    font-weight: bold;*/
/*    color: white;*/
/*    !*background-color: forestgreen;*!*/
/*    background-color: var(--dark);*/
/*&:hover{*/
/*     color: black;*/
/*     !*background-color: lightgreen;*!*/
/*     background-color: var(--light);*/
/* }*/
/*}*/

/*input:required{*/
/*    border: 2px solid red;*/
/*}*/

/*input:valid{*/
/*    border: 2px solid green;*/
/*}*/

/*legend{*/
/*    font-size: 1.2em;*/
/*    font-weight: bold;*/
/*}*/

/*fieldset{*/
/*    padding: .5em 1em;*/
/*    margin-bottom: 0.5em;*/
/*}*/

/*input[type="radio"], input[type="checkbox"]{*/
/*    margin-right: .5em;*/
/*}*/

/*option{*/
/*    padding: .2em;*/
/*}*/

/*.button-styled{*/
/*    cursor: pointer;*/
/*    color: white;*/
/*    background-color: blue;*/
/*    font-weight: bold;*/
/*    font-size: inherit;*/
/*    padding: 0.5em;*/
/*    border-radius: 10px;*/
/*&:hover{*/
/*     color: black;*/
/*     background-color: white;*/
/* }*/
/*}*/

/*.button-primary{*/
/*    background-color: green;*/
/*}*/

/*.button-danger{*/
/*    background-color: red;*/
/*}*/

/*.button-disabled{*/
/*    opacity: 0.5;*/
/*    cursor: default;*/
/*}*/

/*video{*/
/*    width: 100%;*/
/*}*/

/*!***************************!*/
/*!***************************!*/
/*!***************************!*/
/*!***************************!*/
/*!**{*!*/
/*!*    margin: 0;*!*/
/*!*    padding: 0;*!*/
/*!*}*!*/
/*!*body{*!*/
/*!*    width: 90%;*!*/
/*!*    margin: auto;*!*/
/*!*    font-family: sans-serif;*!*/
/*!*}*!*/
/*!*div{*!*/
/*!*    background: #6FA8CF; !* dark blue *!*!*/
/*!*}*!*/
/*!*nav, section, main, footer{*!*/
/*!*    display: grid;*!*/
/*!*    width: 100%;*!*/
/*!*    margin-bottom: 7px;*!*/
/*!*    background: #C8DFEE; !* light blue *!*!*/
/*!*}*!*/
/*!*nav{*!*/
/*!*    grid-template: 80px / 120px 1fr;*!*/
/*!*    gap: 20px;*!*/
/*!*}*!*/
/*!*nav div:nth-of-type(2){*!*/
/*!*    height: 40px;*!*/
/*!*    align-self: center; !* vertically aligns the menu *!*!*/
/*!*}*!*/
/*!*section{*!*/
/*!*    grid-template-rows: 200px;*!*/
/*!*}*!*/
/*!*main{*!*/
/*!*    height: 160px;*!*/
/*!*    grid-template: 120px /repeat(3, 180px);*!*/
/*!*    align-content: center; !* vertically centers the row track *!*!*/
/*!*    justify-content: space-evenly; !* horizontally spaces items evenly *!*!*/
/*!*}*!*/
/*!*footer{*!*/
/*!*    height: 40px;*!*/
/*!*    align-items: center; !* vertically centers the content *!*!*/
/*!*    justify-items: center; !* horizontally centers the content *!*!*/
/*!*}*!*/

/*!*body{*!*/
/*!*    display: grid;*!*/
/*!*    grid-template-columns: 200px 1fr 1fr;*!*/
/*!*    grid-template-rows: 80px 1fr 1fr 60px;*!*/
/*!*    gap: 16px;*!*/
/*!*    min-height: 600px;*!*/
/*!*    width: 90%;*!*/
/*!*    margin: auto;*!*/
/*!*}*!*/
/*!*header{*!*/
/*!*    grid-row: 1 /2;*!*/
/*!*    grid-column: 1 /4;*!*/
/*!*}*!*/
/*!*nav{*!*/
/*!*    grid-row: 2 /4;*!*/
/*!*    grid-column: 1 / 2;*!*/
/*!*}*!*/
/*!*#s1{*!*/
/*!*    grid-row: 2 /3;*!*/
/*!*    grid-column: 2 /4;*!*/
/*!*}*!*/
/*!*#s2{*!*/
/*!*    grid-row: 3 / 4;*!*/
/*!*    grid-column: 2 / 3;*!*/
/*!*}*!*/
/*!*#s3{*!*/
/*!*    grid-row: 3 / 4;*!*/
/*!*    grid-column: 3 /4;*!*/
/*!*}*!*/
/*!*footer{*!*/
/*!*    grid-row: 4 / 5;*!*/
/*!*    grid-column: 1 / 4;*!*/
/*!*}*!*/

/*!*body{*!*/
/*!*    display: grid;*!*/
/*!*    grid-template-columns: [body-start nav-start] 200px [nav-end sec-start] 1fr [sec3-start] 1fr [sec-end body-end];*!*/
/*!*    grid-template-rows: [row1-start] 80px [row2-start] 1fr [row3-start] 1fr [row4-start] 60px [rows-end];*!*/
/*!*    gap: 16px;*!*/
/*!*    min-height: 600px;*!*/
/*!*    width: 90%;*!*/
/*!*    margin: auto;*!*/
/*!*}*!*/
/*!*header{*!*/
/*!*    grid-row: row1-start/row2-start;*!*/
/*!*    grid-column: body-start/body-end;*!*/
/*!*}*!*/
/*!*nav{*!*/
/*!*    grid-row: row2-start/row4-start;*!*/
/*!*    grid-column: nav-start/nav-end;*!*/
/*!*}*!*/
/*!*#s1{*!*/
/*!*    grid-row: row2-start/row3-start;*!*/
/*!*    grid-column: sec-start/sec-end;*!*/
/*!*}*!*/
/*!*#s2{*!*/
/*!*    grid-row: row3-start/row4-start;*!*/
/*!*    grid-column: sec-start/sec3-start;*!*/
/*!*}*!*/
/*!*#s3{*!*/
/*!*    grid-row: row3-start/row4-start;*!*/
/*!*    grid-column: sec3-start/sec-end;*!*/
/*!*}*!*/
/*!*footer{*!*/
/*!*    grid-row: row4-start/rows-end;*!*/
/*!*    grid-column: body-start/body-end;*!*/
/*!*}*!*/

/*!*body{*!*/
/*!*    display: grid;*!*/
/*!*    grid-template-columns: 200px 1fr 1fr;*!*/
/*!*    grid-template-rows: 80px 1fr 1fr 60px;*!*/
/*!*    gap: 16px;*!*/
/*!*    grid-template-areas:*!*/
/*!*    "head head head"*!*/
/*!*    "navi sec1 sec1"*!*/
/*!*    "navi sec2 sec3"*!*/
/*!*    "foot foot foot";*!*/
/*!*    min-height: 600px;*!*/
/*!*    width: 90%;*!*/
/*!*    margin: auto;*!*/
/*!*}*!*/
/*!*header{*!*/
/*!*    grid-area: head;*!*/
/*!*}*!*/
/*!*nav{*!*/
/*!*    grid-area: navi;*!*/
/*!*}*!*/
/*!*#s1{*!*/
/*!*    grid-area: sec1;*!*/
/*!*}*!*/
/*!*#s2{*!*/
/*!*    grid-area: sec2;*!*/
/*!*}*!*/
/*!*#s3{*!*/
/*!*    grid-area: sec3;*!*/
/*!*}*!*/
/*!*footer{*!*/
/*!*    grid-area: foot;*!*/
/*!*}*!*/

/*!*body{*!*/
/*!*    display: grid;*!*/
/*!*    grid-template-columns: repeat(12, 1fr);*!*/
/*!*    grid-template-rows: 80px 1fr 1fr 60px;*!*/
/*!*    gap: 16px;*!*/
/*!*    min-height: 600px;*!*/
/*!*    width: 90%;*!*/
/*!*    margin: auto;*!*/
/*!*}*!*/
/*!*header{*!*/
/*!*    grid-row: 1 / 2;*!*/
/*!*    grid-column: 1 / span 12;*!*/
/*!*}*!*/
/*!*nav{*!*/
/*!*    grid-row: 2 / 4;*!*/
/*!*    grid-column: 1 / span 4;*!*/
/*!*}*!*/
/*!*#s1{*!*/
/*!*    grid-row: 2 / 3;*!*/
/*!*    grid-column: 5 / span 8;*!*/
/*!*}*!*/
/*!*#s2{*!*/
/*!*    grid-row: 3 / 4;*!*/
/*!*    grid-column: 5 / span 4;*!*/
/*!*}*!*/
/*!*#s3{*!*/
/*!*    grid-row: 3 / 4;*!*/
/*!*    grid-column: 9 / span 4;*!*/
/*!*}*!*/
/*!*footer{*!*/
/*!*    grid-row: 4 / 5;*!*/
/*!*    grid-column: 1 / span 12;*!*/
/*!*}*!*/

/*!*body{*!*/
/*!*    display: grid; !* make the body a grid *!*!*/
/*!*    grid-template: repeat(4, auto) / 1fr; !* define 4 rows and 1 column *!*!*/
/*!*    grid-template-areas: !* define the template areas *!*!*/
/*!*            "head"*!*/
/*!*    "navi"*!*/
/*!*    "main"*!*/
/*!*    "side";*!*/
/*!*}*!*/
/*!*header{*!*/
/*!*    grid-area: head; !* place the header in a grid area *!*!*/
/*!*    text-align: left;*!*/
/*!*& img{*!*/
/*!*      display: block;*!*/
/*!*      float: left;*!*/
/*!*      margin: .5em 1.25em .5em 0;*!*/
/*!*      width: clamp(40px, 10%, 80px);*!*/
/*!*  }*!*/
/*!*}*!*/

/*!*main{*!*/
/*!*    grid-area: main; !* place the <main> element in a grid area *!*!*/
/*!*    display: grid; !* make the <main> element a nested grid *!*!*/
/*!*    grid-template-rows: auto;*!*/
/*!*    grid-template-columns: 1fr 35%; !* define 1 row and 2 columns *!*!*/
/*!*    grid-template-areas: "sect side"; !* define the template areas *!*!*/
/*!*    gap: 5%; !* define the gap between grid areas *!*!*/
/*!*}*!*/

/*!*section{*!*/
/*!*    grid-area: sect; !* place the section element in a grid area *!*!*/
/*!*}*!*/
/*!*aside{*!*/
/*!*    grid-area: side; !* place the aside element in a grid area *!*!*/
/*!*}*!*/
/*!*footer{*!*/
/*!*    grid-area: foot; !* place the footer in a grid area *!*!*/
/*!*}*!*/
/*!*footer p{*!*/
/*!*    text-align: right;*!*/
/*!*}*!*/

/*!*.navbar{*!*/
/*!*    grid-area: navi; !* place the navigation bar in a grid area *!*!*/
/*!*}*!*/

/*!*.menu{*!*/
/*!*    position: relative;*!*/
/*!*    display: grid; !* make the menu a grid *!*!*/
/*!*    grid-template-rows: auto;*!*/
/*!*    grid-template-columns: repeat(5, auto); !* define 1 row and 5 columns *!*!*/
/*!*    justify-content: space-evenly; !* space columns evenly *!*!*/
/*!*}*!*/
/*!*.menu-btn{*!*/
/*!*    display: none;*!*/
/*!*}*!*/
/*!*!* make sure menu displays horizontally if menu is expanded when resized *!*!*/
/*!*#checkbox-toggle:checked ~ .menu{*!*/
/*!*    display: grid;*!*/
/*!*}*!*/

/*!*@media only screen and (max-width: 768px){*!*/
/*!*    body{*!*/
/*!*        display: grid; !* make the body a grid *!*!*/
/*!*        grid-template: repeat(4, auto) / 1fr; !* define 4 rows and 1 column *!*!*/
/*!*        grid-template-areas: !* define the template areas *!*!*/
/*!*                "head"*!*/
/*!*    "navi"*!*/
/*!*    "main"*!*/
/*!*    "side";*!*/
/*!*    }*!*/
/*!*    header{*!*/
/*!*        grid-area: head; !* place the header in a grid area *!*!*/
/*!*    }*!*/
/*!*    main{*!*/
/*!*        grid-area: main; !* place the <main> element in a grid area *!*!*/
/*!*        display: grid; !* make the <main> element a nested grid *!*!*/
/*!*        grid-template: auto auto / 1fr; !* define 2 rows and 1 column *!*!*/
/*!*        grid-template-areas: !* define the template areas *!*!*/
/*!*                "side"*!*/
/*!*    "sect";*!*/
/*!*    }*!*/
/*!*    section{*!*/
/*!*        grid-area: sect; !* place the section element in a grid area *!*!*/
/*!*    }*!*/
/*!*    aside{*!*/
/*!*        grid-area: side; !* place the aside element in a grid area *!*!*/
/*!*    }*!*/
/*!*    footer{*!*/
/*!*        grid-area: foot; !* place the footer in a grid area *!*!*/
/*!*    }*!*/
/*!*    .navbar{*!*/
/*!*        grid-area: navi; !* place the navigation bar in a grid area *!*!*/
/*!*    }*!*/
/*!*}*!*/

/*h1.transition{*/
/*    font-size: 120%;*/
/*    color: blue;*/
/*    transition: font-size 2s ease-out 1s, color 2s ease-in 1s;*/
/*}*/
/*h1.transition:hover{*/
/*    font-size: 180%;*/
/*    color: red;*/
/*    cursor: pointer;*/
/*}*/
/*h1.transition{*/
/*    font-size: 120%;*/
/*    transition: font-size 2s ease-out;*/
/*}*/
/*h1.transition:hover{*/
/*    font-size: 180%;*/
/*}*/

/*#accordion div{*/
/*    overflow: hidden;*/
/*    height: 0;*/
/*    transition: height 1s ease-in-out;*/
/*}*/
/*#accordion div:target{*/
/*    height: 7em;*/
/*}*/

/*img.transform	{*/
/*    width: 125px;*/
/*    height: 100px;*/
/*}*/
/*img.image1	{*/
/*    width: 125px;*/
/*    height: 100px;*/
/*}*/
/*.image1{*/
/*    transition: 2s;*/
/*}*/
/*.image1:hover{*/
/*    transform: rotateY(180deg);*/
/*    transform-origin: right;*/
/*}*/

/*img.image2	{*/
/*    width: 125px;*/
/*    height: 100px;*/
/*    display: block;*/
/*    margin-top: 1em;*/
/*}*/
/*img.image3	{*/
/*    width: 125px;*/
/*    height: 100px;*/
/*    display: block;*/
/*    margin-top: 1em;*/
/*}*/
/*img.image4	{*/
/*    width: 125px;*/
/*    height: 100px;*/
/*    display: block;*/
/*    margin-top: 1em;*/
/*}*/
/*img.image5	{*/
/*    width: 125px;*/
/*    height: 100px;*/
/*    display: block;*/
/*    margin-top: 1em;*/
/*}*/
/*img.image6	{*/
/*    width: 125px;*/
/*    height: 100px;*/
/*    display: block;*/
/*    margin-top: 1em;*/
/*}*/
/*img.image7	{*/
/*    width: 125px;*/
/*    height: 100px;*/
/*    display: block;*/
/*    margin-top: 1em;*/
/*}*/
/*img.image8	{*/
/*    width: 125px;*/
/*    height: 100px;*/
/*    display: block;*/
/*    margin-top: 1em;*/
/*}*/

/*.image1:hover{*/
/*    transform: matrix(0.5, 0.5, -0.5, 1, 0, 0);*/
/*}*/
/*.image2:hover{*/
/*    transform: rotate(20deg);*/
/*}*/
/*.image3:hover{*/
/*    transform: scaleX(1.4);*/
/*}*/
/*.image4:hover{*/
/*    transform: scaleY(1.4);*/
/*}*/
/*.image5:hover{*/
/*    transform: skewX(-20deg);*/
/*}*/
/*.image6:hover{*/
/*    transform: skewY(-30deg);*/
/*}*/
/*.image7:hover{*/
/*    transform: translateX(30px);*/
/*}*/
/*.image8:hover{*/
/*    translateY(20px);*/
/*}*/

/*h1.animation{*/
/*    animation: moveright 3s ease-in-out 1s infinite alternate;*/
/*}*/
/*@keyframes moveright{*/
/*    from{*/
/*        margin-left: 20%;*/
/*        color: blue;*/
/*    }*/
/*    to{*/
/*        margin-left: 60%;*/
/*        color: red;*/
/*    }*/
/*}*/

/*ul.animation{*/
/*    display: flex;*/
/*    list-style: none;*/
/*    width: 500%;*/
/*    position: relative;*/
/*& li{*/
/*      width: 20%;*/
/*  }*/
/*}*/
/*ul.animation{*/
/*    animation: slideshow 15s infinite alternate;*/
/*}*/
/*@keyframes slideshow{*/
/*    0%{*/
/*        left: 0%;*/
/*    }*/
/*    10%{*/
/*        left: 0%;*/
/*    }*/
/*    20%{*/
/*        left: -100%;*/
/*    }*/
/*    30%{*/
/*        left: -100%;*/
/*    }*/
/*    40%{*/
/*        left: -200%;*/
/*    }*/
/*    50%{*/
/*        left: -200%;*/
/*    }*/
/*    60%{*/
/*        left: -300%;*/
/*    }*/
/*    70%{*/
/*        left: -300%;*/
/*    }*/
/*    80%{*/
/*        left: -400%;*/
/*    }*/
/*    90%{*/
/*        left: -400%;*/
/*    }*/
/*    100%{*/
/*        left: -400%;*/
/*    }*/
/*}*/

/*.images1_filters:hover{*/
/*    filter: invert(.80);*/
/*}*/

/*.image1_filter_function{*/
/*    filter: blur(2px);*/
/*}*/
/*.image2_filter_function{*/
/*    filter: brightness(50%);*/
/*}*/
/*.image3_filter_function{*/
/*    filter: contrast(50%);*/
/*}*/
/*.image4_filter_function{*/
/*    filter: drop-shadow(2px 2px 5px #333);*/
/*}*/
/*.image5_filter_function{*/
/*    filter: grayscale(50%);*/
/*}*/
/*.image6_filter_function{*/
/*    filter: hue-rotate(90deg);*/
/*}*/
/*.image7_filter_function{*/
/*    filter: invert(.8);*/
/*}*/
/*.image8_filter_function{*/
/*    filter: opacity(.50);*/
/*}*/
/*.image9_filter_function{*/
/*saturate(30%);*/
/*}*/
/*.image10{*/
/*    filter: sepia(100%) blur(1px);*/
/*}*/

/*h1.shadows{*/
/*    color: #ef9c00;*/
/*    text-shadow: 4px 4px;*/
/*}*/

/*h1.shadows2{*/
/*    color: blue;*/
/*    text-shadow: -2px -2px 4px red;*/
/*}*/

/*h1{*/
/*    animation: move 4s ease-in-out infinite alternate;*/
/*}*/
/*@media screen and (prefers-reduced-motion: reduce){*/
/*    h1{*/
/*        animation: none;*/
/*    }*/
/*}*/

/*main{*/
/*    !*border: 2px dashed rebeccapurple;*!*/
/*}*/

/*@media screen and (prefers-contrast: more){*/
/*    main{*/
/*        border-width: 3px;*/
/*        border-style: solid;*/
/*    }*/
/*}*/

/*@media screen and (prefers-contrast: less){*/
/*    main{*/
/*        border-width: 1px;*/
/*    }*/
/*}*/

/*@media screen and (prefers-color-scheme: dark){*/
/*    body{*/
/*        background-color: rebeccapurple;*/
/*        color: white;*/
/*    }*/
/*    main{*/
/*        border-color: white;*/
/*    }*/
/*}*/

/*header :is(h1, h2, h3, a){*/
/*    color: rebeccapurple;*/
/*}*/

/*header h1, header h2, header h3, header a{*/
/*    color: rebeccapurple;*/
/*}*/

/*:is(header, nav) :is(h1, h2, h3, a){*/
/*    color: rebeccapurple;*/
/*}*/

/*header h1, header h2, header h3, header a, nav h1, nav h2, nav h3, nav a{*/
/*    color: rebeccapurple;*/
/*}*/

/*a:not([href]) {*/
/*    font-wight: 900;*/
/*}*/

/*h2:has(+ .subhead){*/
/*    padding-bottom: 0;*/
/*}*/

/*li:has(.submenu){*/
/*    position: relative;*/
/*&:hover > .submenu{*/
/*     display: block;*/
/* }*/
/*}*/

/*body:has(#dark:checked){*/
/*    background-color: rebeccapurple;*/
/*    color: aliceblue;*/
/*}*/