:root {
 --text: #000000;
 --bg: #ffffff;
 --accent: #ee6c4a;
 --modalbg: rgba(0,0,0,0.8);

 --ctwidth: 700px;
}

body {
 font-family: 'Open Sans', sans-serif;
 background-color: var(--bg);
 color: var(--text);
 text-align: center;
}

.logo-row {
 width: 250px;
 margin: 0 auto;
}

.logo {
 width: 100%;
 height: auto;
 text-align: center;
}

.dmcontent {
 display: none;
}

.lmcontent {
 display: block;
}

.gbutton {
 background-color: var(--bg);
 color: var(--text);
 border-color: var(--text);
 border-radius: 15px;
 margin: 15px 5px 0;
 padding: 10px;
/* height: 50px;*/
 font-size: 15px;
 line-height: 1.2;
 justify-content: center;
 align-items: center;
 font-family: 'Open Sans', sans-serif;
 font-weight: bold;
}

.ginput {
 background-color: var(--bg);
 color: var(--text);
 border-color: var(--text);
 border-radius: 15px;
 margin: 15px 5px 0;
 padding: 15px;
 height: 50px;
 font-size: 15px;
 line-height: 1.2;
 justify-content: center;
 align-items: center;
 font-family: 'Open Sans', sans-serif;
 font-weight: bold;
 width: 100%;
}

.p1 {
 text-align: justify;
 max-width: var(--ctwidth);
 margin-left: auto;
 margin-right: auto;
}

.p1c {
 text-align: center;
 max-width: var(--ctwidth);
 margin-left: auto;
 margin-right: auto;
}

.ph {
 text-align: center;
 max-width: var(--ctwidth);
 margin-left: auto;
 margin-right: auto;
 font-size: 1.6rem;
 font-weight: bold;
}

.pxc {
 display: flex;
}

.pxd {
 flex: 1;
 border: 0px;
}

.clogo {
 border-radius: 10px;
}

hr {
 max-width: var(--ctwidth);
 margin-top: 20px;
 margin-bottom: 20px;
}

.menubar {
 overflow: hidden;
 background-color: var(--bg);
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 align: center;

 display: flex;
 justify-content: center;
}

.menubar a {
 float: left;
 font-size: 16px;

 text-align: center;
 padding: 16px;
 text-decoration: none;
 border-radius: 15px;
 color: var(--text);
 font-weight: bold;
}

.menubar a:visited {
 background-color: var(--bg);
}

.menubar a:hover {
 background-color: var(--accent);
}

.menubar a:active {
 background-color: var(--accent);
}

.submenu {
 float: left;
 overflow: hidden;
}

.submenu .subbtn {
 font-size: 16px;  
 border: none;
 outline: none;
 background-color: var(--bg);
 font-family: inherit;
 margin: 0;

 text-align: center;
 padding: 16px;
 text-decoration: none;
 border-radius: 15px;
 color: var(--text);
 font-weight: bold;
}

.menubar a:hover, .submenu:hover .subbtn {
 background-color: var(--accent);
}

.submenu-content {
 display: none;
 position: absolute;
 color: var(--text);
 background-color: var(--bg);
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;

 border-style: solid;
 border-color: var(--accent);
 border-width: 2px;
 border-radius: 15px;
}

.submenu-content a {
 float: none;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;
 color: var(--text);
}

.submenu-content a:hover {
 background-color: var(--accent);
}

.submenu-content a:active {
 background-color: var(--accent);
}

.submenu:hover .submenu-content {
 display: block;
}

/*.grecaptcha-badge { 
 visibility: hidden !important;
}*/

a.alink {
 color: var(--text);
 text-align: center;
 padding: 16px;
 text-decoration: none;
 border-radius: 15px;
}

a.alink:visited {
 color: var(--text);
 text-decoration: none;
}

a.alink:hover {
 color: var(--accent);
 text-decoration: none;
}

a.alink:active {
 color: var(--accent);
 text-decoration: none;
}

.modal{
 position: fixed;
 top: 0px;
 left: 0px;
 width: 100%;
 height: auto;
 background: var(--bg);
 overflow-x: hidden;
 color: var(--text);
 padding-top: 25px;
 padding-bottom: 25px;
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
}
.modal_button{
 cursor: pointer;
 border: 0;
 font-size: 1.3rem;
 padding: 0.5rem 2rem;
}
.modal{
 display:none;
 animation: pop 0.3s linear;
}
@keyframes pop {
 0%{
  transform: scale(0);
 }
 25%{
  transform: scale(.45);
 }
 50%{
  transform: scale(.75);
 }
 75%{
  transform: scale(1.2);
 }
 100%{
  transform: scale(1);
 }
}
@keyframes reversePop {
 0%{
  transform: scale(1);
 }
 25%{
  transform: scale(1.2);
 }
 50%{
  transform: scale(.75);
 }
 75%{
  transform: scale(.45);
 }
 100%{
  transform: scale(0);
 }
}

@media (prefers-color-scheme: dark) {
 :root {
  --text: #ffffff;
  --bg: #000000;
  --accent: #ee6c4a;
  --modalbg: rgba(255,255,255,0.8);
 }

 .dmcontent {
  display: block;
 }

 .lmcontent {
  display: none;
 }
}