/* the below code makes the container display properly without padding around it */

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../assets/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2'),
        url('../assets/fonts/AtkinsonHyperlegible-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html,
body {
	padding: 0;
    position: relative;
	height: 100%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-size: medium;
  	font-family:Atkinson Hyperlegible, Verdana, Geneva, Tahoma, sans-serif;
	/* text-shadow:transparent 5px 5px 5px, rgba(255, 0, 76, 0.112) 1px 1px 1px !important */

}



.container {
	width: 60%;
	min-width:900px;
	 margin: 0 auto; 
	padding: 0;
	min-height: 100vh;
	display:flex;
	flex-direction:column;
	align-items: stretch;
	background-color:#FDF1F1 ;

}

/* main content and navigation */
.maincont {
	display: flex;
	flex-direction: row;
	min-width:900px;
	align-items: stretch;
	min-height: 50vh;
	flex: 9;
	color:#000723 
}

/* section styling */

.title {
    background-color:#000723;
	color:#FDF1F1;
	rotate: 1deg;
	width: fit-content;
	font-variant: unicase;
	padding-right: 10px;
	padding-left: 10px;

}

body {
    background-color:#FDF1F1;
}

li {
	list-style:disc;
}

a {
	color: purple
}

a:hover {
	color: red
}
.navlist:hover {
	rotate: 2deg;
}

.navigation {
    background-color:#FDF1F1;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;

}

.navigationtitle {
    background-color:#000723;
	color:#FDF1F1;
	rotate: -2deg;
	text-align: center;
	font-variant: unicase;


}

.content {

	flex:4;
	padding-left: 10px;
	padding-right: 10px;
	outline-style:none;
	outline-width: 10px;
	outline-color: brown;
}

.footer {
	background-color:#FDF1F1 ;
	text-align: left;

}