@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@300&display=swap');


body{
    background-color: #7c7c7e;
}

#roa{
	text-align: center;
}
#roa img{
	border-radius: 20px;
	box-shadow: 8px 8px 10px black;
	max-width: 100%;
}


h1{
	color: brown;
	font-family: 'Gemunu Libre', sans-serif;
	text-align: center;
    font-size: 3em;

}

#text, #events{
	font-size: larger;
}


p {
	font-family: 'Gemunu Libre', sans-serif;
}

header nav{
    margin-right: 5em;
}

header img{
	width: 50%;
}

#Bild {
	text-align: center;
}

#Widget{
	text-align: center;
}

main{
	display: flex;
	flex-flow: row wrap;
}

h2{
	text-align: center;
}


footer {
	border-top: 1em solid #898992;
	border-top-left-radius: 2em;
	border-top-right-radius: 2em;
	border-bottom: 1em solid #898992;
	border-bottom-left-radius: 2em;
	border-bottom-right-radius: 2em;
    background-color: #6c6c80;
	text-align: center;
	margin-top: 1em;
}

iframe{
	border-radius: 10px;
}


#middle2 li{
	margin-bottom: 1em;
	list-style: none;
	margin-left: 1em;
	font-size: 1.5em;  
	width: 100%;
	background-color: #322c55;
	border-radius: 5px;
	transform: skew(-15deg);
}

#middle2 ul{
	display: flex;
	margin-right: 5em;
	flex-direction: column;
}



#middle2 a {
	text-decoration: none; 
	font-weight: bold;
	text-align: center;
	color: lime; 
	background-color: rgba(255,255,255,0.2);
	transition: all 1s;
    border-radius: 5px;
    display: block;
}

#middle3 ul{
	display: flex;
	margin-right: 5em;
	flex-direction: column;
}



#middle3 li{
	color: yellow; 
	font-weight: bold;
	margin-bottom: 1em;
	text-align: center;
	list-style: none;
	margin-left: 1em;
	font-size: 1.5em;  
	width: 100%;
	background-color: #3019b3;
	border-radius: 5px;
	transform: skew(-15deg);
}




article{
	padding: 1em;
	flex: 12 0 0%;
}

#events{
	text-align: center;
}




nav ul {
	display: flex;
	flex-direction: column;
} 

nav li {
	margin-bottom: 1em;
	list-style: none;
    margin-left: 1em;
	font-size: 1.5em;  
	width: 100%;
	background-color: #322c55;
    border-radius: 5px;
	transform: skew(-15deg);
}


nav a {
	text-decoration: none; 
	font-weight: bold;
	text-align: center;
	color: lime; 
	background-color: rgba(255,255,255,0.2);
	transition: all 1s;
    border-radius: 5px;
    display: block;
}
nav a:focus,
nav a:hover,
#middle2 a:focus,
#middle2 a:hover{    
	background-color: lightyellow;
	color: blue;
	transition: all 0.2s;
    border-radius: 5px;
}

@media (min-width: 60em) {
	nav ul, article, #middle2 ul{	
		flex-direction: row;  
	}	
	nav li, #middle2 li {
		font-size: 2em;
	}  
	nav a, #middle2 a{
		display: block;
	}
}