@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;0,8..144,400;0,8..144,500;0,8..144,600;0,8..144,700;0,8..144,800;0,8..144,900;1,8..144,100;1,8..144,200;1,8..144,300;1,8..144,400;1,8..144,500;1,8..144,600;1,8..144,700;1,8..144,800;1,8..144,900&display=swap');




.divchestnutandhazellandingpageheaderbutton 
{
  font-size: 4vw;
      text-align: center;
    vertical-align: middle;
}

#centerheadertextbutton 
{
    text-align: center;
    vertical-align: middle;
    
}
.subheadercenterheadertextbutton 
{
    text-align: center;
    vertical-align: middle;
    grid-area: sbhead;
    background-color: #ffefea;
    padding: 2vh;
    font-size: 4vw;
    
    
}
button:not(#modalbutton1):not(#modalbutton2) 
{
  border-style: outset;
  border-width: thick;
  width: auto;
  border-color: silver;
  padding: 5px 5px;
}
button:hover:not(#modalbutton1):not(#modalbutton2) 
{
  border-style: inset;
  border-width: thick;
  width: auto;
  border-color: silver;
  padding: 5px 5px;
}
#submitinformationcontactbutton 
{
  border-style: outset;
  border-width: thick;
  padding: 1px 1px;
  width: auto;
  border-color: silver;
}
#submitinformationcontactbutton:hover 
{
  border-style: inset;
  border-width: thick;
  padding: 1px 1px;
  width: auto;
  border-color: silver;
}
.headerbutton 
{
  text-decoration: none;
  border-style: outset;
  border-width: thick;
  border-color: silver;
  padding: 6px 6px;
  background-color: white;
}
.headerbutton:hover 
{
  text-decoration: none;
  border-style: inset;
  border-width: thick;
  border-color: silver;
  padding: 6px 6px;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;

}


.textbodyparagrahindented {
  text-indent: 50px;
}



.wrapper {
  width: 95%;
  margin-inline: auto;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header header header"
    "sbhead sbhead sbhead sbhead sbhead"
    "aside-one main main main aside-two"
    "aside-one main main main aside-two"
    "footer footer footer footer footer";
  min-height: 80vh;
  margin-top: 4rem;
  gap: 1.15rem;
}

.grid-item {

  padding: 1rem;
  margin: 0rem;
}


.header {
  background-color: #d4e2eb;
  grid-area: header;
  display: grid;

}

.main {
  grid-area: main;
  background-color: #ecdec9;
  padding: 3.9vh;
}



a:visited {
  color: black;
  text-decoration: none;
}
a {
  color: black;
  text-decoration: none;
}
.griditemsasidelefttextdrasideleft:hover {
  transform: scale(1.08);
  color: black;
  text-decoration: none;
}

.griditemsasidelefttextdrasideleft:visited {
  color: black;
  text-decoration: none;
}

.aside-right {
  grid-area: aside-right;
  background-color: #ffffbf;
}
#tableasideleft {
  vertical-align: top;
}




.contentouter {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  background-color: #e6e6fa;
  margin: 1vh;
  padding: 1vh;


}










.form-check 
{

}


#form-check-labelgreen:hover 
{
  transform: scale(1.04);
  color: green;
}

#form-check-labelgreenradio:hover 
{
  transform: scale(1.04);
  color: green;
}


.form-check:hover 
{
  transform: scale(1.04);
  color: blue;
}
.form-checkgreen 
{

}



#form-check-labelgreen:hover 
{
  transform: scale(1.04);
  color: green;
}

#form-check-labelgreenradio:hover 
{
  transform: scale(1.04);
  color: green;
}

#form-check-labelgreenradiogreennightmare:hover 
{
  transform: scale(1.04);
  color: green;
}


/* 10252023 0605 what a nightmare. i had a special hover effect specifically in place for the green book response where the hover effect is green, rather than blue, it broke everything and then i had to fix it. it took pretty much over a million years. */


/* // Define the method to compute the result of the current operation

//   <!-- <div class="input-group">
//   <label for="firstName" class="form-label">First name </label>
//   <input type="text" id="firstName" name="firstName" class="form-control" required>
//   <small class="error-msg invalid-feedback">Example: Mark </small>
// </div>
// <div class="input-group">
//   <label for="lastName" class="form-label">Last name </label>
//   <input type="text" id="lastName" name="lastName" class="form-control" required>
//   <small class="error-msg invalid-feedback">Example: Rothko</small>
// </div>
// <div class="input-group">
//   <label for="email" class="form-label">Email </label>
//   <input type="email" id="email" name="email" class="form-control" required>
//   <small class="error-msg invalid-feedback">Format: username@domain.tld</small>
// </div>
// <div class="input-group">
//   <label for="phone" class="form-label">Telephone </label>
//   <input type="tel" id="phone" name="phone" class="form-control" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
//   <small class="error-msg invalid-feedback">Format: 555-555-5555</small>
// </div>
// <div class="input-group">
//   <label for="mailingaddress" class="form-label">Mailing Address </label>

//   <input style="width: 100%; height: auto; aspect-ratio: 8.68 / 2.14;" type="text" id="mailingaddress" name="mailingaddress" class="form-control"  required>




  
//   <small class="error-msg invalid-feedback"> 
    
//     <table  ><tr><td  class="exampleForm exampleFormA">Format: &nbsp; </td><td class="exampleFormA">  555 Orange Grove ORCH</td></tr><tr><td></td><td class="exampleFormA" >Kumquat Vineyards, AK 55555-5555</td></tr></table>





//   </small>



// </div>
// <div class="input-group">
//   <label for="Comments" class="form-label">Special Considerations </label>

//   <input style="width: 100%; height: auto; aspect-ratio: 8.68 / 2.14;" type="text" id="Comments" name="Comments" class="form-control"  required >


  
//   <small class="error-msg invalid-feedback"> 
    
//     <table  ><tr><td class="exampleFormA">Note: &nbsp; </td><td class="exampleFormA">  Enter Not Applicable if</td></tr><tr><td></td><td class="exampleFormA" > this does not apply to you</td></tr></table>
    

  
//   </small>


// </div>
// <div class="input-group select">
//   <label for="password" class="form-label"> Area of Interest </label>
//   <select id="accountType" name="accountType" class="form-select" required>
//     <option value="Please select an option" selected class="text-muted">Please Specify</option>
//     <option value="Fixed Income">Fixed Income</option>
//     <option value="Equities">Equities</option>
//     <option value="Fixed Assets">Fixed Assets</option>
//     <option value="Derivatives">Derivatives </option>
//     <option value="Blockchain Assets">Blockchain Assets </option>
//     <option value="Intellectual Property">Intellectual Property </option>
//   </select>
//   <small class="error-msg invalid-feedback">Required</small>
// </div>



// <div class="input-group radio">
//   <div class="form-check">
//     <input type="radio" id="personal" name="purpose" value="Personal" class="form-check-input" required>
//     <label for="personal" class="form-check-label">Educational</label>
//     <small class="error-msg invalid-feedback">Required</small>
//   </div>

//   <div class="form-check">
//     <input type="radio" id="business" name="purpose" value="Business" class="form-check-input" required>
//     <label for="business" class="form-check-label">Commercial</label>
//     <small class="error-msg invalid-feedback">Required</small>
//   </div>
// </div>


// <div class="form-btns">
//   <button  type="submit" class="fontweightadjustment bootstrapbuttonseven  btn btn-primary submit" disabled>Submit Exam</button>
//   <button  type="reset" class="fontweightadjustment bootstrapbuttonsix btn btn-danger resetExamButton" id="resetExamButton">Reset Exam</button>



// </div>

// <div class="" id="form-submitted-msg">Exam successfully submitted!</div> --> */





.containeroverouter {
  width: 98%;
  background-color: #ffffff;
}

.aside-one 
{
  grid-area: aside-one;
  background-color: #cffdbc;
}



.aside-one:hover 
{
}
 
.aside-two 
{
  grid-area: aside-two;
  background-color: #ffffbf;
  vertical-align: top;
}


.aside-two:hover 
{  
}

*, *::before, *::after 
{
  text-wrap: wrap;font-size: 1vw;font-weight: 600;box-sizing: border-box;font-family: 'Cinzel', "Century Schoolbook","Times New Roman", Times, Courier,"Georgia", serif;text-decoration: none;
}

body {
  background-color: #fae7d4;
  color:  #000000;
  transition: all 0.4s ease-in;
}
 
.backgroundcolortoggler{transition: all 0.4s ease-in;}

h1 {
  text-align: center;
  margin-top: 1.25rem;
}

.colortogglecontainer {
  margin-top: 0.70rem;
  display: grid;
  grid-template-areas:"mode-status slider" ;
  width: 100%;
  place-content: center;
  gap: 1rem;
  text-align: left;
}



.toggle-switch {
  position: relative;
  display: inline-block;
  width: 3.75rem;
  height: 2.13rem;
  margin-bottom: 0.1rem;
  margin-inline: left;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #aad9ff;;
  transition: all 0.4s ease-in;
  border-radius: 2.13rem; 
} 
    
.slider:before {
  position: absolute;
  content: "";
  height: 1.63rem;
  width: 1.63rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}  
  
input:checked + .slider {
  background-color: #ccc;

}

input:focus + .slider {
  background-color: #aad9ff;
  
  
}

input:checked:focus + .slider {
  background-color: #ccc;
  
  }



input:checked + .slider:before {
  transform: translateX(1.63rem);
}
 
.footer {
  text-align: center;
  background-color: #ffefea;
  grid-area: footer;
  display: grid;
  grid-template-areas:
    "toptablerow"
    "bottomtablerow"
    "bottomtablerow2";
  place-items: center;
  }




 




  .dark-mode {
    background-color: #ffffff;
    color:  #000000 !important;
    transition: all 0.4s ease-in;
  }
  .dark-modefields {
    background-color: #BCC2C2;
    color:  #000000 !important;
    transition: all 0.4s ease-in;
  }
  .dark-modebsbuttons {
    background-color: #899499;
    border-color: silver;
    color:  #000000 !important;
    transition: all 0.4s ease-in;
  }

  










  .mainpll {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
   
  #form-submitted-msg {
    margin-top: 2rem;
    border-radius: 3px;
    background-color: rgb(163, 199, 163);
    padding: 0.5rem;
    width: 100%;
    height: auto; 
    aspect-ratio: 10.05 / 4.16;
    text-align: center;
    color: #fff;
    display: none;
  }
  
  #exampleForm {
    width: 100%;
  }
  .exampleFormA {
    color:red;
    font-size: smaller;
    
  }


  
  .input-group {
    margin-bottom: 1.5rem;
  }
  
  .input-group:not(.radio):not(.checkbox) {
    gap: 0.25rem;
    flex-direction: column;
  }
  
  .input-group:not(.radio):not(.checkbox) input {
    width: 100%;
    border-radius: 0.375rem !important;
  }
   
  .input-group.checkbox {
    gap: 1rem;
  }
  
  .input-group.radio {
    display: flex;
    gap: 1.5rem;
    width: 100%;
  }
  
  .input-group.select select {
    width: 100%;
  }
  
  legend {
    font-size: 1rem;
    width: max-content;
  }
  
  .form-btns {
    display: flex;
    width: 100%;
    gap: 1rem;
    margin-top: 2.5rem;
  }
  
  .form-btns > button {
    padding: 0.3rem 1.5rem;
  }
  
  .form-btns > .submit {
    padding-inline: 3rem;
  }
  
  .error-msg {
    display: none;
  }

  .fontweightadjustment{ font-weight: 600; }

  .mode-status 
  {
  }






