@import url('https://fonts.googleapis.com/css?family=Courgette|Oswald:200&display=swap');

/*mobile phone / any screen size not defined
----------------------------------------------------------------

*/

html {

font-size:16px;
}

body {

 background-image: linear-gradient(to bottom, #0d001a, #0d001a,  #173c4f, #112d3b, #060f14);
font-family: tahoma;
color: #20023d;
font-size:16px;
}

nav li a, nav li a:link, nav li a:visited, nav a, nav a:link, nav a:visited {
color: #286a8a;
font-family: 'Courgette', 'brush script', cursive;
font-size:20px;
//font-weight: bold;
letter-spacing: 0.03em;
text-decoration: none;
}

nav li a:active, nav a:active {
color: #737373;
}


nav li a:hover, nav a:hover {
color: #0d001a;
background-color: #d7eaf4;
//width: 100%;


}


#body_width {
//#0d001a
background-color: #f2f2f3; 
//padding:0.5em;
margin: auto;
width: 76%;
//border:1px green dotted;
}

#body_hd {
background-color: #0d001a; 
text-align: left;
padding-top:0.6em;
margin: auto;
width: 100%;
border-radius: 1.5em;
height: 200px;
}

#body_con {
//border:1px red dotted;
text-align: left;
padding:0.5em;
//padding-top:15px;
//top: -300px;
padding:0.5em;
margin: 0.7em;
background-color: #f2f2f2;
border: 4px solid #737373;
width: 100%;
border-radius: 1.5em;
-webkit-box-shadow: 0.1em -0.1em #400080, 0.2em -0.2em #400080;
 -moz-box-shadow: 0.1em -0.1em #400080, 0.2em -0.2em #400080;
float: center;
}

nav {
border:0px red dotted;

background-color: #f2f2f2;
padding:0.5em;
margin: 0.7em;
border: 4px solid #737373;
width: 100%;
border-radius: 1.5em;
-webkit-box-shadow: 0.1em -0.1em #400080, 0.2em -0.2em #400080;
 -moz-box-shadow: 0.1em -0.1em #400080, 0.2em -0.2em #400080;
float: center;

}


nav li {

display: inline;

}

#muse_head {
font-family: 'Oswald', sans-serif;
//font-family: 'Lobster', cursive;
//font-family: 'Courgette', cursive;
font-size: 7.7em;
//font-size: 100px;
color: #fff;
 text-shadow: 0.02em 0.02em 0.04em #ccc;
// text-shadow: 2px 2px 4px #ccc;

//margin-bottom: 30%;
border:0px red solid;
margin-left:-30px;
}

#moon {

background-color:#1a0033;
width:14em;
border-radius:10em;
height:14em;
margin-left:50px;
-webkit-box-shadow: 1px 1px #26004d, 2px 2px #26004d, 3px 3px #330066, 4px 4px #330066, 5px 5px #400080, 6px 6px #400080, 7px 7px #400080;
 -moz-box-shadow: 1px 1px #26004d, 2px 2px #26004d, 3px 3px #330066, 4px 4px #330066, 5px 5px #400080, 6px 6px #400080, 7px 7px #400080;

}

#moon2 {

background-color:#0d001a;
width:12em;
border-radius:10em;
height:12em;
margin-left:40px;

//-webkit-box-shadow: 1px 1px #b2492c, 2px 2px #b2492c;
// -moz-box-shadow: 1px 1px #b2492c, 2px 2px #b2492c;

}

header {

padding: 1em;

}

nav li, nav ul, ul nav, nav .menu {
display: inline;
width:80%;
//border:1px red dotted;
color:#286a8a;

}

ul {
color:#286a8a;
}

li.menu a, li.menu, .menu, li.menu a:link, .menu
{
color:#286a8a;
//background-color:#f2f2f2;
font-weight: bold;
text-decoration: none;
padding: 0.1em;
//font-family: 'Courgette', cursive;
//font-size:15px;
display: inline;
}


li.menu a:hover, .menu a:hover
{
background-color:#0d001a;
color:#e6ccff;
border-radius:0.2em;
}

li.ia {
list-style-type: lower-roman;
list-style: lower-roman;
list-style-position: inside;
font-size: 11px;
letter-spacing: 0;
display: list-item;
width: 90%;
color: #112d3b;

}



ol.stat, ul.stat {
 -moz-column-count: 2;
    -moz-column-gap: 5px;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    column-count: 2;
    column-gap: 5px;
}


li.stat {
list-style-type: decimal-leading-zero;
list-style: decimal-leading-zero;
list-style-position: inside;

letter-spacing: 0;
display: list-item;
width: 80%;
color: #112d3b;
text-align: left;
}

ul.stata 
{
   height: 60%;
   width: 60%
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}



li.cnt {
list-style-type: none;
list-style: none;
list-style-position: inside;

letter-spacing: 0;
display: list-item;
width: 80%;
color: #112d3b;
text-align: left;
}

a, a:link, a:visited {
color:#286a8a;
border-radius: 0.4em;
text-decoration: none;
padding: 0.2em;
//font-family: 'Courgette', cursive;
//font-size:15px;
font-weight: bold;
}

a:hover {
color:#112d3b;
}




.head, h1 {
font-family: 'Oswald', sans-serif;

//border-bottom:0px dotted #000;
text-align:right;
padding:0px 10px 0px 6px;
font-size:3em;
color:#26004d;
letter-spacing:2.5;

font-weight:bold;
width:90%;
border-radius: 10px;
line-height:1.8em;
//background-color: #cacaca;
background: linear-gradient(to right,  rgba(17,45,59,1), rgba(255,0,0,0)) top left no-repeat;
//background-size: 100% 5px;
}

