/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
  
@font-face {
  font-family: "KaiserGotisch"; /* Name to be used in CSS */
  src: url("/Assets/Fonts/KaiserzeitGotisch.woff2") format("woff2"), /* Path to font file */
       url("/Assets/Fonts/KaiserzeitGotisch.woff") format("woff");    /* Fallback format */
  font-weight: normal; /* Define weight */
  font-style: normal;  /* Define style */
}

@font-face {
  font-family: "LinLibertine"; /* Name to be used in CSS */
  src: url("/Assets/Fonts/LinLibertine.woff2") format("woff2"), /* Path to font file */
       url("/Assets/Fonts/LinLibertine.woff") format("woff");    /* Fallback format */
  font-weight: normal; /* Define weight */
  font-style: normal;  /* Define style */
}

body button {
  position: fixed;
  width: 70px;
  height: 70px;
  background-color: transparent;
  cursor: pointer;
  border: none;
}

#En-Button {
  right: 85px;
  bottom: 20px;
  background-image: url("/Images/Buttons/En-Button.png");
  background-size: cover;
}

#De-Button {
  right: 10px;
  bottom: 20px;
  background-image: url("/Images/Buttons/De-Button.png");
  background-size: cover;
}

.bright-image:hover {
  filter: brightness(150%);
}

a {
        color: red;
        text-decoration: none;
  }
a:hover {
        background-color: #591713;
  }
  
.button:hover {
  background-color: transparent;
}

.pixelated {
  image-rendering: pixelated;
}

#Morden {
  position: absolute;
  left: 900px;
  bottom: 0px;
}

h1 {
  font-size: 45px;
}

h1 p {
  font-size: 25px;
  padding-left: 50px;
  padding-right: 50px;
}

header h1 {
  margin-top: 10px;
}

.headline {
  display: flex;
  justify-content: center;
  align-items: center;
  /*background: repeating-linear-gradient(
  45deg,
  #abffd5,
  #abffd5 25px,
  #77c79f 25px,
  #77c79f 43.5px
);*/
background-image: url("https://blutlusk.neocities.org/Images/Heading.jpg");
background-size: 24px;
  font-size: 30px;
  color: red;
  height: 60px;
  width: 180px;
  margin-bottom: 10px;
  margin-top: 0px;
  text-shadow: 1px 1px #4a1212;
  border: 2px solid #77c79f;
  border-radius: 10px 10px 0px 0px;
}

#flex {
  display: flex;
  align-items: center;
}

#Nav-Text {
  font-family: "KaiserGotisch";
  font-size: 35px;
  color: red;
  letter-spacing: 0.3rem;
  margin-top: 10px;
  margin-bottom: 10px;
  text-shadow: 1px 1px #4a1212;
}

#Navigation {
  margin-top: 16px;
  font-size: 20px;
}

#Here {
  margin-top: 2px;
  margin-bottom: 16px;
}

.Here-Box {
  border: 2px solid;
  border-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px #4a1212;
}

.Here-Box div {
  width: 180px;
  border: 2px solid;
  border-color: transparent;
  text-shadow: 1px 1px #4a1212;
}

#Here-Foyer {
  visibility: visible;
}

#Here-About {
  visibility: hidden;
}

#Here-Blog {
  visibility: hidden;
}

#Here-Gallery {
  visibility: hidden;
}

#Here-Library {
  visibility: hidden;
}

.Nav-Box {
  border: 2px solid;
  border-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px #4a1212;
}

.Nav-Box div {
      background: repeating-linear-gradient(
  45deg,
  #abffd5,
  #abffd5 25px,
  #77c79f 25px,
  #77c79f 43.5px
);
animation: nav 3s infinite linear;
  width: 180px;
  border: 2px solid #77c79f;
  text-shadow: 1px 1px #4a1212;
}

.Intro {
background-image: url("https://blutlusk.neocities.org/Images/Heading.jpg");
background-size: 24px;
padding: 12px;
}

.Intro h2 {
  margin-top: 0px;
}

.floatright {
  float: right;
}

/*---------- Website Parts ----------*/

body {
  background-image: url("https://blutlusk.neocities.org/Images/Background-Pattern2.jpg");
  background-size: 120px;
  animation: background 5s infinite linear;
  width: 1000px;
  font-family: LinLibertine;
  color: red;
  min-height: 200vh;
  text-align: center;
  margin: 0 auto;
}

.container {
    text-align: center;
    max-width: 1000px;
    background: transparent;
    margin: 8px;
}

header {
  background: repeating-linear-gradient(
  45deg,
  #abffd5,
  #abffd5 25px,
  #77c79f 25px,
  #77c79f 43.5px
);
animation: heading 3s infinite linear;
  color: red;
  border: 2px solid #77c79f;
  width: 100%;
  height: 150px;
  padding-top: 8px;
  padding-bottom: 20px;
  margin-top: 20px;
  text-shadow: 1px 1px #4a1212;
}

.Left-box {
 height: 1200px;
 width: 200px;
 order: 1;
  background-color: #c3ffbd;
  color: red;
  text-shadow: 1px 1px #4a1212;
  border: 2px solid #77c79f;
  border-right: 2px dashed #77c79f;
  padding: 20px;
}

.Right-box {
 height: 1200px;
 width: 200px;
 order: 3;
  background-color: #c3ffbd;
  color: red;
  text-shadow: 1px 1px #4a1212;
  border: 2px solid #77c79f;
  border-left: 2px dashed #77c79f;
  padding: 20px;
}

main {
height: 1200px;
 width: 580px;
 order: 2;
  background-color: #c3ffbd;
  color: red;
  text-shadow: 1px 1px #4a1212;
  padding: 20px;
  border-top: 2px solid #77c79f;
  border-bottom: 2px solid #77c79f;
}

footer {
  background: #77c79f;
  color: red;
  width: 100%;
  height: 150px;
  text-shadow: 1px 1px #4a1212;
}

/*---------- Animations ----------*/

@keyframes background {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 120px 120px;
	}
}

@keyframes heading {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 122.5px 0px;
	}
}

@keyframes nav {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 180px 0px;
	}
}