/* html {
  scroll-behavior: smooth;
} */
#welcomeMenu{
  width: 430px;
  height: 410px;
  display: none;
}

#introVideo{
  display:none;
}

#sun{
  display:inline-block;
    background-image: url("https://nmd.pt/landingPage/671px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA's_Solar_Dynamics_Observatory_-_20100819.png");
    position: absolute;
    bottom:50px;
    left:100px;
    height: 240px;
    z-index:-11;
    offset-path: path("M 0 350 q 300 -800 1200 0");  
    offset-position: center;
    animation: moveSun 60000ms infinite reverse ease-in-out;

      background-repeat: no-repeat;
      background-size: 70%;
      background-position: top left;
/*     filter:brightness(350%) contrast(150%) grayscale(80%); */
     width: 240px;
     opacity: 0.3;

  }

#moon {
  display:inline-block;
    position: absolute;
    bottom:50px;
    left:100px;
    height: 240px;
    z-index:-10;
    offset-path: path("M 0 350 q 300 -800 1200 0"); 
    offset-position: center; 
    animation: moveMoon 60000ms infinite ease-in-out;
    background-image: url("https://nmd.pt/landingPage/Full_Moon_Luc_Viatour.png");
      background-repeat: no-repeat;
      background-size: 60%;
      background-position: top left;
/*     filter:brightness(150%) contrast(150%); */
     width: 240px;
     opacity: 0.3;


}   
  @keyframes moveMoon {
    0% {
      offset-distance: 0%;
      transform: scale(0);
      opacity: 0.3;
      filter:brightness(150%) contrast(100%) grayscale(0%);
      z-index:-10;
    }

    25% {
        offset-distance: 25%;
        transform: scale(0);
        opacity: 0.3;
        filter:brightness(150%) contrast(100%) grayscale(0%);
        z-index:-10;
      }

    40% {
        offset-distance: 50%;
        transform: scale(1.8);
        opacity: 1;
        filter:brightness(80%) contrast(150%) grayscale(80%);
        z-index:2;
        }

    45% {
        offset-distance: 50%;
        transform: scale(1.8);
        opacity: 1;
        filter:brightness(0%) contrast(150%) grayscale(80%);
        z-index:2;
        }

    47% {
        offset-distance: 50%;
        transform: scale(1.8);
        opacity: 1;
        filter:brightness(0%) contrast(150%) grayscale(80%);
        z-index:2;
        }

    55% {
        offset-distance: 55%;
        transform: scale(1.8);
        opacity: 1;
        filter:brightness(10%) contrast(100%) grayscale(80%);
        z-index:2;
        }

    75% {
        offset-distance: 75%;
        transform: scale(0);
        opacity: 0.8;
        filter:brightness(350%) contrast(50%) grayscale(0%);
        z-index:-4;
        }

    100% {
        offset-distance: 100%;
        transform: scale(0);
        opacity: 0.3;
        filter:brightness(350%) contrast(0%) grayscale(0%);
        z-index:-10;
      }
  }

  @keyframes moveSun {
    0% {
      offset-distance: 0%;
      transform: scale(0);
      opacity: 0.3;
      filter:brightness(150%) contrast(150%) grayscale(100%);
      z-index:-11;
    }

    25% {
        offset-distance: 25%;
        transform: scale(0);
        opacity: 0.3;
        filter:brightness(150%) contrast(150%) grayscale(100%);
        z-index:-11;
      }

    
    50% {
        offset-distance: 50%;
        transform: scale(1.8);
        opacity: 1;
        filter:brightness(1500%) contrast(250%) grayscale(50%);
        z-index:1;
        }

    75% {
        offset-distance: 75%;
        transform: scale(0);
        opacity: 0.8;
        filter:brightness(50%) contrast(150%) grayscale(80%);
        z-index:1;
        }

    100% {
        offset-distance: 100%;
        transform: scale(0);
        opacity: 0.3;
        filter:brightness(350%) contrast(150%) grayscale(100%);
        z-index:-11;
      }
  }

