/* (c) stofbloem 2025 */
:root {
  --vh: 100%;
}

@font-face {
  font-family: 'profontwindowsregular';
  src: url('fonts/profontwindows-webfont.eot');
  src: url('fonts/profontwindows-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/profontwindows-webfont.woff') format('woff'),
       url('fonts/profontwindows-webfont.ttf') format('truetype'),
       url('fonts/profontwindows-webfont.svg#profontwindowsregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffe6e6;
  --card: #ffffff;
  --accent: #ffe6e6;
  --text: #2b2b2b;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: 'profontwindowsregular', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text);
}

body {
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
  background: var(--bg) url("media/background.jpg") center/cover no-repeat;
	 
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: auto;
  cursor: none;
}

.cursor, .trail {
  position: fixed;
  width: 32px;
  height: 32px;
  background: url('media/cursor_pinktriangle.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cursor { z-index: 100; }
.trail { z-index: 99; }

.trail-container .trail:nth-child(1) { filter: hue-rotate(45deg); transform: scale(0.9); }
.trail-container .trail:nth-child(2) { filter: hue-rotate(90deg); transform: scale(0.8); }
.trail-container .trail:nth-child(3) { filter: hue-rotate(135deg); transform: scale(0.7); }
.trail-container .trail:nth-child(4) { filter: hue-rotate(180deg); transform: scale(0.6); }
.trail-container .trail:nth-child(5) { filter: hue-rotate(225deg); transform: scale(0.5); }
.trail-container .trail:nth-child(6) { filter: hue-rotate(270deg); transform: scale(0.5); }
.trail-container .trail:nth-child(7) { filter: hue-rotate(315deg); transform: scale(0.4); }

body::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
  z-index: 0;
}

.card {
  position: relative;
  background: url("media/stofbloem.jpg") center/cover no-repeat;
  border-radius: 16px;
  width: 90%;
  max-width: 700px;
  min-height: 450px;
  padding: 2rem 4rem 3rem 4rem;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
}

.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.2);
  pointer-events: none;
  border-radius: 16px;
  z-index: 0;
}

.card > * {
  position: relative;
  z-index: 1;
}

h1 {
  font-size: 6vw;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}

a.email {
  margin-top: auto;
  display: inline-block;
  padding: 0.7vw 0.7vw;
  border-radius: 1vw;
  font-size: 3vw;
  background: rgba(255,255,255,0.1);
  color: var(--text);
  text-decoration: none;
  font-weight: normal;
  transition: background 0.3s ease, transform 0.3s ease;
}

a.email:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.7));
}

a, a * { cursor: none !important; }

.social-row {
  display: flex;
  gap: 2vw;
  justify-content: center;
  margin-top: 2vw;
}

.instagram-icon,
.linkedin-icon,
.github-icon {
  width: 5vw;
  height: 5vw;
  cursor: none !important;
  transition: transform 0.3s ease;
}

.instagram-icon:hover,
.linkedin-icon:hover,
.github-icon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}

@media (max-width: 420px) {
  body {
    align-items: flex-start;
    padding-top: 2rem;
  }

  .card {
    padding: 1.5rem 2rem;
    max-height: 95vh;
    width: 95%;
    min-height: auto;
  }

  h1 {
    font-size: 8vw;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
  }

  a.email {
    padding: 3vw 6vw;
    font-size: 4vw;
    border-radius: 2vw;
  }

  .instagram-icon,
  .linkedin-icon,
  .github-icon {
    width: 8vw;
    height: 8vw;
  }
}