html,body {
background-color: #000000;
font-size:100%;
margin:0px;
padding:0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
 background-image: url(images/bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}


::-moz-selection {
color:#848484;
background-color: #d5dfef;
}

::selection {
color:#848484;
background-color: #d5dfef; 
}

::-webkit-scrollbar {
width:0.75rem; 
background: #FFFFFF;  
}

::-webkit-scrollbar-thumb {
 background: linear-gradient(to bottom, #a37da0, #513390); /* your gradient colors */
  /* Optional: add border-radius for a rounded handle */
  border-radius: 10px;
-webkit-border-radius: 0.625rem;
-moz-border-radius: 0.625rem;
border-radius: 0.625rem;
}


.content-first img {
max-width: 100%;
height: auto;	
}


a:link, a:visited {
color:#b171a8;
font-weight: 600;
text-decoration: none;

}

a:hover {
  text-shadow: 0 0 15px #ffc, 0 0 20px #fff; /* Adds glowing color */
}

.center {
text-align: justify;
text-align-last: center;
}

.justify {
text-align: justify;
}


.card {
filter: grayscale(100%) opacity(0.5);
-webkit-filter: grayscale(100%) opacity(0.5);
width:12%;
height: auto;
margin:0 1%;
} 


.header img {
width:100%;
display: block;
-webkit-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
height: auto;
}

.header {
position: relative;
width: 100%;
height: auto;
}

.navi-wrap {
position: absolute;
max-width: 100%;
bottom: 0px;
left:0px;
right: 0px;
z-index: 999999;
}

.line {
display: block;
padding:0.4% 0px;
width: 100%;
margin-bottom: 0.9375rem;
background-color: rgba(115, 46, 178, 0.3);
}

.navi-line {
padding:3% 0px;
border-bottom:;
background-color: rgba(115, 46, 178, 0.3);
width: 100%;
}



 .top {
background-color: #340b62;
width: 100%;
height: 0.125rem;
}
 
.justify {
text-align: 
}

.center {
text-align: center;
}

.divider {
text-align: center;
display: block;
margin:3.125rem auto;
}

.divider img {
width:100%
height: 100%;
}

 .links {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.8125rem;
padding:0px 0px;
color:#530ea2;
text-transform: uppercase;
}



.footer p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.25rem;
font-size: 0.5625rem;
text-align: center;
color:#ffffff;
}
       

.footer {
-webkit-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
padding:0.625rem 2.1875rem;
background-color: #530ea2;
}

.links a, .links a:link, .links a:visited {
color:#530ea2;
line-height: 2.5rem;
text-decoration: none;
}


 .content-first {
width: 70%;
margin: 8.125rem auto;
} 


.content-first p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#3d3d3d;
line-height: 2.8125rem;
}


ul {
list-style-type: square;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#441f71;
line-height: 2.8125rem;
}

bold {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#b788f1;
}

ol {
list-style-type: lower-alpha;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#c9a9f0;
line-height: 2.8125rem;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Vollkorn:ital,wght@0,600;1,500&display=swap');

:root {
	--type-body: Open Sans, Helvetica, Arial, sans-serif;
	--type-quote: Vollkorn;
	--border-rad: 7px;
	--accent-color: hsla(274 55.9% 76.9%);
	--quote-bg: hsl(0 0% 97% / 0.80);
}


*,
*::before,
*::after {
	box-sizing: border-box;
}

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

a:hover,
a:focus {
	text-decoration: strike;
}


.article {
	max-width: 900px;
	margin: auto;
}

h1 {
	width: max-content;
	margin: 0 auto 1.8em;
	box-shadow:
		0 2px 0 var(--accent-color),
		0 4px 0 white,
		0 6px 0 var(--accent-color);
	font: 1.4rem var(--type-quote);
	color: hsl(0 0% 25%);
}

blockquote {
	position: relative;
	margin: 40px 0;
	padding: 1.6em 2.4em 1.6em calc(1.4em);
	font: italic 0.9rem var(--type-quote);
	background: var(--quote-bg) no-repeat left);
	border-radius: var(--border-rad);
	border: 6px solid white;
	box-shadow: 2px 2px 2px hsl(0 0% 0% / 10%);
	text-indent: 2.6em;
}

