header {
width:100%;
margin-left:auto;
margin-right:auto;
z-index:2;
position:absolute;
background:url('photograph.png') top left no-repeat;
background-size:auto;
top:0;
height:300px;
}

header h1 {
font-family: 'Fredoka One', Verdana;
letter-spacing:2px;
font-weight:normal;text-align:center;
font-size:69px;
width:100%;
  text-shadow:
   -2px -2px 0 #555964,  
    2px -2px 0 #555964,
    -2px 2px 0 #555964,
     2px 2px 0 #555964;
}

a:link, a:visited {
color:#B02;
text-decoration:none;
}

a:active, a:hover {
color:#04A;
border-bottom:1px solid #04A;
transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;
}

body {
color:#D2E4EA;
font-family:Verdana;
font-size:16px;
width:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:180px;
background:#555964;
}

main {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background:#a0acb4;
color:#222;
width:80%;
padding:18px;
margin-left:auto;
margin-right:auto;
text-align:left;
line-height:27px;
z-index:1;
}

main p {
margin-left:10%;
margin-right:10%;
}

#welc {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background:url('inkupo.png') left no-repeat #D2E4EA;
color:#222;
  text-shadow:
   -2px -2px 0 #D2E4EA,  
    2px -2px 0 #D2E4EA,
    -2px 2px 0 #D2E4EA,
     2px 2px 0 #D2E4EA,
   -2px -2px 10px #D2E4EA,  
    2px -2px 10px #D2E4EA,
    -2px 2px 10px #D2E4EA,
     2px 2px 10px #D2E4EA,
   -2px -2px 10px #D2E4EA,  
    2px -2px 10px #D2E4EA,
    -2px 2px 10px #D2E4EA,
     2px 2px 10px #D2E4EA;
width:70%;
padding:9px 9px 9px 60px;
margin-left:auto;
margin-right:auto;
text-align:center;
line-height:27px;
z-index:3;
position:relative;
}

h2 {
font-family: 'Fredoka One', Verdana;
letter-spacing:2px;
font-weight:normal;text-align:center;
font-size:28px;
}

h3 {
font-family: 'Fredoka One', Verdana;
letter-spacing:2px;
font-weight:normal;text-align:center;
font-size:24px;
}

.bigtext {
font-family: 'Fredoka One', Verdana;
letter-spacing:2px;
font-weight:normal;text-align:center;
font-size:24px;
}

.centre {
text-align:center;
}

main table {
margin-left:auto;
margin-right:auto;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background:#D2E4EA;
padding:6px;
}

main table tr {
vertical-align:middle;
}

main table td {
padding:3px;
}

main table td.doot {
padding:20px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background:#a0acb4;
border:6px solid #D2E4EA;
vertical-align:middle;
max-width:400px;
}

main table td img {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding:0;
border:6px solid #FFF;
vertical-align:middle;
}

main table td img:hover {
border: 6px solid #a0acb4;
}

ul.plainlist {
	margin-left:12%;
	margin-right:12%;
}

ul.socials, ul.updates {
list-style:none;
width:369px;
padding:0;
margin-left:auto;
margin-right:auto;
}

ul.socials li {
border-bottom:2px dashed #222;
margin:10px;
padding:4px;
}

nav {
float:left;
position:absolute;
z-index:3;
width:10%;
padding:0;
margin:0;
margin-top:340px;
left:0;
top:0;
}

nav ul {
list-style:none;
width:369px;
padding:0;
margin-left:auto;
margin-right:auto;
}

nav ul li {
font-family: 'Fredoka One', Verdana;
letter-spacing:2px;
font-weight:normal;text-align:center;
font-size:22px;
padding:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background:#a0acb4;
border:6px solid #FFF;
vertical-align:middle;
max-width:200px;
margin:5px;
overflow:hidden;
}

nav ul li.li-pages {
background:#242833;
border:6px solid #242833;
}

nav ul li.li-1 {
background:#73FFCA;
}

nav ul li.li-2 {
background:#73BBFF;
}

nav ul li.li-3 {
background:#D673FF;
}

nav ul li.li-4 {
background:#FFA373;
}

nav ul li.li-5 {
background:#FFF873;
}

nav ul li.li-6 {
background:#ABFF73;
}

nav a:link, nav a:visited {
color:#222;
border-bottom:0px;
}

nav a:active, nav a:hover {
color:#04A;
}

nav ul li:active, nav ul li:hover {
background:#D2E4EA;
border:6px solid #a0acb4;
}

nav ul li.li-pages:active, nav ul li.li-pages:hover {
background:#242833;
border:6px solid #242833;
}

nav ul li a {
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}

footer {
width:80%;
padding:10px;
margin-left:auto;
margin-right:auto;
}

@media (max-width:1240px) {

main {
margin-left:210px;
width:75%;
}

}

@media (max-width:1070px) {

main {
margin-left:auto;
width:80%;
}

nav {
float:none;
position:static;
width:100%;
padding:10px;
margin-left:auto;
margin-right:auto;
margin-top:0;
list-style-type: none;
}

nav ul li.li-pages {
display:block;
margin-left:auto;
margin-right:auto;
max-width:150px;
}

nav ul {
display:inline;
}

nav li {
display:inline-block;
}

}

@media (max-width:800px) {

header h1 {
font-size:50px;
width:50%;
margin-left:auto;
margin-right:auto;
}

main {
width:100%;
padding:18px 0px 18px 0px;
margin:0;
}

main table {
width:90%;
}

main p {
width:80%;
margin-left:auto;
margin-right:auto;
}

ul {
width:300px;
}

}