@charset "UTF-8";
/* CSS Document */

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


body{
	display: flex;
	justify-content: center;
	background-color: #4062cc;
	font-family: monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: 0.81rem;
	
}

.wrapper{
    display: flex;
    flex-flow: wrap;
    text-align: center;
    justify-content: space-evenly;
}

.wrapper > * {
    padding: 10px;
    margin: 0px;
    flex: 1 100%;
    border-radius:0px;
}




@media all and (min-width: 800px){
.main{
    flex: 3;
    }

.aside{
    flex: 1;
    }

.aside1{
    order: 3;
}

.aside2{
    order: 1;
}
.main{
    order: 2;
}

.footer{
    order: 5;
}
}

.main{
    display: flex;
    justify-content: center;
}

.aside{
    display: flex;
    justify-content: center;
}

.footer{
    display: flex;
    justify-content: center;
}

.home{
	display: flex;
	justify-content: center;
	background-color: #4062cc;
	font-family: monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: 0.81rem;
	text-align: center;
}

.bg_col_bright{
	color: #5592c3;
}

.home1{
	display: flex;
	justify-content: center;
	background-color: #72b0d5;
	font-family: monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: 0.81rem;
	text-align: center;
}

.moon1{
    content:url(images/MOON163.jpg);
}

.bg_col_bright1{
	color: #b9dad1;
}

button{
    cursor: pointer;
    background-color: #72b0d5;
    width: 40px;
    height: 40px;
    border: 0px none;
    margin: 0px;
    padding: 0px;
}

.button{
    color: #72b0d5;
}

.home1-{
	display: flex;
	justify-content: center;
	background-color: #154f8a;
	font-family: monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: 0.81rem;
	text-align: center;
}

.moon1-{
    content:url(images/MOON163-.jpg);
}

.bg_col_bright1-{
	color: #c1944f;
}


.customcursor02{
    cursor: url("cursors/wold_notes_02.gif") 50 50, auto;
}

.customcursor13{
    cursor: url("cursors/wold_notes_13.gif") 50 50, auto;
}

#mmimg{
	width: 600px;
	height: 825px;
	margin: auto;
	text-align: center;
}

.mm1{
	background: url(images/img500.png);
}

.inver{
    content: url(images/img500.png);
    width: 100%;
}

.mm1c{
	content: url(images/img500.png);
}

.mm2c{
	content: url(images/img500i180.png);
	    width: 100%;
}

.pngplay{
    content: url(images/notes_v01-002_1000857i.png);
    width: 100%;
}

.pngmlay{
    content: url(images/notes_v01-003_10001000.png);
    width: 100%;
}

.gifplay{
    content: url(images/wold_notes_sprite_02.gif);
    width: 100%;
}

.gifmlay{
    content: url(images/wold_notes_sprite_03.gif);
    width: 100%;
}


.row-controls{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
}

.previous-colours{
    background-color: #0c818b;
	background-color: #fec82e;
	text-align: center;
}

.container{
	max-width: 100%;
}

nav{
    max-width: 600px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 14px;
	width: 60%;
}

.yt-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.yt-embeds {
  aspect-ratio: 16 / 9;
}

.socials-horizontal{
	
}

.header{
    
    padding: 0px;
     border: 0px solid orange;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box-1{
	max-width: 600px;
	padding: 0px;
 	border: 0px solid orange;
	margin: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.box-2{
	max-width: 600px;
	padding: 0px;
 	border: 0px solid orange;
	margin: 0px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}

.box-2-1{
	max-width: 100%;
	padding: 0px;
 	border: 0px solid orange;
	margin: 0px;
}

.box-2a{
	max-width: 600px;
	padding: 0px;
 	border: 0px solid orange;
	margin: 0px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}

.box-3{
	max-width: 600px;
	padding: 0px;
 	border: 0px solid orange;
	margin: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.box-4{
	padding: 10px;
 	border: 0px solid orange;
	margin: 0px;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.box-5{
	padding: 0px;
 	border: 0px solid orange;
	margin: 0px;
	min-height: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.box-5a{
    padding: 0px;
     border: 0px solid orange;
    margin: 0px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.box-6{
	padding: 0px;
 	border: 0px solid orange;
	margin: 0px;
	min-height: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.box-7{
    padding: 0px;
     border: 0px solid orange;
    margin: 0px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box-8{
    max-width: 600px;
    padding: 0px;
    border: 0px solid orange;
    margin: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

}

.box-8-1{
    max-width: 100%;
    padding: 0px;
    border: 0px solid orange;
    margin: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}

.box-9{
    padding: 0px;
    border: 0px solid orange;
    margin: 0px;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box-10{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

}

.box-11{
    max-width: 120px;
}

.box-12{
    padding: 60px;
     border: 60px;
    margin: 60px;

}

.box-13{
    width: 600px;
}


.socials-horizontal{
	display: flex;
	justify-content: center;
}


img{
    max-width: 100%;
}

.i300{
    max-width: 100%;
    padding: 20px;
    border: 0px;
    margin: 0px;
}



.g{
	max-width: 100%;
    padding: -2px;
     border: -2px;
    margin: -2px;
}

.gg{
	max-width: 300px;
    padding: -2px;
     border: -2px;
    margin: -2px;
}

.l{
    max-width: 140px;
}

.ls{
    max-width: 70px;
}


.social{
	max-width: 80px;
	padding: 5px;
}

.logo{
	width: 120px;
	padding: 10px;
}

.zlogo{
    position: absolute;
    width: 120px;
	padding: 10px;
	z-index: 1;
}


.rounded{
    width: 120px;
    border-radius: 150px;
    z-index: -1;
    position: relative;
}

.logom{
	width: 140px;
	padding: 10px;
}

.margin{
    margin: 0px;
    border: 20px;
}

a{
	color: white;
	text-decoration: none;
}

a:link{
	color: white;
}

a:hover{
	color: black;
}
a:active{
	color: whitesmoke;
}
a:visited{
	color: white;
}


h1{
	color: white;
	font-family: monospace;
	font-size: 1rem;
}

h2{
    color: black;
}

p{
    color: white;
}

strong{
	font-size: .91rem;
}


.blu{
    color: #4062cc;
}