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

body {
  background: white;
  color: black;
  font-family: "Courier New";
  font-size: 14px;
}

h1 {
  color: black;
  font-family: "dogica";
  letter-spacing: 5px;
  margin: 20px;
  padding: 40px;
}

h2 {
  color: black;
  font-family: "rainyhearts";
}

h3 {
  color: black;
  font-family: "rainyhearts";
}

p {
  color: black;
  font-family: "Courier New";
}

/*<--- link appearance!!! --> */

a {
  text-decoration: none;
  font-weight: normal;
}

a:hover {
  text-decoration: none;
  border-bottom: 2px dotted #000000;
  font-weight: normal;
}

.rounded-box {
  border-radius: 15px; /* Adjust the value for more or less rounding */
  background-color: #73AD21; /* Example background color */
  padding: 20px; /* Adds space around the content */
  width: 200px;
  height: 150px;
}

/*<--- Dashed border --> */
.dashed-divider {
  border: none;
  border-top: 2px dashed black;
}

.custom-dotted {
  /* Shorthand: line, style, color, thickness */
  text-decoration: underline dotted red 2px;
}

/*<--- diary appearance!!! --> */
.dashed-box {
  border-style: dashed; /* Sets the border to be dotted */
  border-width: 1px;    /* Optional: Controls the thickness of the border */
  border-color: #333333;   /* Optional: Sets the color of the border */
  padding: 20px;        /* Optional: Adds space between the content and the border */
  margin: 40px;         /* Optional: Adds space outside the container */
  width: 500px;         /* Optional: Sets a fixed width for the box */
  height: 550px;
  text-align: left;
  overflow-y: scroll;
  z-index: 1;
  
}

.dashed-box-navi {
  border-style: dashed; /* Sets the border to be dotted */
  border-width: 1px;    /* Optional: Controls the thickness of the border */
  border-color: #333333;   /* Optional: Sets the color of the border */
  padding: 20px;        /* Optional: Adds space between the content and the border */
  margin: 80px;         /* Optional: Adds space outside the container */
  width: 100px;         /* Optional: Sets a fixed width for the box */
  height: 15px;
  text-align: left;
  overflow-y: scroll;
  z-index: 1;
  position: relative;
  top: -400px;
  
}

.moved-text {
  margin-top: -50px;    /* Adds space above, pushing the text down */
  margin-left: 30px;   /* Adds space to the left, pushing the text right */
}

.image-container {
    position: relative; /* Container acts as positioning context for overlay */
    display: inline-block; /* Prevents container from taking full width */
}

/* <----- FLEX BOX -----> */

.container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 98vh; 
}

.containerv {
  flex-direction: column;
  width: 100px;
}

.item {
  order: 0; /* default is 0 */
}

.itemg {
  flex-grow: 0; /* default 0 */
}

.items {
  flex-shrink: 1; /* default 1 */
}

.absolute-text-home {
    position: absolute;
    top: 800px;  /* Distance from the top of the container */
    left: 960px; /* Distance from the left of the container */
}

.fixed-updates {
  position: fixed;
  margin-top: -150px;   /* distance from the top of the viewport */
  margin-left: 50px; /* distance from the right of the viewport */
  height: 100px;
  width: 350px;
  border: 1px solid #ccc;
  font-family: 'Courier New';
  font-size: 12px;
  overflow: auto;
  text-align: center;
  background-color: white;
  border-radius: 25px;
  border: 0px solid #73AD21;
  padding: 20px;
}

.button {
  background-color: red;
  border-radius: 8px;
  border: 2px dotted;
  color: white;
  padding: 15px 32px;
  font-family: 'rainyhearts';
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  transition: 0.5s;
}

.button:hover {background-color: #008CBA;color: white;transition-duration: 0.5s;}

.button:active {
  transform: translateY(4px);
  height: auto;
}

.dropdown {
  position: absolute;
  display: inline-block;
  color: white;
  padding: 15px 32px;
  font-family: 'rainyhearts';
  font-size: 15px;
}

/* Style the dropdown button */
.dropbtn {
  color: black;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'rainyhearts';
  padding-top: 5px;
  padding-bottom: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  border-radius: 8px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-radius: 8px;
}

.dropdown-content a:hover {background-color: #f1f1f1;
  border-bottom: 0px dotted #000000;
}

.dropdown:hover .dropdown-content {
  display: block; /* Shows the menu on hover */
}
}