@font-face {
    font-family: myRedHat;
    src: url(/static/fonts/RedHatMono-Light.ttf);
  }

  html {
    background:rgb(254,240,240);
    margin: 0;
    height: 100%;
  }  

  /* link colours */
  a {
    color: hotpink;
    transition-duration: 0.5s;

  }
  a:hover{
    background-color: #fdd6f8; 
    color: white;
  }


  /* --------------------- Site logo -----------------------------*/

#site-logo{
  position: left;
  left: 50px;
  top: 20px;
  border: none;
  padding: 0;
  outline: none;
  background: none;

}
.site-logo-button{
  /* color:rgb(155, 148, 148); */
  background:rgb(254, 254, 254,0);
  text-decoration: none;
  transition-duration: 0.3s;

}
.site-logo-button:hover{
    background-color: #fdd6f8; /* Green */
    color: white;
  }
.site-logo-button:active {
    background-color: #98b9be;
    box-shadow: 5px 5px #fdd6f8;
    transform: translateY(10px);
  }  


  /* --------------------- Navigation Bar -----------------------------*/
  #nav-bar{
    position: relative;
    width: 15%;
    /* right: 50px; */
    height: 50%;
    z-index: 1;
    /* top: 10%; */
    background: rgb(255, 255, 255);
    overflow-x: hidden;
    padding: 8px 0;
    font-family: myRedHat;
    float: left;
    border: #fdd6f8;
    
    }
  
  .nav-bar-title{
    color: #000000;
    border: none;
    font-size: 22px;
  } 
  .nav-bar-link{
    color:rgb(155, 148, 148);
    background:rgb(254, 254, 254);
    border:black;
    /* text-justify: left; */
    text-decoration: none;
    font-size: 15px;
    transition-duration: 0.3s;
    cursor:pointer;
      /*box-shadow: 0 5px #666;*/
    } 
  .nav-bar-link:hover{
      background-color: #fdd6f8; /* Green */
      color: white;
    }   
  .nav-bar-link:active {
      background-color: #98b9be;
      box-shadow: 5px 5px #fdd6f8;
      transform: translateY(10px);
    }  

  /* --------------------- Title Graphic Div Background -----------------------------*/

#titleGraphicDiv{
    /* width and height will only matter if something
      coming after it */
      top: 0px;
      left: 0px;
      position: absolute;
      /* move to background*/
      z-index: 0;
    }
  

/* --------------------- Title Words -----------------------------*/
#titleWords{
    position:absolute;
    z-index: 20;
    /* top:-3px; */
    left: 0px;  
    width: 100%;
    color:rgb(155, 148, 148);
    text-align: center;
    font-size: 18px;
    height: 20px;
    font-family: myRedHat;
    /* animation: move 20s infinite linear; */

    /*background-color: rgba(179, 226, 185, 0.527);*/
  }

  /* --------------------- Footer Words -----------------------------*/

  #footerWords{
    position:fixed;
    z-index: 20;
    bottom:40px;
    left: 0px;   
    width: 100%;
    color:rgb(109, 61, 61);
    text-align: center;
    font-size: 18px;
    height: 20px;
    font-family: myRedHat;
    animation: move 20s infinite linear;
  }

  @keyframes move{
    from{
      left: 850px
    }
    to{
      left: -850px
    }
  }

/*---------- Index Text writting----------*/

/*This part is important for centering*/
.wrapper { 
  /* height: 100vh; */

  width: 50%;
  position: absolute;
  left: 25%;
  /* border:1px solid black; */
  background-color: rgb(254,254,254,0.1);

  /* display: grid;*/
  /* float: centre; */
} 

.type {
  left: 200px;
  color:#0000;
  font-family: myRedHat;
  font-size:xx-large;
  background:
    linear-gradient(-90deg,#1f2627 5px,#0000 0) 10px 0,
    linear-gradient(#182425 0 0) 0 0;
  background-size:calc(var(--n)*1ch) 100%;
  -webkit-background-clip:padding-box,text;
  background-clip:padding-box,text;
  background-repeat:no-repeat;
  float: centre;
  animation: 
   b .7s infinite steps(1),   
   t calc(var(--n)*0.1s) steps(var(--n)) forwards;
}

@keyframes t{
  from {background-size:0 200%}
}
@keyframes b{
  50% {background-position:0 -100%,0 0}
}


/* .typing-demo {
  width: 22ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
} */




  /* --------------------- Main Graphic Background -----------------------------*/

#mainGraphicDiv{
    /* width and height will only matter if something
      coming after it */
      width: 100%;
      height: 10px;
      top:0px;
      left: 0px;
      position: absolute;
      /* move to background*/
      z-index: -10;
    }
    
    #main-graphic.fade{
      opacity: 0;
    }
    #main-graphic.nofade{
      opacity: 1;
    }
