body {
    margin: 0;
    background-color: #EDEDED;
   
  }

canvas {
    position: fixed !important;
 }
 
.trans{

}

.widetext{
  width: 65vw !important; 
}

 .ttlname {
   
  font-size: 2.5vw; 
  position: fixed;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 
  color: #004FE8; 
  font-family: 'Neu', sans-serif; 
  text-align: left; 
  position: fixed;
  z-index: 100000000000000;
}

a, a:hover, a:visited, a:active {
  color: inherit;
  text-decoration: none;
  
 }

.header-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1960px;
  margin: 0 0 0 20px;
padding: 20 70px; 
}

.char {
  transform: translateY(115px);
}

.container {
    max-width: 1960px;
    margin: 0 auto 0 20px;
    padding: 20 70px; 
}

.descriptor{
  font-family: 'NeuPara', sans-serif;
  color: #004FE8;
  overflow-wrap: normal;
  width: calc(100px + 25vw); 
  font-size:calc(15px + 1.5vw);
  text-align: left; 
  font-weight: 100;
  overflow-wrap: break-word;
  max-width: 40ch;
  display: flex;
  align-items: center;
}


.descriptor.right {
  text-align: right;
}

.pointerevents{
  pointer-events: all;
}

.menu-item {
  margin-top: 8vw; 
  margin-right: 0px;
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-400px);
  transition: opacity 2s ease-in-out, transform 1s ease-in-out, color 0.3s ease-in-out;
  transform-origin: 100% 50%;
}

.titular{
  transition: opacity 2s ease-in-out, transform 1s ease-in-out, color 0.3s ease-in-out;
  font-size: calc(14.5vw - 7px);
  font-family: 'Neu', sans-serif;
  color: #EDEDED;
  -webkit-text-stroke-width: 0.2vw;
  -webkit-text-stroke-color: #004FE8;
  line-height: 2vw;
}

.year {
  font-size: 3vw;
  text-align: right;
  color: #004FE8;
  font-family: "Robo", sans-serif;
  height: 10vw;
  
}

.title{
  margin-top: 5.48vw; 
  margin-left: 20vw;  
  opacity:1;
  font-family: 'Neu', sans-serif;
  color: #EDEDED;
  text-align: right;
  right: 1vw;
  -webkit-text-stroke-width: 0.1vw;
  -webkit-text-stroke-color: #004FE8;
  font-size: 9vw;
  line-height: 0vw;
  pointer-events: none;
  position: fixed; 
  float: right; 
  margin-bottom: 0px; 
  font-size: 8vw;
}

.subtitle{
  font-size: 1.5vw; 
  color: #004FE8;
  margin-top: 9vw; 
  text-align: right;
  margin-right: 1vw;
  font-family: 'NeuSmall', sans-serif;
  pointer-events: none;
  position: fixed;
  right: 0; 
  top: 0;
}



.hide-on-phone {
  display: block;
}

@media only screen and (max-width: 480px) {
  .hide-on-phone {
      display: none; 
  }
}

.titular:hover, .titular:focus {
  transition:transform 0.3s;
  color: #004FE8;
}

.menu-item:hover, .menu-item:focus {
  transition:transform 0.3s ;
  transform:  perspective(300px) rotateY(1deg) !important;
  color: #004FE8;
}

.project con{
  margin-top: calc(200px - 10vw);
  margin-right: 1vw;
  float: right;
  padding-right: 0px;
  transform: perspective(800px) rotateY(-20deg);
  transform-origin: 100% 30%;
  }

.project titlecon{
  float: right;
  padding-top: 10px;
  padding-right: 40px;
  }

.noHover{
    pointer-events: none;
}

.eyes {
  position: fixed;
  display: flex;
  justify-content: left;
  transform: translateY(-50%);
  text-align: center;
  opacity: 0;
  animation: slideIn 0.5s ease-out forwards;
  scale: 0.6;
  justify-content: center;
  transform-origin: 50% 0%;
  margin-left: 43px;
  margin-top: calc(40px + 6vw);
 
}

.eye-container {
  max-width: 320px;
  margin-left: -90px;
  margin-right: -90px;
  position: relative;
  margin: -95px;
  margin-top: -54px;
}

.eye {
  width: 35px;
  max-width: 35px;
  height: 50px;
  max-height: 60px;
  background: #EDEDED;
  display: inline-block;
  margin: 40px 61px;
  border-radius: 50%;
  position: relative;
  top: -20px;
  overflow: hidden;
  border-top: 4px solid #004FE8;
  border-left: 4px solid #004FE8;
  border-bottom: 4px solid #004FE8;
  border-right: 4px solid #004FE8;
  z-index: 97;
}

.projectcontainer{
  position: absolute;
  max-width: 50vw;
  margin-top: 20vh;
  margin-left: 20vw;
  width: 10vw;
  height: 10vw;
  border: 3px solid lime;
}

.pupil {
  width: 47px;
  height: 75px;
  background-image: url("res/pupil.png");
  background-size: 75px 75px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 60%;
  z-index: 98;
}

