@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;
	text-align: 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;
}


.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;
}



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

.moon3{
    content:url(images/MOON363.jpg);
}

.bg_col_bright3{
	color: #98c6e7;
}

.home4{
	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;
}

.moon4{
    content:url(images/MOON463.jpg);
}

.bg_col_bright4{
	color: #5592c3;
}

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

.moon5{
    content:url(images/MOON563.jpg);
}

.bg_col_bright5{
	color: #e2e39f;
}

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

.moon6h{
    content:url(images/MOON663h.jpg);
}

.bg_col_bright6h{
	color: #66979e;
}

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

.moon12{
    content:url(images/MOON1263.jpg);
}

.bg_col_bright12{
	color: #c3a6a8;
}

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

.moon14{
    content:url(images/MOON1463.jpg);
}

.bg_col_bright14{
	color: #6791c3;
}

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

.moon18{
    content:url(images/MOON1863.jpg);
}

.bg_col_bright18{
	color: #a9d1d0;
}

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

.mm1{
	width: 600px;
	height: 825px;
	background: url('/Users/agus/Documents/WORK/amap/STUDIO/web/new site 2024/amap - DreamWeaver 2024 mar/06 and boxes/images/img500.png') no repeat;
	margin: auto;
}


.projects{
	background-color: #64c075;

}

.about{
	background-color: #4b2984;
	text-align: center;
}

.aboutbd{
	background-color: #4b2984;
	text-align: center;
}

.abouth{
	background-color: #ffac67;
	text-align: center;
}

.gallery{
    background-color: #8ab1c4;
    text-align: center;
}

.view{
    background-color: #000;
    text-align: center;
}

.tadhana{
	background-color: #e8ad2b;
	text-align: center;
}

.teacups{
    background-color: #2452c0;
    text-align: center;
}

.citywide{
    background-color: #75a7bd;
    text-align: center;
}

.elp{
    background-color: #b1b1b1;
    text-align: start;
}

.bardo{
    background-color: #c2c26c;
    text-align: center;
}

.anisland{
    background-color: #e699ad;
    text-align: center;
}

.coda{
    background-color: #183e31;
    text-align: center;
}

.memorywindow{
    background-color: #77a6ff;
    text-align: center;
}

.scattered{
    background-color: #2f2f2f;
    text-align: center;
}

.voideden{
    background-color: #22f906;
    text-align: center;
}

.wold{
    background-color: #134517;
    text-align: center;
}

.torpor{
    background-color: #6249a3;
    text-align: center;
}

.gaia{
    background-color: #fec78f;
    text-align: center;
}

.morandthelittlepeople{
    background-color: #99ccff;
    text-align: center;
}

.piece{
    background-color: #55ed3c;
    text-align: center;
}

.atthesurface{
    background-color: #383f47;
    text-align: center;
}

.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: 80%;

}

nav{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	padding: 14px;
}

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

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

.socials-horizontal{
	
}


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

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

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

.box-3{
	max-width: 100%;
	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: row;
	align-items: center;
	justify-content: center;
    flex-wrap: wrap;

}

.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: 100%;
    padding: 0px;
    border: 0px solid orange;
    margin: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    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{
    padding: 40px;
     border: 40px;
    margin: 40px;

}

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

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


img{
    max-width: 100%;
}

.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;
}

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

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;
    padding: 10px;
}

p{
    color: white;
}

strong{
	font-size: .91rem;
}

.blk{
	color: black;
}

.blu{
    color: #4062cc;
}