@media (min-width: 768px) {
	blockquote {
		margin: 40px 60px;
	}
}

blockquote::before {
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: var(--border-rad);
	box-shadow:
		inset -2px -2px 1px hsl(0 0% 100%),
		inset 2px 2px 4px hsl(0 0% 0% / 20%);
}

blockquote::after {
	content: "❝";
	position: absolute;
	z-index: 1;
	left: 50%;
	top: -2px;
	transform: translate(-50%, -50%);
	width: 1.3em;
	height: 1.3em;
	background: white;
	box-shadow: 0 4px 5px -1px hsla(0 0% 0% / 20%);
	border-radius: 999px;
	display: grid;
	place-content: center;
	padding-top: .5em;
	color: var(--accent-color);
	font-size: 36px;
	font-style: normal;
	text-indent: 0;
}


cite {
	display: block;
	margin-top: 30px;
	text-indent: 0;
	text-align: center;
	font: bold .9rem var(--type-body);
	text-transform: uppercase;
	color: hsla(274 55.9% 76.9%);
}

@media (min-width: 768px) {
	cite {
		margin-left: calc(1rem - var(--quote-image-width));
	}
}

.cite-last-name {
	background: var(--accent-color);
	color: var(--quote-bg);
}



.controls {
	position: fixed;
	bottom: 10px;
	right: 10px;
	font-size: 0.8em;
	opacity: 0.7;
	transition: .2s;
}

.controls:hover,
.controls:focus {
	opacity: 1;
}

.controls label {
	font-weight: bold;
	text-transform: lowercase;
}

.controls input {
	display: block;
	width: 100%;
	border: 0;
	outline: none;
	padding: 0;
}

.content-first h1::first-letter{
font-weight: 800;
color:#937db0;
}


.content-first h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1.875rem;
color:#000000;
padding-bottom: 0.625rem;
text-transform: uppercase;
line-height: 2.5rem;
}


.content-first h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1rem;
color:#937db0;
text-transform: uppercase;
line-height: 2.5rem;
}


strong {
font-weight: 700;
}


p i {
letter-spacing: 0.0625rem;
color:#1c40af;
}


p strong {
color:#ff66a3;
font-weight: 700;
}


 .flex {
display: flex;
width:90%;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}

.navi {

}

.navi a, .navi a:link {
color:#ffffff;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin:0px 1.375rem;
font-size: 1.0205rem;
vertical-align: middle;
line-height: 3.75rem;
letter-spacing: 0.105rem;
text-transform: uppercase;
}


.vertical-line {
margin-left: 0.875rem;
margin-right: 0.625rem;
}



 .logo{
padding-left:3%;
font-family: 'Open Sans', sans-serif;
font-size: 2.375rem;
line-height: 3.75rem;
text-transform: uppercase;
}

.mobile{
width: 100%;
text-align:  center;
padding-left:3%;
font-family: 'Open Sans', sans-serif;
font-size: 1.5625rem;
line-height: 3.75rem;
text-transform: uppercase;
cursor: pointer;
display: none;
}

.main-head {
display: block;
}

.mobile-h {
display: none;
}


@media screen and (max-width: 400px) {
  
.show a:link { line-height: 2.5rem; margin: 0.625rem;
}

.main-head { display: none;
}
 
.mobile-h { display: block; }

}

@media screen and (max-width: 1000px) {

.logo, .navi, .line {  display: none;  } 

.show { display: block; width: 100%; text-align: center; } 

.show a:link { font-size: 0.625rem; }

.mobile{ font-size: 1.125rem; text-align: center; display: block; }

}



@media screen and (min-width: 1440px) { 
html  {
 font-size: 106%;
} }


@media screen and (min-width: 1600px) { 
html  {
 font-size: 116%;
} }


@media screen and (min-width: 1680px) { 
html  {
 font-size: 123%;
} }


@media screen and (min-width: 1920px) { 
html  {
  font-size: 141%;

} }
 

@media screen and (min-width: 2560px) { 
html  {
  font-size: 188%;

} }

.collecttable {
	display: inline-block;
	vertical-align: top;
	width: 51%
	padding: 0;
	margin: 0;
	line-height: 0;
}