h1{
    text-shadow: 3px 3px #333;
}

h2{
text-shadow: 2px 2px #333;
}

article::after{
    /* background-color: white; */
    content: "info";   
    text-align: center;
    text-shadow: 1px 1px #333;
    border-radius: 5px;
    padding: 10px;
    position: fixed;
    top:2vh !important;
    left:calc(50% - 100px);
    width: 200px;
    height: 30px;
    /* margin-left:-120px; */
    

    font-size: 0.8em;
    color: white !important;
  
    font-weight: 800;
    letter-spacing: 0.1em;

    opacity: 0.8 !important;
background-image: repeating-linear-gradient(-37deg, grey, grey 10.5px, transparent 14px, transparent 19.25px, grey 21px), repeating-linear-gradient(53deg, grey, grey 10.5px, transparent 14px, transparent 19.25px, grey 21px), repeating-linear-gradient(143deg, grey, grey 10.5px, transparent 14px, transparent 19.25px, grey 21px), repeating-linear-gradient(233deg, grey, grey 10.5px, transparent 14px, transparent 19.25px, grey 21px);
background-size: 10px calc(100% + 26.29px), calc(100% + 26.29px) 10px, 10px calc(100% + 26.29px) , calc(100% + 26.29px) 10px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
/* 

transition: all 2s ease; */
/*background-color:rgba(0, 0, 0, 0.3);*/
border-radius:50px;
filter: contrast(150%);
animation: borderAnimation 0.9s infinite linear;
  }


  


    
    article:hover::after{
        content:"On this WebApp, we created a design narrative about a space monkeys kind, where you can get to know about their origins, fly over their forest, play paper scissors rock vs space monkey, or even gamble space monkey bucks on their casino, but you can also visit our projects and find out more about our studio.  ";
        height: 410px;
        width: 400px; 
        margin-left:-100px;
        font-size: 0.75em;
        text-align: justify;
        text-shadow: 1px 1px #333 ;
        background-color:rgba(255, 102, 0, 0.8);
        color: white!important;
        opacity: 1 !important;
        font-weight: 800;
        line-height: 1.5em;
        
        background-image:url("https://nmd.pt/landingPage/article_nmd.jpg");
        background-size: 100%;
        background-position: bottom !important;
        background-repeat: no-repeat;
        border-radius:30px;
        filter: contrast(120%);
        
        
        }




@keyframes borderAnimation {
from { background-position: 0 0, -26.29px 0, 100% -26.29px, 0 100%; }
to { background-position: 0 -26.29px, 0 0, 100% 0, -26.29px 100%; }
}

h1 {
    text-align:center;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
  }

#monkeySpeech {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid #0081ff ; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing 3.5s steps(40, end),
      blink-caret2 .75s step-end infinite;
  }

  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: transparent }
  }

  @keyframes blink-caret2 {
    from, to { border-color: #0081ff }
    50% { border-color: transparent }
  }
/* 
@media screen and (min-height:768px){
    article::after{
        bottom:45vh !important;
        height: 30px;
    }
    article:hover::after{
      bottom:45vh !important;
      height: 420px;
  }
} */

body {
    z-index: -2;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
    

    display: flex;
  }

  iframe{
        border-radius:5px;
        zoom:1.15 !important;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
        overflow-y: hidden; 
    }

  body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }

  /* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: 0.5;
  z-index: -5;


  
}

.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 200px rgb(0,0,0) inset;
  z-index: -4;
}

#videoSourceFrame{
    position: fixed;
    right: 0;
    top: 10vh;
    min-width: 100%;
    height: 50vh;
    opacity: 0;
    z-index: -3;
}
#design{
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0;
    z-index: -4;
}

#ps2{
  position: fixed;
  right: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: 0;
  z-index: -4;
}

#return{
    text-align: center;
    font-size: small;
    position: fixed;
    left: 10px;
    top: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: #ccc solid 3px;
    word-wrap:wrap;
    width: 180px;
    height: 20px;
    border-radius: 22px;
    background-color: #0081ff;
    color: aliceblue;
    font-weight: 800;
    z-index: -3;
    opacity: 0;
    text-shadow: 2px 2px #333;
    letter-spacing: 0.1em;
}

#return:hover{
    text-align: center;
    font-size: small;
    position: fixed;
    left: 10px;
    top: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: #0081ff solid 3px;
    word-wrap:wrap;
    width: 180px;
    height: 22px;
    border-radius: 20px;
    background-color: #ccc;
    color: aliceblue;
    font-weight: 800;
    z-index: -3;
    opacity: 0;
    text-shadow: 2px 2px #333;
    letter-spacing: 0.1em;

}




/* #forestFlie{
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100vh;
    opacity: 1;
    z-index: 10000;
  
  } */


