@charset "utf-8";

/*Main styles */
html{
	background-color: black;
	height: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

h1,h2,h3,h4,p{
	color: white;
}
p,h2{
	margin: 10px;
}

#rightSide{
	margin-left: 0px;
}

/*Flex box styles */
.flex-container{
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 1;
}
.flex-child{
	flex: 1;
	width: 33.33%;
	display: flex;
	flex-direction: column;
}



/*header */
header{
	border-bottom: solid darkgray 3px;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	margin: 10px;
}

/*link */
a{
	text-decoration: underline;
	color: white;
}
/*footer*/
footer {
    background-color: #333; 
    text-align: center;
    padding: 1em;
    margin-top: auto; 
    border-top: solid darkgray 3px;
}

/*Media styles */
@media only screen and (max-width: 500px){
	.flex-container{
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}
	.flex-child{
		flex-basis: 100%;
		width: 100%;
	}
}