/* 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." */

/* Below code is used for troubleshooting problematic CSS */
/* * {border:1px solid red;} */

@font-face {
  font-family: "PermanentMarker";
  src: url("PermanentMarker-Regular.ttf"); /* IE9 Compat Modes */
}

@font-face {
  font-family: "Quicksand";
  src: url("Quicksand-Regular.ttf"); /* IE9 Compat Modes */
}

h1 {
  padding: 10px;
  margin: 0;
}

p {
  padding: 10px;
  margin: 0;
}

body {
  background-color: white;
  background-image: url("dot.png");
  background-size: 17px;
  background-attachment: fixed;
  /* background-repeat: no-repeat; /* Prevents the image from repeating */
  /* background-size: cover;  Ensures the image covers the entire viewport */
  font-family: "Quicksand";
  max-width: 100%;
  min-height: 100%;
}

ul {
  list-style-type: none;
}

.solid {
  border-top: 1px solid;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  /* min-width: 130px; */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 0px 5px 0px 5px;
  transition: background-color 3s;
}

.dropdown-link {
  font-family: "Quicksand";
  color: black;
  font-size: 18px;
  text-decoration: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.dropdown-link:hover {
  font-style: italic; 
}
  
.dropdown:hover .dropdown-content {
  display: block;
}

/* Navigation Bar */
.navbar {
  height: 60px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
}

/* Navigation Headings */
.navbar-text {
  text-decoration: none;
  padding-left: 15px;
  color: black;
  transition: color 0.1s;                    /* font-size and color animation */
}

/* Navigation Content */
.navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: space-evenly; 
}

.navbar li {
  padding-top: 5px;
  font-family: "PermanentMarker";
  font-size: 22pt;
  padding-right: 20px;
  color: black;
  text-shadow: 0;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.1em transparent;
  transition: -webkit-text-stroke, text-shadow;
}

.navbar-text:hover {
  /* color: #00cccc; */
  color: white;
  text-shadow: 1px 1px 2px black;
  -webkit-text-stroke: 0.1em black;
}

#flex {
  display: flex;
}

.embed-container {
  text-align: center; /* Centers inline-level content like iframes */
  /*margin: 0 auto; Centers block-level content if a width is set */
  /*max-width: 960px; Optional: Constrain the width of the container */
  border-radius: 10px;
  margin: auto;
}

.watch-this {
  font-family: "PermanentMarker";
  font-size: 16pt;
  padding-top: 40px;
  color: black;
  transition: color 3s;
}

.color-block {
  border: 2px solid #f6faa7;
  width: 30px;
  height: 200px;
  background-color: #f6faa7;
  border-radius: 10px;
}

.color-block-2 {
  /* border: 1px dashed black; */
  border-radius: 3px;
  width: 800px;
  height: 500px;
  margin: auto;
  background-color: rgba(237, 255, 235, 0.3);
  box-shadow: 0px 0px 3px #474747;
  /* background-image: linear-gradient(45deg, rgba(237, 255, 235,0), rgba(237, 255, 235,1)); */
}

.container {
  display: flex;
}

.container-2 {
  display: flex;
  margin: auto;
  width: 1500px;
  height: 1200px;
}

.update-log {
  border: 2px solid gray;
  border-radius: 3px;
  width: 300px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 3px;
  position: absolute;
  right: 0;
  left: auto;
  top: 50%;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

.update-log-top {
  max-width: 100%;
  box-sizing: border-box;
  position: sticky;
  flex-grow: 0;
}

.update-log-bottom {
  max-width: 100%;
  box-sizing: border-box;
  overflow: scroll;
  flex-grow: 1;
}

.update-log h1 {
  text-align: center;
  border-bottom-style: solid;
  border-color: gray;
  border-width: 2px;
}

.update-log ul {
  padding: 0;
  margin: 0;
}

.update-log li {
  padding: 0;
  margin: 5px;
  border-bottom-style: dotted;
  border-width: 1px;
  border-color: red;
}

.update-log p {
  font-size: 8pt;
  margin: 0;
  padding: 3px;
}



/* ------------------------------------------ About page */
.left-sidebar {
  box-sizing: border-box;
  width: 20%;
  padding: 10px;
  background-color: #cff5ab;
  margin: 5px;
  border-radius: 3px;
  box-shadow: 3px 3px 3px #b0aeb0;
}

.center-content { 
  box-sizing: border-box;
  width: 60%;
  padding: 10px;
  background-color: #abe2f5;
  margin: 5px;
  border-radius: 3px;
  box-shadow: 3px 3px 3px #b0aeb0;
}

.right-sidebar { 
  box-sizing: border-box;
  width: 20%;
  padding: 10px;
  background-color: #f5abef;
  margin: 5px;
  border-radius: 3px;
  box-shadow: 3px 3px 3px #b0aeb0;
}

footer {
  text-align: center;
  height: 20px;
}


/* ------------------------------------------ Ladhellind page */
#map { 
  height: 600px;
  background-color: rgba(255, 255, 255, 0);
}

.my-popup {
  font-family: "Courier New", monospace;
  font-size: 16px;
  color: darkred;
  background: #fff3cd;
  border-radius: 8px;
  padding: 6px;
}


/* ----------------------------------------- Night Train page */
.nt-body {
  display: flex;
  max-width: 100%;
  width: 600px;
  box-sizing: border-box;
  margin: auto;
}

.nt-body h2 {
  text-align: center;
  font-style: italic;
}


/* ------------------------------------------ Contact page */
.contact-body {
  display: flex;
  
}

.contact-body-top {
  max-width: 100%;
  width: 850px;
  box-sizing: border-box;
  margin: auto;
  text-align: center;
}

/* --------------------------------------- Unused reference code */
/*
.character-detail {
  box-sizing: border-box;
  border: 2px solid black;
  width: 60px;
  height: 60px;
  font-family: "Courier";
  background-color: white;
  border-radius: 10px;
  padding: 5px;
}
*/

/*
.test-container {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 3s;
}
*/

/*
.test-container:hover {
  background-color: red;
}
*/