.questionsbeingasked{font-weight: 750;}

.feedback {

  padding-left: 1vh;

}

.correct-answer {

  color: black;
}

/* Chestnut + Hazel's Miscellaneous Repository README.md

...

"Everything I had done has to be done 
over; I was on the wrong track entirely, 
and after working hard most of that time: 
I'm still only at the beginning." 

- Gustave Flaubert

...

This repository was created as a requirement for
completing project 13. I honestly did not want to
create a whole new repository, but, here we are.

...

William Carlos Williams

"The Young Housewife"  (1916)

At ten A.M. the young housewife
moves about in negligee behind
the wooden walls of her husband's house.
I pass solitary in my car.

Then again she comes to the curb
to call the ice-man, fish-man, and stands
shy, uncorseted, tucking in
stray ends of hair, and I compare her
to a fallen leaf.

The noiseless wheels of my car
rush with a crackling sound over
dried leaves as I bow and pass smiling.

...

WILLIAM CARLOS WILLIAMS

"The Red Wheelbarrow" (1938)

so much depends
upon

a red wheel
barrow

glazed with rain
water

beside the white
chickens

...

William Carlos Williams

"This Is Just To Say" (1962)

I have eaten
the plums
that were in
the icebox

and which
you were probably
saving
for breakfast

Forgive me
they were delicious
so sweet
and so cold

...

Kenneth Larot Yamat

"This Is Just To Say Something About The Young Housewife" (2023)

I totally ate all of the  so many    fried turkeys
that were hanging out
by the red wheelbarrow
you know     the one glazed with
soy sauce and beside the 
                      kentucky fried 
                             kung pao chickens
           which 
themselves were drenched in
              tabasco sauce

I request neither forgiveness
nor do I intend to apologize for
          my actions 

because 

I spent several hours
of quality time
with a certain young housewife

                    who

braless and dressed in negligee 

          and 

whose wild hair suggested
she spent even more additional
even higher quality time with
both the ice man
and the fish man

       either sequentially 
               or 
              simultaneously 
                     neither would surprise me

left me    breathless    exhausted
as well as      famished

I thought I gave a good
account of myself

but then along came 
          the milkman
and    she             still
   had enough energy 
       for 
    round four

I was there
I saw it all

... */