@font-face {
    font-family: 'Yggdrasil';
    src: url('fonts/Yggdrasil.ttf') format('truetype');
}

@font-face {
    font-family: 'VCR';
    src: url('fonts/VCR_OSD_MONO_1.001.ttf') format('truetype');
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
	z-index: -1;
    overflow:hidden;
}
a.social{
color: aliceblue;
}
#background-image {
  position: absolute;
  top: 1050px;   /* push it down */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: auto;
  z-index: -2;  /* sits behind the video */
}
#background-video3 {
    position: absolute;
    top: 790px;
    left: 50%;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -99;
    background: repeat;
    background-size: cover;
}
#background-video2 {
    position: absolute;
    top: 790px;
    left: 50%;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -99;
    background: no-repeat;
    background-size: cover;
}
#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
    background: no-repeat;
    background-size: cover;
}

#overlay-text {
    position: absolute;
    color: white;
	text-align:  justify;
    font-size: 5vw;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
    font-family: 'Yggdrasil', sans-serif; /* Title + menu */
}


#overlay-menu {
    position: relative;
    color: white;
    font-size: 3.5vw;
	top: 15vh ;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
    font-family: 'Yggdrasil', sans-serif; /* Title + menu */
}
#photos {
    position: relative;
		text-align:  justify;
    color: white;
    font-size: 1.3vw; /* smaller size for essay text */
    text-align: center;
    padding: 20px;
	right:10vw;
	top: 22vh ;
	width: 60vw;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
    font-family: 'VCR', monospace; /* Essay body text */
    font-weight: normal;
    line-height: 1.4;
}
#overlay-text2 {
    position: absolute;
		text-align:  justify;
    color: white;
    font-size: 1.3vw; /* smaller size for essay text */
	left:35vw;
    padding: 20px;
	top: 29vh ;
	width: 60vw;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
    font-family: 'VCR', monospace; /* Essay body text */
    font-weight: normal;
    line-height: 1.4;
}
#overlay-text_just {
    position: absolute;
    text-align:  justify;
    color: white;
    font-size: 1.3vw; /* smaller size for essay text */
	left:35vw;
    margin-right: -25vw;
    padding: 120px;
	top: 20vh ;
	width: 50vw;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
    font-family: 'VCR', monospace; /* Essay body text */
    font-weight: normal;
    line-height: 1.4;
}
/* Default link style */
#overlay-text a, 
#overlay-menu a {
  color:aqua;             /* bright cyan for normal links */
  text-decoration: none;   /* remove underline */
  font-weight: bold;
}
/* Hover effect */
#overlay-text a:hover, 
#overlay-menu a:hover {
  color: #FFF;             /* white on hover */
  text-decoration: underline;
}
/* Visited links */
#overlay-text a:visited, 
#overlay-menu a:visited {
  color:aqua;             /* purple for visited */
}

/* Active (when clicked) */
#overlay-text a:active, 
#overlay-menu a:active {
  color: #FF0;             /* yellow flash when clicked */
}
.social {
    justify-content: flex-end;
    text-align: right;
    margin-left: auto;
}

a.social:visited {
  color: mintcream;
}
.brush-stroke {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
/* --- Mobile adjustments --- */
@media only screen and (max-width: 768px) {
  #overlay-text {
    font-size: 7vw; /* slightly bigger on mobile */
  }

  #overlay-menu {
    font-size: 5vw;
  }

  #photos,
  #overlay-text_just {
    font-size: 3.5vw; /* bigger body text for readability */
    width: 80vw;      /* fit better on small screens */
    left: 10vw;       /* center text blocks */
    right: auto;
  }
}