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

/* Reset + Base Styling */

/* Reset + Base Styling */

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

@font-face {
  font-family: "DIMITRI";
  src: url("fonts/DIMITRI.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DIMITRI Swank";
  src: url("fonts/DIMITRI3D.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Body Styling */
body {
  font-family: 'Trebuchet MS', sans-serif;
  background: url("/background.gif") no-repeat center center;
  background-size: cover;
  color: #cae6e8;
  padding: 0;
  cursor: none;
  line-height: 1.6;
}

.site-title {
  font-family:'DIMITRI';
  font-size: 3rem;
  letter-spacing: 2px;
  color: #fff;
}

/* Custom Cursor */
#cursor {
  width: 18px;
  height: 18px;
  border: 2px solid #4db8ff;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 9999;
  animation: glow 1.2s infinite ease-in-out;
}

@keyframes glow {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* Navbar */
.navbar {
  width: 100%;
  background-color: rgba(38, 50, 51, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-left h3 {
  font-family: 'DIMITRI Swank';
  font-size: 2rem;
}

.site-icon {
  width: 40px;
  height: 40px;
}

.nav-right ul {
  display: flex;
  list-style: none;
}

.nav-right ul li {
  margin-left: 15px;
}

.nav-right ul li a {
  text-decoration: none;
  padding: 8px 12px;
  color: white;
  background-color: #4db8ff;
  border-radius: 6px;
  transition: background 0.3s;
}

.nav-right ul li a:hover {
  background-color: #005f99;
}

/* Header */
header {
  text-align: center;
  padding: 20px;
}

header h1 {
  font-family: 'DIMITRI';
  font-size: 6rem;
  color: #32d99e;
  text-shadow:
   0 0 5px #2c7a5f,
    0 0 15px #2c7a5f,
    0 0 25px #2c7a5f,
    2px 2px 2px #000;
}

/* Main */

main {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 20px;
}

section {
  background: rgba(38, 50, 51, 0.85);
  border: 3px solid #003366;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 10px;
}

section h2 {
  font-family: 'DIMITRI Swank';
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #84cdf5;
}

ul {
  padding-left: 20px;
  margin-bottom: 10px;
}

p {
  margin-bottom: 10px;
}

/* Profile Picture */
.profile-pic {
  width: 150px;
  border-radius: 50%;
  display: block;
  margin: 10px auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Footer */
footer {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  padding: 20px;
  background-color: #f0f0f0;
}

/* Button style (if needed elsewhere) */
a.button {
  display: inline-block;
  padding: 10px 15px;
  background-color: #4db8ff;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 0.2s ease, background-color 0.3s ease;
}

a.button:hover {
  background-color: #005f99;
  transform: scale(1.05);
}

/* Iframes */
iframe {
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.about-shout-row {
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  flex-wrap: wrap;
}

.about-me, .shoutbox {
  flex: 1 1 300px;
  max-height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.about-me .scrollable {
  overflow-y: auto;
  padding-right: 10px;
}

/* Optional scroll styling */
.about-me .scrollable::-webkit-scrollbar {
  width: 8px;
}

.about-me .scrollable::-webkit-scrollbar-thumb {
  background-color: #4db8ff;
  border-radius: 4px;
}