/*   #exitButton{
    position: fixed;
    right: 10;
    bottom: 10;
    width: 200px;
    height: 100px;
    border-radius: 15px;
    background-color: #333;
    color:lime;
    opacity: 1;
    z-index: 10000;
    transition: all 3s ease;
  }

  #exitButton:hover{
    position: fixed;
    right: 20;
    bottom: 20;
    width: 200px;
    height: 100px;
    border-radius: 15px;
    background-color: lime;
    color:#333;
    opacity: 1;
    z-index: 10000;
  } */
  
#mouseSignals {
  position: fixed;
  left: -10px;
  top: -10px;
  min-width: 105%;
  min-height: 105%;
  opacity: 0.033;
  z-index: 1;
  

}

#superTree {
  position: fixed;
  left: -10px;
  top: -10px;
  min-width: 105%;
  min-height: 105%;
  opacity: 0.066;
  z-index: 2;
}

#superForest {
  position: fixed;
  left: -10px;
  top: -10px;
  min-width: 105%;
  min-height: 105%;
  opacity: 0.033;
  z-index: -1;
}
/* Add some content at the bottom of the video/page */


/* .container {
  position: relative;
  margin: auto;
  height: 80vh;
  z-index: 2;

    background-image: url("https://nmd.pt/landingPage/Calendario-maya_inverse.png");
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: center center;

   width: 100%;
} */

/* #container:active{

    animation-name: spin;
    animation-duration: 5s;
} */

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* .container2 {
  position: absolute;
top:60vh;
left:0;
  z-index: 2;
  width: 100% !important;
} */

#megaContainer{
  position: relative;
  margin: auto;
  z-index: 2;
  width: 100% !important;
  zoom:1;
}

.menu-item, .menu-open-button {
    margin-left: -45px;
}

#menu-open{
    z-index: 100;
}

#introVideo{
  display:none;
}

@media screen and (max-width:1024px) {

#myVideo, #moon, #sun{
  display:none;
}

#introVideo{
  display:none;
}

  html, body {
    overflow-x: hidden;
  }
  body {
    position: relative;
  }

  #videoSourceFrame{
    position: fixed;
    right: 0;
    top: 0vh;
    min-width: 100%;
    height: 60vh !important;
    opacity: 0;
    z-index: -3;
}

/*   .container {
    position: relative;
    margin: auto;
    
    z-index: 2;
  
      background-image: url("https://nmd.pt/landingPage/Calendario-maya_inverse.png");
      background-repeat: no-repeat;
      background-size: 400px;
      background-position: center center;
  
     width: 100% !important;
  }
   */
   .container {
    position: fixed;
    top: calc(40vh - 200px);
    left: calc(50%-200px);
    height: 400px;
    width: 400px;
    overflow: hidden;
    z-index:5;
  }
  
  #container2 {
    position: fixed;
    top: 70vh ;
    left: calc(50%-200px);
    height: 200px;
    width: 400px;
    overflow: hidden;
    z-index:5;
  }
  
  #megaContainer{
    position: relative;
    margin: auto;
    z-index: 2;
    width:100%!important;
    height: 100vh;
  }

    #superTree{
    display: none;
    }

    #mouseSignals {
        display:none;
    }



    /* #monkeyInteraction{
        margin-top: 200px;
    } */

    h1{
        text-shadow: 3px 3px #333;
        margin-bottom: 10px;
    }

    h2{
    color: white;
    text-shadow: 1px 1px #333;
    }




    article::after{

    opacity:0.5 !important;

        /* transition: all 5s ease-in-out; */
        text-shadow: 2px 2px #333;
    }

    article:hover::after{
        left:5% !important;
        top:0 !important;
        margin-left:0px !important;
        font-size: 1em !important;
        text-align: justify;
        text-shadow: 1px 1px #333 ;
        background-color:rgba(255, 102, 0, 0.8);
        color: white!important;
        opacity: 1 !important;
        font-weight: 800;
        line-height: 1.5em;
        opacity: 1 !important;
        height:475px;
        width:80%;

    }


}




