@charset "utf-8";
/* CSS Document */
    
@font-face {font-family: "Paskowy";
  src: url("fonts/55b380e5c65275af21009d79e3e42f35.eot"); /* IE9*/
  src: url("fonts/55b380e5c65275af21009d79e3e42f35.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/55b380e5c65275af21009d79e3e42f35.woff2") format("woff2"), /* chrome、firefox */
  url("fonts/55b380e5c65275af21009d79e3e42f35.woff") format("woff"), /* chrome、firefox */
  url("fonts/55b380e5c65275af21009d79e3e42f35.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("fonts/55b380e5c65275af21009d79e3e42f35.svg#Paskowy") format("svg"); /* iOS 4.1- */
}


body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
    color: #FFF;
    transition: background-color 0.5s ease;
}

body.invert-colors {
    background-color: #000;
}

h1#stretch {
    display: inline-block;
    transform: scale(1, 1.1);
    -webkit-transform: scale(1, 1.1);
    -moz-transform: scale(1, 1.1);
    -o-transform: scale(1, 1.1);
}

h1 {
    display: inline;
    font-family: 'Paskowy';
    font-size: 179px;
    font-weight: normal;
    margin-top: 0;
    line-height: 1;
}

h2 {
    display: inline;
    font-family: 'Paskowy';
    font-size: 70px;
    font-weight: normal;
    margin-top: 0;
    line-height: 1;
}

#openGIF {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: opacity 0.5s ease;
}

::selection {
  background: #00ff00;  /* highlight color */
  color: black;         /* selected text color */
}


#headingTXT {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: opacity 0.5s ease;
}

#portANIM {
    position: relative;
    top: 100vh; /* Start the video element outside the viewport */
    left: 50%;
    transform: translateX(-50%);
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    animation: slideIn 1s ease forwards; /* Animation to slide the video in */
}

#portANIM video {
    max-width: 100%;
    height: auto;
}

.black-bg {
    background-color: #000;
}

.invert-colors {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

@keyframes slideIn {
    0% {
        top: 100vh;
    }
    100% {
        top: calc(35px - 120px);
    }
}

#biography-section {
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    animation: slideIn 1s ease forwards;
    margin-top: 20px;
    width: 490px;
    left: 50%;
    transform: translateX(-50%);
    }

#biography-text {
  white-space: pre-wrap;
  word-break: keep-all;
  text-align: justify;
  font-family: Consolas, 'Courier New', monospace;
  line-height: 1.7;
	hyphens: none;
}


#biography-text span {
     font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
      display: inline-block;
      opacity: 0;
      transition: opacity 0.5s;
    }

    #biography-text span.visible {
      opacity: 1;
    }

#portBOX {
  width: 500px;
  height: 800px;
  margin-top: 40px;
  position: relative;
  left: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  animation: slideIn 1s ease forwards;
  transform: translateX(-50%);
  resize: both;
  overflow: hidden;
  border: 1px solid white;
  cursor: crosshair;
}

#courseBOX {
  width: 500px;
  height: 500px;
  margin-top: 40px;
  position: relative;
  left: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  animation: slideIn 1s ease forwards;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid white;
}

#waveFunction {
  width: 500px;
  height: 300px;
  margin-top: 40px;
  position: relative;
  left: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  animation: slideIn 1s ease forwards;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid white;
}

#mail {
    width: 500px;
  position: relative;
  left: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  animation: slideIn 1s ease forwards;
  transform: translateX(-50%);
margin-top: 40px;
text-align: center
}

#courseImage {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; /* Make the image ignore mouse events */
  z-index: 2; /* Ensure the image appears above the trailing effect */
}


#trail-div {
  position: absolute;
 width: 500px;
  height: 500px;
  cursor: url("../media/cursor.png"), auto;  
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}


.hotspot {
  position: absolute;
  bottom: 235px;
  left: 0;
  width: 100%;
  height: 30px; /* Adjust this height to fit the desired clickable area */
  background-color: transparent;
  cursor: url("../media/cursor2.png"), pointer;
    z-index: 2;
}

@media (max-width: 500px) {
  #portBOX {
    width: 100%;
    height: auto;
    padding-bottom: calc(660 / 590 * 100%); /* Maintain aspect ratio (660:590) */
  }
}



 .vidBox {
          margin: 0 auto;
          position: relative;
          overflow: hidden;
          width: 100%;
          padding-top: 10%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
       }

#aiPedagogyBOXwrapper {
  width: 500px;
  height: 200px;
  margin-top: 40px;
  position: relative;
  left: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  animation: slideIn 1s ease forwards;
  transform: translateX(-50%);
  overflow: hidden;
}

#aiPedagogyBOXwrapper > a {
  display: block;
  width: 100%;
  height: 100%;
}

.dos-link-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;/* left-align text */
  background: #000;
  border: 2px double #fff;
  cursor: pointer;
  box-sizing: border-box;     /* important for borders */
  transition: box-shadow 0.2s, border-color 0.2s;
}

.dos-link-box:hover {
  box-shadow: 0 0 20px #39ff14;
  border-color: #39ff14;
}

.dos-text {
  font-family: 'Consolas', 'Courier New', monospace;
  color: #39ff14;
  font-size: 1.1rem;          /* adjust as needed */
  margin-left: 15px;          /* left padding like DOS window */
  margin-top: 24px;
  white-space: nowrap;
}

.dos-cursor {
  display: inline-block;
  width: 12px;
  height: 1.1em;
  margin-left: 5px;
  background: #39ff14;
  vertical-align: bottom;
  animation: blink-cursor 1s steps(1) infinite;
}

@keyframes blink-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}