@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Special+Elite&display=swap');    
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&family=Luckiest+Guy&family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Londrina+Solid:wght@100;300;400;900&family=Luckiest+Guy&family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&display=swap');
/*Background*/

body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "DynaPuff", sans-serif;
  /*background: linear-gradient(to bottom, #E9D3E6, #B582D7);*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-image: url(../img/schnap.svg);
}

/* weisser box hintergrund */
.container {
  max-width: 900px;
  margin: 30px auto;
  padding: 10px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 2px solid rgb(206, 134, 135);
  word-break: break-all;
}

/*Header*/
header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  /*background-image: url('https://preview.redd.it/two-different-views-of-sampo-v0-oyr7chc63cec1.jpeg?width=1920&format=pjpg&auto=webp&s=665dc1d9edf33797e23f2cca5ef3a3e96b998ad5');*/
  background-color: #ECB3B7ff;
  background-size: cover;
  background-position: 20% 20%;
  height: 120px;
  border-radius: 10px 10px 0 0; /*runde ecken*/
  padding: 0px 10px;
  color: white;
  border: 2px solid rgb(206, 134, 135);
}

/*header text*/
.title-border {
  font-family: "Luckiest Guy";
  font-size: 2em;
  color: #ffffff;
  text-shadow:
    -2px -2px 0 rgb(206, 134, 135),
    2px -2px 0 rgb(206, 134, 135),
    -2px 2px 0 rgb(206, 134, 135),
    2px 2px 0 rgb(206, 134, 135),
    -3px 0px 0 rgb(206, 134, 135),
    3px 0px 0 rgb(206, 134, 135),
    0px -3px 0 rgb(206, 134, 135),
    0px 3px 0 rgb(206, 134, 135);
}

/* Nav Bar*/
nav {
  padding: 10px 0px;
  display: flex;
  gap: 10px;
}

nav a {
  color: #fff;
  font-weight: bold;
  size: 2em;
  background-color: #ECB3B7ff; /* background color of each box */
  padding: 10px 10px;
  border: 2px solid rgb(206, 134, 135);
  border-radius: 20px; /* makes the box rounded */
  text-decoration: none;
}

nav a:hover {
  color: #fff;
  background-color: rgb(206, 134, 135);  
}

nav a.active, .dropbtn.active {
  color: #fff;
  background-color: rgb(206, 134, 135);  
  border: 2px solid rgb(206, 134, 135);  
}

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;

}

/* Dropdown button styled like other nav links */
.dropbtn {
  display: flex;
  gap: 10px;
  background-color: #ECB3B7ff;
  font-weight: bold;
  font-size: 1em;
  color: #fff;
  font-family: "DynaPuff", sans-serif;
  padding: 10px 10px;
  border: 2px solid rgb(206, 134, 135);
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
}

/* Dropdown content hidden by default */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FBEFEEff;
  min-width: 160px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
  border: 2px solid rgb(206, 134, 135);
  border-radius: 10px;
  z-index: 1;
  top: 45px;
}

/* Links inside dropdown */
.dropdown-content a {
  color: #fff;
  font-weight: bold;
  size: 2em;
  display: block;
  margin: 5px;
  background-color: #ECB3B7ff; /* background color of each box */
  padding: 10px 10px;
  border: 2px solid rgb(206, 134, 135);
  border-radius: 20px; /* makes the box rounded */
  text-decoration: none;
}

/* Hover effects */
.dropdown-content a:hover {
  background-color: rgb(206, 134, 135);
  color: white;
}

.dropdown-content {
  display: none;
}

.dropdown-content.show {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: rgb(206, 134, 135);
}

footer {
  text-align: center;
  background-color:#ECB3B7ff;
  padding: 5px 5px; 
  border-radius: 0 0 10px 10px; 
  color: white; /*text farbe*/
  border: 2px solid rgb(206, 134, 135);
}

/* Blog */
.diary-entry {
  background-color: #FBEFEEff;
  border: 2px solid rgb(206, 134, 135);
  border-radius: 10px;
  padding: 15px 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: rgb(206, 134, 135);
}

.diary-entry h2 {
  margin-top: 0;
  color: rgb(206, 134, 135);
  font-family: "Special Elite", monospace;
}

.box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  padding: 10px 0px;
}

/* Individual content boxes */
.content-box {
  color: rgb(206, 134, 135);
  background-color: #FBEFEEff;
  border: 2px solid rgb(206, 134, 135);
  border-radius: 20px;
  padding: 20px;
}

/* ABOUT ME PAGE */
.about-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  padding: 10px 0px;
}

.about-left {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.about-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-pic {
  width: 100%;
  background-color: #FBEFEEff;
  border-radius: 10px;
  border: 2px solid rgb(206, 134, 135);
}

.list-icon {
  width: 6%;
}

.about-box {
  background-color: #FBEFEEff;
  border: 2px solid rgb(206, 134, 135);
  border-radius: 10px;
  padding: 10px;
  font-size: 0.95rem;
  color: rgb(206, 134, 135);
}

.box-header {
  background-color: #ECB3B7ff;
  color: white;
  font-weight: bold;
  padding: 10px 10px;
  border-radius: 8px 8px 0 0;
  border-bottom:  2px solid rgb(206, 134, 135);
  margin: -10px -10px 10px -10px;
}

.box-content {
  line-height: 1.6;
}

.eingerueckt {
  margin-left: 20px;
}

.favs-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.favs-row img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgb(206, 134, 135);
}

.favs-row2 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.favs-row2 img {
  width: 100px;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgb(206, 134, 135);
}

.favs-divider {
  border: none;
  border-top: 2px solid rgb(206, 134, 135);
  margin: 10px 0;
}

.flag-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color:rgb(206, 134, 135);
}

.flag-row img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  gap: 9px;
  background-color: transparent;
}

/* Collection*/

.manga-library {
  margin-top: 40px;
}

.manga-library table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.manga-library th,
.manga-library td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  word-break: break-word;
}

.manga-library thead {
  background-color: #ECB3B7;
  color: white;
}

.manga-library tr:hover {
  background-color: #fbeef1;
}

.manga-library td img {
  max-height: 100px;
  border-radius: 8px;
}

td.status-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}