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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: url('images/train-sideview.png');
  background-size: cover;
  background-attachment: fixed;
  color: #333;
  font-family: 'Segoe UI', Verdana, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  padding-top: 60px;
}

.rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

.raindrop {
  position: absolute;
  width: 2px;
  height: 15px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
  animation: fall linear infinite;
  opacity: 0.6;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: rgba(30, 40, 60, 0.85);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(100, 150, 200, 0.3);
}

h1 {
  color: #a8d8f0;
  font-size: 2.5em;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Profile Picture */
.pfp-link {
  position: absolute;
  top: 0px;
  left: 20px;
  display: inline-block;
  text-decoration: none;
  border: none;
  z-index: 5;
}

.pfp {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid #6db3d8;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(100, 150, 200, 0.4);
  object-fit: cover;
}

.pfp:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 25px rgba(100, 150, 200, 0.6);
  filter: brightness(1.15);
}

.pfp:active {
  transform: scale(0.95);
}

/* Header Container */
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
}

p {
  margin-bottom: 20px;
  color: #c8d8e8;
  font-size: 1.1em;
}

a {
  color: #6db3d8;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

a:hover {
  color: #a8d8f0;
  border-bottom-color: #6db3d8;
}

strong {
  color: #a8d8f0;
  font-weight: 600;
}

em {
  color: #c8d8e8;
  font-style: italic;
}

img {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

ul {
  margin: 20px 0 20px 30px;
  color: #c8d8e8;
}

li {
  margin-bottom: 12px;
  font-size: 1.05em;
}

li::marker {
  color: #6db3d8;
  font-weight: bold;
}

h2 {
  color: #a8d8f0;
  font-size: 1.8em;
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center;
}

/* Photos Section */
.photos-section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid rgba(100, 150, 200, 0.3);
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.photo-box {
  width: 100%;
  aspect-ratio: 3/2;
  background-color: #2a3a50;
  border-radius: 8px;
  border: 2px solid #6db3d8;
  transition: all 0.3s ease;
  cursor: pointer;
}

.photo-box:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(100, 150, 200, 0.3);
}

/* About Section */
.about-section {
  margin-bottom: 20px;
}

/* Gallery Section */
.gallery-section {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 2px solid rgba(100, 150, 200, 0.3);
}

.gif-container {
  overflow: hidden;
  margin: 20px 0;
  padding: 20px 0;
  background-color: rgba(20, 30, 50, 0.4);
  border-radius: 8px;
}

.gif-scroll {
  display: flex;
  gap: 25px;
  padding: 20px;
  animation: scroll 20s linear infinite;
  width: fit-content;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100px * 10 - 25px * 10));
  }
}

.gif-box {
  width: 100px;
  height: 100px;
  background-color: #2a3a50;
  border-radius: 8px;
  border: 2px solid #6db3d8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 0.9em;
  text-align: center;
}