.cursor {
  pointer-events: none;
  position: fixed;
  display: block;
  border-radius: 0;
  mix-blend-mode:normal;
  top: 0;
  left: 0;
  z-index: 9999999999999999;  
}

.circle {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 20px;
  background-color: #004FE8;
}
  
.bottombutton {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0;
  margin: 16px;
  transition: all .2s ease-in-out;
  animation: elasticScale 0.5s ease-out; 
  margin-left: 20px; 
}

.bottombutton.spaced {
  margin-bottom: 76px;
}

.bottombutton.spacedx {
  margin-left: 20px; 
  margin-bottom: 135px;
}


.bottombutton img {
  width: 50px;
}

.bottomLink{
  font-size: 14px; /* Adjust the font size as needed */
  color: #004FE8; /* Change the color if desired */
  font-weight: 600; 

  transition: transform 0.1s ease-in-out,  opacity 0.5s ease;
  font-family: 'NeuSmall', sans-serif;    
  text-align: center;   
}
.indexBottomLink{
  font-size: 14px; /* Adjust the font size as needed */
  color: #004FE8; /* Change the color if desired */
  font-weight: 600; 

  transition: transform 0.1s ease-in-out,  opacity 0.5s ease;
  font-family: 'NeuSmall', sans-serif;    
  text-align: center;   
}
@media screen and (max-width: 480px) {
  .show-on-desktop {
    display: none;
  }
}
@media screen and (min-width: 481px) {
  .hide-on-desktop {
    display: none;
  }
}
.indexBottomLink:hover { 
  transform: scale(1.1);
}
.bottomLink:hover { 
  transform: scale(1.1);
}
.linksContainer {
  position: fixed;
  bottom: 0;
  left: 150px;
  padding: 0px;
  transition: all .2s ease-in-out;
  opacity: 0;
  animation: fadeIn 1.5s forwards;
  animation-delay: 0.5s;
}
.clickable {
  cursor: pointer;
 
}

.p5Canvas{
  z-index: -1000;
}
 
.bottombutton:hover { 
  transform: scale(1.2);
}
    
.flex-container {
  margin-left: 25vw;
  padding-top: 5vw;
  display: flex;
  top: 10vw;
  flex-wrap: wrap;
  height: 30%;
  justify-content: space-evenly;
  max-width: 1200px;
  gap: 2vw;
}

.flex-container.top-spaced {
  padding-top: calc(10vw + 100px);
}

.flex-container.reverse {
  flex-wrap: wrap-reverse;
}

.flex-container.bottom-space {
  margin-bottom: 9vw;
}
 
.flex-item {
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overflowWrapper{
  border: 3px solid lime;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
}

.screenshot{  
  z-index: 1000;
  margin-top: 0px;
  opacity: 1;
  border-radius: 0.5vw;
  border: 0.15vw solid #004FE8;
  box-sizing: border-box;
  min-width: 10vw;
  opacity: 1;
}
.screenshot.mobile {
 height: 600px;
 width: 300px;
}

.screenshot.desktop {

}

.center{
 display: block;
 text-align: center;  
 margin-top: 40px;
}
.quicklink{
      width: 12.1%;
      padding-right: 0vw;
      padding-top: 0.4vw;
      position: fixed;
      right: 0;
      top: 0;
      font-size: 1.5vw;
      color: #efefef;
      margin-top: 8.75vw;
      text-align: right;
      margin-right: 32vw;
      font-family: 'NeuSmall', sans-serif;
      background-color: #004FE8;
      border: none;
      cursor: pointer;
      height: 2.1vw;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 0px;
}

.linkimg{
    height: 1.25vw;
      margin-left: 0.7vw;
      padding-right: 0vw;
      padding-bottom: 0.2vw;
}

  @keyframes slideIn {
      from {
          opacity: 0;
      }
      to {
        opacity: 1;
      }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes elasticScale {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@font-face {
    font-family: 'Moda';
    src: url('Fonts/Moda.otf') format('opentype'); 
}

@font-face {
    font-family: 'Robinson';
    src: url('Fonts/Robinson.otf') format('opentype'); 
}
@font-face {
    font-family: 'Ropinie';
    src: url('Fonts/Ropinie.otf') format('opentype'); 
}
@font-face {
    font-family: 'Ramesha Bold';
    src: url('Fonts/Ramesha Bold.otf') format('opentype'); 
}
@font-face {
    font-family: 'Moda';
    src: url('Fonts/Moda.otf') format('opentype'); 
}
@font-face {
    font-family: 'Uniqlo';
    src: url('Fonts/Uniclo-BlackItalic.otf') format('opentype'); 
}
@font-face {
    font-family: 'Neu';
    src: url('Fonts/NeuethingSans-ExtraBoldUltraExpanded.ttf') format('truetype'); 
}
@font-face {
  font-family: 'NeuSmall';
  src: url('Fonts/NeuethingSans-RegularExpanded.ttf') format('truetype'); 
}
@font-face {
  font-family: 'NeuPara';
  src: url('Fonts/NeuethingSans-BoldSemiExpanded.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Robo';
  src: url('Fonts/roboto.thin.ttf') format('truetype');
}