:root {
  --bg-color: #1c1107;
  --menu-bg-color: #342418;
  --border: #594433;
  --header-text-color: #e4cbac;
  --link-color: #8eba5f;
  --link-hover: #ab442f;
}

* {
/*	outline: 1px dotted red;*/
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
	color: white;
	background: url("img/bg-min.png") repeat var(--bg-color);
	background-size: 350px;
	background-position-y: top;
}

h1 {
    text-transform: uppercase;
    font-family: 'Kanit', sans-serif;
    border-bottom: 3px solid var(--border);
    color: var(--header-text-color);
    background: var(--menu-bg-color);
}

h2, h3, h4, h5, h6 {
	font-family: 'Kanit', sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	color: var(--header-text-color);
}

a {
	color: var(--link-color);
}

a:hover {
  color: var(--link-hover); 
}

span {
	white-space: nowrap;
}

strong {
	color: var(--header-text-color);
}

.container {
	max-width: 1200px;
}

.container>.border {
	border: 5px solid white;
    border-radius: 20px;
    margin: 40px auto;
    background: var(--bg-color);
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);
}

.container>.border>.border-inner{
    border: 5px solid var(--border);
    margin: 3px;
    box-shadow: 0 0 0 3px var(--link-color);
    border-radius: 9px;
    padding-bottom: 40px;
}

.header {
    padding-bottom: 0;
    background: url(img/leiria-castle.jpg) no-repeat, linear-gradient(90deg, rgba(254,231,213,1) 0%, #f9dfd2 25%, rgb(250 222 208) 50%, rgba(254,231,213,1) 100%);
    background-size: 100%;
    background-position-y: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-height: 450px;
    display: flex;
    flex-direction: column;
}

.logo {
	background: url(img/RRR.png) no-repeat, white;
    background-size: 100%;
    width: 180px;
    height: 180px;
    margin: auto;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
    border-radius: 50%;
}

.sponsor {
	background: url(img/[...].png) no-repeat, white;
    background-size: 100%;
    width: 300px;
    height: 300px;
    margin: auto;
    margin-bottom: 50px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
    border-radius: 50%;
}

.title {
	background: var(--bg-color);
    border-top: 3px solid var(--border);
}

.header h1, .header h2 {
	text-align: center;
	margin: 0;
	padding: 1rem;
}

.header h2 {
	font-size: 2em;
}

section.content{
	margin: 0 2em;
}

.navbar {
	border-top: 3px solid var(--border);
    border-bottom: 3px solid var(--border);
    margin-bottom: 40px;
}

.navbar ul {
	background: var(--menu-bg-color);
	list-style: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 1em;
	margin: 0;
}


.navbar li {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.2em;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

.navbar li a {
	text-decoration: none;
	padding: 0.25em 1em;
	transition: 0.3s all;
}

.navbar li a:hover {
	background: var(--border);
    color: var(--header-text-color);
}

.image-link {
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    width: 50%;
    position: relative;
    padding: 0px;
    margin: 0;
    border: 3px solid var(--link-color);
}

.image-link img {
	width: 100%;
}

@media (max-width: 999px) {
	.navbar ul {
		flex-direction: column;
		padding: 0;
	}
	.navbal li {
		width: 100%;
	}
	.navbar a {
		display: block;
		width: 100%;
		text-align: center;
	}
	.header {
		background-position-y: top;
	}
}

@media (max-width: 520px) {
	.logo {
		width: 100px;
		height: 100px;		
	}
}