/* --------------------- about paragraph Form -----------------------------*/
#main-content-bg{
  position:relative;
  float: centre;
  width: 50%;
  margin: auto;
  top: 0px;
  font-family: myRedHat;
  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.189), rgba(228, 208, 208, 0.249));
  /* background-color: rgb(250, 250, 250); */

}

/* resize projectimages to fit witch */
.project-images{
  position:relative;
  /* display: block; */
  max-width: 100%;
}

/* --------------------- about paragraph Form -----------------------------*/
#aboutDiv{
    /* width and height will only matter if something
      coming after it */
      width: 40%;
      float: right;
      right: 40px;   
      top: 100px;
      position: relative;
      color: rgb(254,250,250);
      transition-duration: 0.9s;
     
    }
p.about{
        font-family: myRedHat; 
        text-align: right;
      }
      
  
  
  
  /* --------------------- Contact Form -----------------------------*/
  #contactFormDiv{
    /*display: 1.0;*/
    position:relative;
    margin: auto;
    
    font-family: myRedHat;
    top: 0px;
    left: 50px;
    float: centre;
    width: 50%;
    height: 400px;
    /* border: 1px solid; */
    color: rgb(62, 36, 36);
    /* display: none; */
    transition-duration: 0.9s;
    /* margin: 0; */
    
  }

  input.text {
    font-family: verdana;
    font-size: 15px;
    width: 50%;
    /* margin: 4 px; */
    left: 0px;
    position: relative;
  }

  textarea{
    height:270px;
    width: 50%;
    /* left: 59px; */
    position: relative;
  
  }
  #submit-button{
    position: relative;
    float: centre;
    background:rgb(254, 254, 254);
    border:1px solid;
    font-family: myRedHat;
    font-size: 18px;
    transition-duration: 0.3s;
    cursor: pointer;
    /*box-shadow: 0 5px #666;*/
  }
  
  #submit-button:hover{
    background-color: #fdd6f8; /* Green */
    color: white;
  }
  
  #submit-button:active {
    background-color: #98b9be;
    box-shadow: 50px 50px #fdd6f8;
    transform: translateY(10px);
  }  
  
  
/*-----------Enter button----------------------------*/
#enterButtonDiv{
    width: 1px;
    height: 1px;
    top: 50px;
    margin: 0;
    position:absolute;
    z-index: 20;
    
  }
  
  #enter-button{
    background:rgb(254, 250, 250);
    border: none;
    font-family: myRedHat;
    font-size: 18px;
    transition-duration: 0.3s;
    cursor: pointer;
    /*box-shadow: 0 5px #666;*/
  }
  
  #enter-button:hover{
    background-color: #fdd6f8; /* Green */
    color: white;
  }
  
  #enter-button:active {
    background-color: #98b9be;
    box-shadow: 50px 50px #fdd6f8;
    transform: translateY(10px);
  }
  
  /* this doesnt do anything..*/
  #enter-button:after{
    /*margin-top: -120%;*/
    background-color: #000000;
    /*transition: all 0.2s*/
    display: none;
  }
  


  /*-----------Project Pages----------------------------*/
.Pcontainer {
    height: 200vh;
    max-width: 600px;
    margin: auto;
    display: flex;
    font-family: myRedHat;
    flex-direction: column;
    justify-content: center;
  
    padding: 1rem;
   }

   /* animation class and keyframes */
.overflow-hidden {
  overflow: hidden;
 }
 
 .header {
  margin: 0.25rem 0;
  font-size: 4.5rem;
  font-family: myRedHat;
  text-justify: centre;
  background-color: rgb(247, 251, 243,0);
 }
 

 .drop-in {
  animation: drop-in 1s ease 200ms backwards;
 }
 .drop-in-2 {
  animation: drop-in 1200ms ease 500ms backwards;
 }


 @keyframes drop-in {
  from {
   opacity: 0;
   transform: translateY(-100px);
  }
  to {
   opacity: 1;
   transform: translate(0px);
  }
 }