/*Mouse pointer stuff*/
.cursorStuff {
cursor: url("Images/websitePointer.png"), default;
}

.mouseDown {
cursor: url("Images/cursorPointerActive.png"), default;
}

a {
cursor: url("Images/websitePointer.png"), default !important;
}

a:active {
cursor: url("Images/cursorPointerActive.png"), default !important;
}

a img {
cursor: url("Images/websitePointer.png"), default !important;
}

a img:active {
cursor: url("Images/cursorPointerActive.png"), default !important;
}

/* Main Body */
@font-face {
  font-family: "Old London";
  src: url('Fonts/Old London.ttf');
  src: url('Fonts/Old London.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("Images/background.png");
  background-attachment: fixed; /* Make the background image fixed */
  font-family: serif !important;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  color: rgb(255, 238, 0) !important;
}

.dongeon-container {
  display: flex;
  flex: 1; /* Allow this container to grow and shrink as needed */
  align-items: center;
  justify-content: center;
}

.projectPic {
  width: 100%;
  height: 100%;
}

h1 a {
  text-decoration: none;
  color: gold;
}

.pharagraph {
  grid-area: pharagraph;
  border: 5px groove rgb(255, 251, 0);
  font-family: "Old London", serif;
  background: rgba(79, 88, 32, 0.541);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.4px);
  -webkit-backdrop-filter: blur(5.4px);
  font-size: 2rem;
  margin: 0 auto; /* Center the paragraph */
  overflow-wrap: break-word; /* Ensure long words break */
  word-wrap: break-word; /* Ensure long words break */
  white-space: normal; /* Allow text to wrap */
  max-width: 45%; /* Adjust the width to fit within the container */
}

#hBrew-pharagraph {
  max-width: 70%; /* Adjust the width to fit within the container */
}

.image-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: space-evenly;
}

.character-image-left {
  width: 150px; /* Set the desired width */
  height: 150px; /* Set the desired height */
  border-radius: 50%; /* Make the image circular */
  overflow: hidden; /* Hide any overflow */
  object-fit: cover; /* Ensure the image covers the container */
  float: left; /* Float the image to the left */
  margin: 0 20px 20px 0; /* Add some margin to separate text from the image */
}

.character-image-right {
  width: 150px; /* Set the desired width */
  height: 150px; /* Set the desired height */
  border-radius: 50%; /* Make the image circular */
  overflow: hidden; /* Hide any overflow */
  object-fit: cover; /* Ensure the image covers the container */
  float: right; /* Float the image to the left */
  margin: 0 20px 20px 0; /* Add some margin to separate text from the image */
}

.central-column {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Navigation */
.navigation {
  display: flex;
  grid-area: navigation;
  justify-content: center;
  font-size: 40px;
  margin-bottom: 3rem;
  flex-shrink: 0; /* Prevent the navigation from shrinking */
}


nav a, .button { 
  background-color: rgb(112, 41, 0);
  border: 5px groove gold;
  margin: 0.5rem;
  padding: 0.5rem 1rem; /* vertical & horizontal padding */
  color: gold !important;
  text-decoration: none;
  display: inline-block; /* makes it behave like a button */

}

li { 
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

nav a:hover {
  color: white !important;
}

.navbar-expand-lg {
  border: 5px groove gold;
  margin: 10px;
}


/*------------------------Big Servus Sign------------------------*/

.servus {
 grid-area: servus;
 display: flex;
 align-items:center;
 justify-content:center;
 font-family: 'Brush Script MT', cursive;
}

.big {
  display:flex;
}

.navbar-toggler-icon {
  background-image: url(/FlagR.png) !important;
}

/*------------------------