Untitled

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
	margin: 0;
	padding: 0;
}

body {
    background-color: #A8DADC;
}

.body {
    max-width: 1500px;
}

.index {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-size: 26px;

	color: #1D3557;

}

.container {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: nowrap;
}

.menu {
	display: flex;
    flex-direction: column;
    width: 500px;
    background-color: #1D3557; /* dark blue */
    padding: 1em;
}

.logo {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

span.logo-text {
    color: #F1FAEE;
}

.menu-list{
	list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.list-link {
    margin: 0.25em;
    display: block;
    padding: 0.5em 1em;
    border-radius: 1em;
    background-color: rgba(29, 53, 87, 0.5);
	cursor: pointer;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease-in;
    transition: background-color 0.2s ease-in;
}

.list-link:hover {
	color: rgba(255, 255, 255, 1);
	background-color: rgba(69, 123, 157, 1);
}

.vertical-line {
	border: 1px solid #ff9a62;
}

div.body {
    background-color: #A8DADC;
}

.footer {
	background-color: #333333; /* dark blue */
    color: #fff; /* white text color */
    text-align: center; /* center the text */
    padding: 2em;
}