#playMonkeySpeech{
    padding: 10px;
    font-size: 0.85em;
    color: rgb(155, 200, 211);
}

#options{
  margin-top:30px;
}

#options button{
  background-color: orangered;
  padding: 5px;
  font-size: medium;
  color: #fff;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  display: inline-block !important;
  opacity: 0.8;
  margin: auto;
}

#options button:hover{
  background-color: orange;
  color: #333;
  opacity: 1;
}

#moto{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size:x-large;
  color: whitesmoke;
}

button:hover {
  background-color: silver;
}

#giveMeOptions{
  display: none;
}

#playPause{
   display: none;
}




@media (min-width: 512px) and (max-width:600px) {



                #playPause{
                display: none;
                }

       }

@media screen and (max-width:511px) {


    .container {
        position: fixed;
        top: calc(40vh - 200px) !important;
        left: calc(50% - 200px) !important;
        height: 400px !important;
        width: 400px !important;
        overflow: hidden;
        z-index:5;
      }
      
      #container2 {
        position: fixed;
        top: 70vh  !important;
        left: calc(50% - 200px) !important;
        height: 200px !important;
        width: 400px !important;
        overflow: hidden;
        z-index:5;
      }

        button{
        font-size: medium;
        padding: 5px;
        }

        iframe{
                border-radius:5px;
                zoom:1.1 !important;

            }

        #showOptions{
            display: none !important;
            }

        #giveMeOptions{
        display: inline-block;
        }

        #monkeyInteraction{
        margin-bottom: 30px;
        width: 100%;
        }


        #playPause{
        display: none;
        }
}

@media screen and (min-width:1367px){
  
  body{
    background-size: 5000% 5000% !important;
    background-repeat: no-repeat !important;
  }

    #megaContainer{
      zoom: 1.2;
  }

  #videoSourceFrame{
    position: fixed;
    right: 0;
    top:10vh;
    min-width: 100%;
    height: 40vh;
    opacity: 0;
    z-index: -3;
}

/* #container2{
    z-index: 3000 !important;
} */

}

@media screen and (min-width:1369px){

  .container, .container::before, .container::after{
    background: url("") !important;
}
  
    body{
      background-size: 5000% 5000% !important;
      background-repeat: no-repeat !important;
    }
  
      #megaContainer{
        zoom: 1.2;
    }
  
    #videoSourceFrame{
      position: fixed;
      right: 0;
      top:10vh;
      min-width: 100%;
      height: 40vh;
      opacity: 0;
      z-index: -3;
  }
  
/*   #container2{
      z-index: 1500 !important;
  }
   */
  }


/* @media screen and (min-height:1920px){
    #megaContainer{
        zoom: 1.5;
    }
} */

nav{
  zoom:0.75;
  margin-top: 25px;
}

#monkeyInteraction{
   margin-bottom: 30px;
}

#demo{
   color: #fff;
   font-weight: 400px;
   font-size: medium;
   text-align: center;
   width: 100%;
}

#dateTime{
  position: fixed;
  top:12vh;
  width:400px;
  left:50%;
  margin-left:-200px;
  text-align: center;
}

#introVideo{
  border-radius: 15px;
  background-color:rgba(0, 0, 0, 0.8);
  

}

iframe{
  margin-bottom: 20px;
}