@import "highcontrast.css" (prefers-contrast: more);
:root {
  --psize : 1.5rem /* about 25px, close enough */;--originalbackcolor : maroon/*saddlebrown*/;--originalfrontcolor:goldenrod;
  --backcolor:var(--originalbackcolor);--frontcolor:var(--originalfrontcolor);
  --contrastfrontcolor:white;--contrastbackcolor:maroon;
} /* i added this later not at the start */
body {background-color: var(--backcolor);margin: 0px;}
h1 , h2 , h3 {color: black; font-family: arial, sans-serif;margin: 0px}
h1 {font-size: 12.5rem;font-weight: bold; text-align: center;} 
h2 {font-size: 6.25rem} 
h3 { font-size : 3.125rem ;} 
p {color: var(--frontcolor); padding: 3.125rem;font-size: var(--psize)} 
a{display: block;padding: 0.5rem;float: left;color:var(--backcolor);/*text-decoration: none;*/font-size: var(--psize)} 
div{display: flex;/*border-style: solid;border-color: red*/}
img {display: flex; max-height: 110%; max-width: 110%}

.reversep {color: var(--backcolor)}
ul{list-style-type: none;margin: 0;padding: 5} /* delete? */ 
li{float: left;background-color: var(--frontcolor); margin:10px } /* uhhh */

@media only screen and ((orientation: portrait ) or (max-width: 30rem)){ /* first time? */
  #navbar { flex-direction: column ;} form {display: none;} #portrait {display: block !important ;} footer div {flex-direction: column;}
  /*footer div > div h3 {text-align: center}*/ .mobile_vertical {flex-direction: column}
}

.faq {
  border-color: var(--frontcolor);border-style: solid; border-width: 0.625rem; margin: 0px; border-top: 0px; 
}
@keyframes grow {
  from {transform: scale(1);}
  to {transform: scale(1.2)}
}
/*button {
  border: 5px solid goldenrod ; background-color: saddlebrown; color : goldenrod;font-size: 25px; max-height: 35px;
}
button:hover {
  animation: grow 2s ease-out 0s 1 normal ;
}
button :active {
  background-color: goldenrod;color: saddlebrown;
}*/
details {color: var(--frontcolor); padding: 3.125rem;font-size: var(--psize)} 
.faqs {
  padding:0.625rem;vertical-align:middle;border-color: var(--frontcolor);border-style: solid; border-width: 0.625rem; margin:  0.625rem;
}
input[type="checkbox"]{
  width : 50px; height: 50px;margin: var(--psize);margin-bottom: 0px;accent-color: var(--backcolor); 
}
#refresh {
  background-color: var(--frontcolor);border: 5px solid var(--backcolor);
  font-size: var(--psize);color : var(--backcolor);max-height: 2.1875rem;margin: 0.9375rem; /* here */
}
#refresh:active {background-color: var(--backcolor);color: var(--frontcolor); border-color: var(--frontcolor);}

.bncontact {
  background-color: var(--frontcolor);flex-direction: column;/*width:45vw;*/margin: 0.625rem;width:97vw;
}
#email {
  display: block;font-family: monospace;border: 5px solid var(--backcolor);background-color: var(--frontcolor); 
  color: black;outline: transparent;font-size: 1.25rem;margin: 0.625rem;
}
#message {
  display: block;resize: none;font-family: monospace;border: 5px solid var(--backcolor);background-color: var(--frontcolor); 
  color: black;outline: transparent;font-size: 1.25rem;margin: 0.625rem;overflow: scroll;
}
#email::placeholder , #message::placeholder {
  color: darkgoldenrod;
}
#submit,#reset {
  border: 5px solid var(--backcolor); background-color: var(--frontcolor); color : var(--backcolor);
  font-size: var(--psize); max-height: 2.1875rem;margin: 0.3125rem;
}
#submit:active,#reset:active {
  border: 5px solid var(--frontcolor) ; background-color: var(--backcolor); color : var(--frontcolor);
}

label {
  color: var(--backcolor); padding: 3.125rem;font-size: 1.25rem;
}
#portrait {
  color:red;display:none;
}
address {
  font-style: normal;
}
footer div div a{
  text-decoration: underline;
}

/*::first-letter {font-size: 1.5em;
  color:red;
  font-family: <!-- font here, i like love light on google fonts -->, cursive;
  font-weight: 400;
  font-style: normal;
} /* initial */