:root {
  --main-color: white;
  --head-color: rgba(9,52,91,1);
  --background: #C0D9FF url('img_int/background.jpg') fixed center;
  --color-red: #9F433E;
  --color-blue: #48607E;
  --color-green: #5F815A;
  --color-orange: #C6935F;
}

.bold {
  font-weight: bold;
}

.center {
  text-align: center;
}

.floatRight {
  float: right;
  margin-left: 1em;
}

.floatLeft {
  float: left;
  margin-right: 1em;
}

.white {
  color: white;
}
.black {
  color: black;
}
.red {
  color: var(--color-red);
}
.blue {
  color: var(--color-blue);
}
.green {
  color: var(--color-green);
}
.orange {
  color: var(--color-orange);
}
.gray,
.grey {
  color: gray;
}

body {
	font-family: "Nunito", Arial, sans-serif, serif;
  font-optical-sizing: auto;
	margin: 0;
	padding: 0;
  color: var(--main-color);
  background: var(--background);
}
a,
.likeA {
  text-decoration: underline dashed 1px;
  color: var(--main-color);
  cursor: pointer;
}
a:hover,
.likeA:hover {
  color: yellow;
  text-decoration: underline solid;
}

h1, h2 {
  /*text-transform: uppercase;*/
  font-weight: normal;
}

header {
  font-family: "Alex Brush", "Great Vibes", Arial, sans-serif, serif;
  font-optical-sizing: auto;
  font-size: 150%;
	background: var(--head-color);
  bsckground: linear-gradient(90deg, rgba(0,0,0,1) 0%, var(--head-color) 100%);
	color: white;
	padding: 0.15rem 1rem;
	text-align: center;
  position: sticky;
  top: 0;
}

header h1 {
  cursor: pointer;
}

header h1 a {
  color: white;
  text-decoration: none;
}
header h1 a:hover {  
  text-decoration: none;
}

nav ul {
	list-style: none;
	padding: 0;
}
nav ul li {
	display: inline;
	margin: 0 1rem;
}
nav ul li a {
  color: white;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
}
nav ul li a:hover {
  color: yellow;
  text-decoration: underline;
}
nav ul li a:visited {
  color: white;
  text-decoration: none;
}
nav ul li.selected a {
  color: yellow;
}

main {
  max-width: 1024px;
  min-width: 640px;
  width: 50%;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  padding: 2em;
  text-align: justify;
  background-color: rgba(9,52,91,0.7);
}

main li {
  text-align: justify;
}

main h1 {
  text-align: center;
}

footer {
  font-size: 80%;
	background-color: var(--head-color);
	color: white;
	text-align: left;
	padding: 0.25rem 1rem;
	position: fixed;
	width: calc(100% - 2rem);
	bottom: 0;
}

/*footer div {
  margin-top: 0.75rem;
  margin-right: 3rem;
}*/

.logo {
  width: 50px;
  height: 50px;
}


@media (max-width: 600px) {

  main {
    width: 100%;
    max-width: calc(100vw - 2rem);
    min-width: 300px;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  p {
    text-align: justify;
  }

  nav ul li {
  	display: block;
  	margin: 0.5rem 0;
  }
}