@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=block');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-sharp {
  font-variation-settings:
  'FILL' 0,
  'wght' 700,
  'GRAD' 200,
  'opsz' 48
}

:root
{
    --base-color: #210091;
    --highlight-color: #3e00c3;
    --accent-color: #f5f0ff;
}

.bg-five:before {
  background-color: var(--accent-color);
}

html, body, h1,h2,h3,h4, th, nav ul li:first-child, nav ul li.highlight, button,input,optgroup,select,textarea, button, .btn, input[type=button], input[type=submit], input[type=reset], input[type=file], .header-title, .herotext, .questiontext, .statementtext, .article-nav, .article-nav b, .article-body  
{
    font-family: 'Noto Sans', Verdana, Arial, Helvetica, sans-serif;
}

h1,h2,h3,h4, .header-title
{
    font-family: 'Josefin Sans', sans-serif;
}

.header-logotype
{
	filter: invert(25%) sepia(72%) saturate(6130%) hue-rotate(252deg) brightness(55%) contrast(137%);
}

button, .btn, input[type=button], input[type=submit], input[type=reset], input[type=file]
{
    background-color: var(--base-color);
    border-color: var(--base-color);
    /*color: var(--base-color);*/
    height: 38px;
}

.btn-header
{
	color: var(--base-color);
	background-color: #fff;
	border-color: #fff;
}

.btn-primary
{
	color: #fff;
	background-color: var(--base-color);
    border-color: var(--base-color);
    text-transform: none;
}

.btn-secondary, input[type=reset], input[type=file], input.btn-secondary {
  border-color: var(--base-color);
  color: var(--base-color);
  background-color: #fff;
}

/*.button:active:hover:not([disabled])*/
/*button:hover:enabled*/

.btn:hover, .btn:focus,
button:hover:not([disabled]), button:focus,
input[type=submit]:hover, input[type=submit]:focus,
input[type=button]:hover, input[type=button]:focus,
input[type=reset]:hover, input[type=reset]:focus,
input[type=file]:hover, input[type=file]:focus
{
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
}

.popupContainer::before
{
    background-color: var(--base-color);
}

.card
{
    border-top-color: var(--base-color);
}

.header-title
{
    color: var(--base-color);
    margin-bottom: -100%;
    font-size: 2em;
    line-height: 3rem;
}

::-moz-selection {
  color: #fff;
  background: var(--highlight-color);
}

::selection {
  color: #fff;
  background: var(--highlight-color);
}

table.hero
{
    margin-bottom: 30px;
}

table.hero tr td 
{
    text-align: center;
}

table.hero tr:last-child td {
    border-bottom: 0;
    padding-bottom: 30px;
}

table.hero tr:first-child td {
    border-top: 0;
    padding-top: 30px;
    font-weight: bold;
    color: var(--highlight-color);
}

table.hero tr td:last-child {
    padding-right: 30px;
}

table.hero tr td:first-child {
    padding-left: 30px;
    font-weight: bold;
    color: var(--base-color);
}

table.hero tr:hover td
{
    background-color: #fff;
}

@media (max-width: 35em) {
	table.hero
    {
    	font-size: 80%;
    }
}

nav ul li a:hover, nav ul li a:active, nav ul li a.active, nav ul li.selected a {
	text-decoration: none;
	color: var(--highlight-color);
	border-right: 5px solid var(--highlight-color);
}

nav ul li a, nav ul li:first-child, a
{
	color: var(--base-color);
}

a:hover, a:active
{
	color: var(--highlight-color);
}

.huge-o
{
	text-transform: uppercase;
	background-color: var(--base-color);
    border-color: var(--base-color);
    height: auto;
}

input[type=text], 
input[type=password],
input[type=email],
input[type=search],
input[type=url],
input[type=number],
input[type=tel],
textarea,
select:not([multiple])
{
	height: 38px;
}

.card-alert
{
	display: flex;
	align-content: center;
	color: var(--base-color);
	background: #eee;
	border: 1px solid #eee;
}

.card-alert > span.material-symbols-sharp
{
	margin-right: 6px;
}

.alert-primary
{
	color: #fff;
	background: var(--highlight-color);
	border: 1px solid var(--highlight-color);
}

.alert-secondary
{
	color: var(--base-color);
	background: var(--accent-color);
	border: 1px solid var(--accent-color);
}

.card-header.tabbed > h4.selected
{
	background-color: var(--base-color);
	color:#fff;
}

.card-header.tabbed > h4:hover
{
	background-color: var(--accent-color);
	color: #000;
	cursor: pointer;
}

.card-header.tabbed > h4.selected:hover
{
	background-color: var(--highlight-color);
	color:#fff;
}