/* 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 {
  transition: opacity .5s;
  background-color: #f2d199;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/7126/flowers-summer-bokeh.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  color: #f9f5eb;
  font-family: Georgia;
  letter-spacing: 1px;
  display: grid;
}

img {
  max-width: 100%;
  height: auto;
}

test {
  border: 1px dashed purple;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.error {
  grid-row: 1/5;
  grid-column: 1/3;
  display: grid;
  position: absolute;
  bottom: 0;
  top: 0;
  right: 10%;
  left: 10%;
  text-align: center;
  border: black 10px double;
  border-radius: 0;
  border-top-style: none;
  border-bottom-style: none;
  padding: 10px;
  color: white;
}

.aaa {
  grid-column: 1/3;
  display: grid;
}

.header {
  grid-row: 1;
  grid-column: 1/3;
  display: grid;
  text-align: center;
  border: black 5px double;
  border-radius: 5px;
  margin: 10px auto;
  color: #f2d199;
  cursor: pointer;
}

.header span {
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.header span:hover {
  background-color: #ddd;
  color: black;
}

.yyy span {
  color: black;
}

.yyy span:hover {
  background-color: black;
  color: white;
}

.header button {
  background-color: black;
  color: #f2f2f2;
  border-style: none;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: Georgia;
  letter-spacing: 1px;
}

.header button:hover {
  background-color: #ddd;
  color: black;
}

.header button:focus {
  border: #ddd 5px dotted;
}

div:focus {
  display:block;
}

.main {
  display: grid;
  text-align: center;
  border: #f2d199 5px double;
  border-radius: 5px;
  padding: 10px;
  background-color: black;
  color: #A5A19B;
}

.main2 {
  grid-row: 2/3;
  grid-column: 1/3;
  background:url(https://images.pexels.com/photos/18069891/pexels-photo-18069891.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  border: #f2d199 5px double;
  border-radius: 55px 5px;
  margin: 0 5%;
  margin-top: 2%;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

divemenu1 button {
  background-color: black;
  color: white;
  border-style: none;
  padding: 14px 16px;
  width: 100%;
  text-decoration: none;
  font-size: 17px;
  font-family: Arial;
  letter-spacing: 1px;
  font-weight: bold;
}

divemenu1 button:hover {
  background-color: white;
  color: black;
}

color button {
  margin: 5px 0px;
}

color button {
  background-color: blue;
  color: white;
  border: white 1px solid;
  border-radius: 5px;
  text-decoration: none;
}

color button:hover {
  border: transparent 1px solid;
  border-radius: 5px;
  outline: white 2px solid;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

/* Colored border for pictures */
.stroke {
  filter: drop-shadow(2px 0 0 white) 
  drop-shadow(0 2px 0 white)
  drop-shadow(-2px 0 0 white) 
  drop-shadow(0 -2px 0 white);
}

.strokeb {
  filter: drop-shadow(2px 0 0 black) 
  drop-shadow(0 2px 0 black)
  drop-shadow(-2px 0 0 black) 
  drop-shadow(0 -2px 0 black);
}

.strokep {
  filter: drop-shadow(0.5px 0 0 pink) 
  drop-shadow(0 0.5px 0 pink)
  drop-shadow(-0.5px 0 0 pink) 
  drop-shadow(0 -0.5px 0 pink);
}

/* Colored border for text */
.strokeme {
  color: white;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;
}

/*
Source - https://stackoverflow.com/a/79528460
Posted by Brett Donald
Retrieved 2026-06-10, License - CC BY-SA 4.0
*/

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
  gap: 1em;
  padding: 1em;
  width: 70%;
  margin: 0 auto;
  background: white;
}

.gallery img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
}

/***/

.mygallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
  gap: 1em;
  padding: 1em;
  width: 70%;
  margin: auto auto;
}

.mygallery img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5em;
  border: black 2px solid;
  transition: 0.3s;
}

.mygallery img:hover {
  transform: scale(1.05);
}

.mygallery img:focus {
  transform: scale(1.05);
}

.spoiler-text {
  filter: blur(4px);                /* Blurs the text (adjust blur strength as needed) */
  transition: filter 0.3s ease-in-out; /* Smoothly animates the blur change */
  user-select: none;                /* Prevents copying the hidden text */
  cursor: pointer;                  /* Cursor indicates clickability */
}

.spoiler-text:hover,
.spoiler-text:focus {
  filter: blur(0);                  /* Removes blur on hover or keyboard focus */
}