@charset UTF-8;

/* Zoey website CSS Document */
/* Basic Elements */
article {
display: flex;
padding:5px;
margin:5px;
}
aside {
display: flex;
flex-direction: column;
position: relative;
right: 0px;
font-size: 20px;
margin-right:auto;
margin-left: auto;
padding:0px;
max-width: 200px;
float: right;
height: 100%;
}
aside > div {
display: flex;
flex-direction: column;
align-items: center;
margin-right:auto;
margin-left:auto;
text-align: center;
padding: 15px;
}
body {
margin:45px auto auto auto;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:16pt;
line-height:120%;
color:#EFE5FA;
font-style:normal;
font-weight:400;
text-transform:none;
background-color:#6017AA;
word-wrap: normal;
}
footer {
max-width:800px;
height:auto;
background-color:#9A4FEB;
margin-left:auto;
margin-right:auto;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-style:italic;
font-size:20px;
padding:15px 0;
text-decoration:none;
border-radius:15px;
}
header {
position:relative;
max-width:920px;
height:auto;
margin-left:auto;
margin-right:auto;
font-size:120px;
text-align:center;
line-height: 90px;
}
nav {
background-color:#9A4FEB;
opacity:.8;
position:fixed;
top:0;
left:0;
right:0;
font-size:12pt;
line-height:110%;
padding:4px 0 3px;

}
nav ul {
list-style-type:none;
margin: 0px auto 0px auto;
padding:0 0 5px 0;
display:flex;
flex-direction:row;
overflow-x: scroll;
flex-wrap: nowrap;
justify-content: space-evenly; 
}
nav li {
display:inline;
padding:6px;
}
nav li a {
color:#FFF;
padding:1px;
text-decoration:none;
}
nav li a.active {
background-color:#CBA7F3;
color:#000;
font-size:14pt;
border:none;
border-radius:8px;
}
nav li a:hover:not(.active) {
color:#FFF;
font-size:14pt;
border:none;
}
section {
display:flex;
flex-direction:column;
justify-content: center; 
}
section > div {
align-content:space-around;
}

p {
margin:2pt;
}
h1 {
margin:5pt;
font-family:Georgia, serif;
font-size:18pt;
line-height:20pt;
font-style:normal;
font-weight:700;
text-transform:none;
}
h2 {
margin:5pt;
font-family:Georgia, serif;
font-size:18pt;
line-height:20pt;
font-style:italic;
font-weight:700;
text-transform:none;
}
h3 {
margin:5pt;
font-family:Georgia, serif;
font-size:16pt;
line-height:17pt;
font-style:italic;
font-weight:700;
text-transform:none;
}
h4 {
margin:5pt;
font-family:Georgia, serif;
font-size:16pt;
line-height:17pt;
font-style:normal;
font-weight:700;
text-transform:none;
}

/* Class Elements */
.center {
display:flex;
flex-direction:row;
justify-content:center;
margin-left:auto;
margin-right:auto;
}
.clickHere a {
display:block;
/* height:30px; */
padding:5px;
/* vertical-align:middle; */
color:#F6D105;
/* font-family:Helvetica, Arial, sans-serif;  */
font-size:.8em;
font-style:normal;
text-decoration:none;
}
.clickHere a:hover {
background-color:#340049;
color:#FFF;
font-size:103%;
}
.closer {
position:absolute;
right:2%;
width:130px;
height:50px;
}
.closer ul {
list-style:none;
text-align:center;
position:relative;
padding:1px;
}
.closer li {
}
.closer a {
display:table-cell;
padding:10px;
vertical-align:middle;
background-color:#EAD4FF;
color:#000000;
border:1px outset #999;
border-radius:6px;
font-family:Helvetica, Arial, sans-serif;
font-size:13px;
font-style:normal;
font-weight:bolder;
line-height:15px;
text-decoration:none;
}
.closer a:hover,a:active {
background-color:#D6AFFB;
color:#000000;
}
.closer a:active {
border:1px inset #999;
}
.closer2 {
position:fixed;
right:5%;
bottom:0;
}
.closer2 a {
display:table-cell;
padding:5px 20px;
vertical-align:middle;
background-color:#377A04;
color:#FFF;
border:1px outset #999;
border-radius:6px;
font-family:Helvetica, Arial, sans-serif;
font-size:13px;
font-style:normal;
line-height:15px;
text-decoration:none;
}
.closer2 a:hover,a:active {
background-color:#66E902;
color:#444;
}
.closer2 a:active {
border:1px inset #999;
}
.construct {
position:fixed;
left:0;
top:40%;
}
.flex_across {
display:flex;
flex-direction:row;
justify-content:center;
flex-wrap:nowrap;
text-align:left;
padding:5px;
}
.flex_across > div {
align-content:center;
padding:5px;
}
.flex_down {
display:flex;
flex-direction:column;
justify-content:center; 
text-align:center;
line-height:120%;
}
.flex_down > div {
align-content:center;
padding:20px;
}
.flex_down a {
font-size:18px;
}

/* Single Elements */

#closeButton {
position:relative;
margin-top:20px;
width:158px;
height:auto;
}
#closeButton a {
display:table-cell;
width:150px;
height:30px;
padding:5px;
vertical-align:middle;
background-color:#A001B4;
color:#FFF;
border:1px outset #999;
border-radius:6px;
font-family:Helvetica, Arial, sans-serif;
font-size:.8em;
font-style:normal;
text-decoration:none;
}
#closeButton a:hover,a:active {
background-color:#EB56FD;
color:#444;
}
#closeButton a:active {
border:1px inset #999;
}