.head2 
{
font-family: font-family: 'Oswald', sans-serif;
border-bottom:3px solid #4d004d;
text-align:center;
text-transform:lowercase;
padding:0px 12px 0px 6px;
font-size:2em;
color:#286a8a;
letter-spacing:0.5;
font-weight:bold;
width:70%;
border-radius: 5px;
line-height:1.7em;
background-color: #ebf4fa;
//background: linear-gradient(to right,  rgba(17,45,59,1), rgba(255,0,0,0)) top left no-repeat;)
//background-size: 100% 10px;
}


h2 {
font-family: 'Courgette', garamond, serif;
border-bottom:2px solid #d9b3ff;
text-align:center;
padding:0px 12px 0px 6px;
font-size:2em;
letter-spacing:1.5;
font-weight:bold;
width:70%;
border-radius: 10px;
line-height:1.7em;
color:#4d004d;
background-color: #ebf4fa;
//background: linear-gradient(to right,  rgba(17,45,59,1), rgba(255,0,0,0)) top left no-repeat;)
background-size: 100% 10px;
}

.head4, h4 {
font-family: 'Oswald', sans-serif;
border-bottom:0px dotted #000;
text-align:center;
padding:0px 10px 0px 6px;
text-transform:lowercase;

font-size:2em;
//font-size:23px;
color:#26004d;
letter-spacing:2.5;
font-weight:bold;
width:90%;
border-radius: 10px;
line-height:1.5em;
background-color: #d4eefc;
}




.head3, h3 {
font-family: 'Oswald', sans-serif;
border-bottom:0px dotted #000;
text-align:center;
padding:0px 10px 0px 6px;
text-transform:uppercase;

font-size:1.6em;
//font-size:17px;

letter-spacing:2.5;
font-weight:bold;
width:90%;
border-radius: 10px;
line-height:1.5em;
width:60%;
color:#e6ccff;
background-color:#0d001a;
}


table {

font-family: tahoma;
font-size: 1em;
line-height: 15px;
}

ul
{
width:95%;
//border:1px dotted #333;
}

li {
display: inline;
list-style:none;
color:#112d3b;
font-family: tahoma;
font-style:normal;
letter-spacing:2.0;
border:0px solid #545454;
width:110px;
font-size:1em;
font-weight:normal;
}

table .mainc, td .mainc {
width: 400px;
max-width: 500px;
text-align: left;
line-height:50px;

}



b, strong {
//color:#2d6480;
color:#8d56a1;
background-color:;
letter-spacing: 0px;

}

u {
text-decoration: none;
color:#42897d;
font-weight: bold;
}

input, textarea
{
background-color:#e6ccff;
border-bottom:3px solid #286a8a;
border-top:none;
border-right:none;
border-left:none;
font-family:tahoma; 
color:#000;
}

input 
{
padding: 0.5em;
width:250px; 

}

.send {
width: 80px;
background-color:#e6ccff;
border-bottom:3px solid #112d3b;
border-top: none;
border-right:none;
border-left:none;
padding: 5px;
color: #112d3b;
letter-spacing: 4px;
font-weight: bold;
font-size: 1.4em
text-align: center;
}


textarea {
width:250px; 
height: 80px;
}

/* medium screen
----------------------------------------------------------------------------------------*/

@media all and (min-width: 600px) and (max-width: 1099px) {

html {

font-size:11px;
}

body {

font-size:11px;

}

nav li a, nav li a:link, nav li a:visited {

}

nav li a:active {

}

nav li a:hover {

}

#body_width {
width: 90%;

}

#body_hd {

}

#body_con {
width: 90%;
float: centre;
}

nav {
width: 90%;
float: centre;
}


}


/* medium screen
----------------------------------------------------------------------------------------*/

@media all and (min-width: 1100px) and (max-width: 2500px) {

body, html {
font-size: 11px;
}

nav li a, nav li a:link, nav li a:visited, li.menu a, li.menu, .menu, li.menu a:link, nav li a:active, nav li a:hover, li.menu a:hover, nav a, nav a:link, nav a:visited, nav a:active, nav a:hover {
//display: block;
line-height:0.9em;
text-align: left;
border:0px solid red;
padding:0.02em;
margin:0.1em;
//font-size:1.2rem;
//width:90%;
}

ul {
display: block;
}

nav li.menu
{
border:0px solid red;
padding:0.01em;
margin:0.2em;
display: block;
}

#body_width {
width: 82%;

}

#body_hd {

}

#body_con {
width: 73%;
float: right;
}

nav {
width: 20%;
max-width: 22%;
float: left;
padding:0.1em;
text-align: left;
}


li.ia {
font-size: 0.8em;
}

}

/* large screen
----------------------------------------------------------------------------------------*/

@media all and (min-width: 1199px) and (max-width: 4500px) {

body, html {
font-size: 11px;
}

nav li a, nav li a:link, nav li a:visited, li.menu a, li.menu, .menu, li.menu a:link, nav li a:active, nav li a:hover, li.menu a:hover, nav a, nav a:link, nav a:visited, nav a:active, nav a:hover {
line-height:1.3em;
text-align: left;
border:0px solid red;
padding:0.02em;
margin:0.1em;

//width:90%;
}

nav li.menu
{
border:0px solid red;
padding:0.1em;
margin:0.2em;
display: block;
}

#body_width {
width: 82%;

}

#body_hd {

}

#body_con {
width: 73%;
float: right;
}

nav {
width: 20%;
max-width: 22%;
float: left;
padding:0.1em;
text-align: left;
}

li.ia {
font-size: 0.8em;
}


}