/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=53K0W0kllllaFw0g0qFqFg0w0aF */
/* Feel free to copy&paste color codes to your application */
/* As hex codes */

:root {

	--color-primary-0: #3E5256 ;	/* Main Primary color */
	--color-primary-1: #C8D6D9 ;
	--color-primary-2: #637A7E ;
	--color-primary-3: #1B292B ;
	--color-primary-4: #0A181B ;

	--color-primary-0: #362D3B; 	/* Main Secondary color (1) */
	--color-primary-1: #B2A1BB; 
	--color-primary-2: #675671; 
	--color-primary-3: #1D1222; 
	--color-primary-4: #0E0512; 

	--color-primary-0: #283535; 	/* Main Secondary color (2) */
	--color-primary-1: #94ADAD; 
	--color-primary-2: #4C6565; 
	--color-primary-3: #101F1F; 
	--color-primary-4: #041010; 

}

body {
	color: var(--color-primary-1); 
	background-color: var(--color-primary-4);
	padding-left: 10%;
	padding-right: 10%;
} 

h1 {
	color: var(--color-primary-1);
	background-color: var(--color-primary-4);
	text-align: center;
	top: 0px;
}

h2 {
	color: var(--color-primary-1);
	background-color: var(--color-primary-4);
	text-align: center;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--color-primary-1);
	top: 0px;
}

li {
    float: left;
    border-right: 1px solid var(--color-primary-2);
}

li:last-child {
	border-right: none;
}

li a, .dropbtn {
    display: inline-block;
    color: var(--color-primary-4);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    width: 140px;
}

.dropbtnact {
    display: inline-block;
    color: var(--color-primary-4);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    width: 140px;
    background-color: var(--color-primary-0);
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
	color: var(--color-primary-1);
    background-color: var(--color-primary-4);
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-primary-1);
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px var(--color-primary-4);
    z-index: 1;
}

.dropdown-content a {
    color: var(--color-primary-4);
    background-color: var(--color-primary-1);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
	background-color: var(--color-primary-2)
	}

.dropdown:hover .dropdown-content {
    display: block;
}

.active {
	background-color: var(--color-primary-0);
}

.news {
	color: black;
	background-color: white;
	padding: 10px;
	font-size: x-large;
}

.mainblock {
	width: 30%;
	padding: 10px; 
	border: 20px solid black; 
	min-width: 200px; 
	max-width: 700px; 
	display: inline-block; 
	font-size: large;
	vertical-align: text-top;
}

.life {
	text-align: center;
	padding: 5px;
	
}