* {
  margin:0;
  padding:0;}

body {
  font-family: monospace;
}

header {
  height:80px;          
  background:rgba(0,0,0,0.25); 
  position:fixed; 
  z-index:1; 
  width:100%;
}










/* Create a sticky/fixed navbar */
.fullscreen-nav-bar {
  
  width:100%;
  overflow:hidden;
  position: fixed; /* Sticky/fixed navbar */
  top:-10%; /* At the top */
  z-index:999;
  padding: 1.2vh 0 0 38vw;
  
  
  .container {
   
  margin:0 auto;
  max-width: $max-width;
  display: flex;
  justify-content: space-between;
  align-items: center;


    nav {

      ul {

        li {

          list-style: none;
          display: inline;
          margin: 1rem;
          padding: 2rem;

          a {

            color: $font-color;
            text-decoration: none;
            text-transform: uppercase;


          }

        }

      }

    }

    }
  
}

.nav-transparent {
  
  background: rgba(255,255,255,0.05);
  padding: 0;
  
}








.wrapper{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.wrapper .wrapper__video{
  object-fit: cover;
  width: 100%;
  height: 100%;
}








main{
  display: flex;
  justify-content: center;
  height: 100%;
  min-height: 100%;
  width: 100%;
}

canvas{
  position: fixed;
  top: 0;
  left: 0;
}

.plate{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  color: white;
  letter-spacing: 4px;
  font-size: 0.6em;
  line-height: 2.5;
}

a{
  text-underline: none;
  -webkit-appearance: none;
}

.social{
  padding-top: 1rem;
  svg{
    height: 1.25rem;
    margin: 0 0.5rem;
    fill: rgba(255,255,255,0.3);
    transition: all 0.2s ease;
    &:hover{
      fill: white;
    }
  }
  a{
    vertical-align: middle;
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.7s ease 0.15s;
  }
  &__twitter{
    transform: translateX(-10px);
  }
  &__codepen{
    transform: translateX(10px);
  }
  &.active{
    opacity: 1;
    a{
      opacity: 1;
      visibility: visible;
      transform: none;
    }
  }
}

.mouse{
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  padding: 1rem 0;
  z-index: 2;
  color: rgba(255,255,255,0.3);
  width: 100%;
  letter-spacing: 6px;
  font-size: 0.45em;
  line-height: 2.5;
  text-transform: uppercase;
  transition: all 0.5s ease;
  opacity: 0;
  transform: translateY(-15px);
  &.active{
    transform: none;
    opacity: 1;
  }
}

.text-animation{
  opacity: 0;
  &.active{
    opacity: 1;
  }
  .letter{
    opacity: 0;
    transition: color 0.5s ease, opacity 0.3s ease;
    transform-origin: bottom;
    color: white;
    &.active{
      color: rgba(255,255,255,0.3);
      opacity: 1;
      transform: none;
      animation: color 5s ease infinite 3s;
    }
  }
}

@keyframes color {
  0%{
    color: rgba(255,255,255,1);
  }
  20%{
    color: rgba(255,255,255,0.3);
  }
  100%{
    color: rgba(255,255,255,0.3);
  }
}











.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(0,0,0,.3) 70%, rgba(0,0,0,.7) 70%);
  background-size: 3px 3px;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay h2{
  height: 300vh;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color:white
}

.overlay p{
  position: fixed;
  top: 50%;
  width: 26ch;
  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;
  color: rgba(0,0,0,0.7);
}


.overlay_about {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(0,0,0,.8) 70%, rgba(0,0,0,.7) 70%);
  background-size: 3px 3px;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


















.bg1 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/01.jpg);
		background-size:cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
		background-attachment:fixed;
		background-position:center center;
		position:relative;
		}

.bg2 {
    background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/02.jpg);
    background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    background-position:center center;
    background-attachment:fixed;
    position:relative;
    }

.bg3 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/03.jpg);
		background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
		background-position:center center;
		background-attachment:fixed;
		position:relative;
		}

.bg4 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/04.jpg);
		background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
		background-position:center center;
		background-attachment:fixed;
		position:relative;
		}

.bg5 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/05.jpg);
		background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
		background-position:center center;
		background-attachment:fixed;
		position:relative;
		}

.bg6 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/06.jpg);
		background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
		background-position:center center;
		background-attachment:fixed;
		position:relative;
		}

.bg7 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/07.jpg);
		background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
		background-position:center center;
		background-attachment:fixed;
		position:relative;
		}

.bg8 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/08.jpg);
		background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
		background-position:center center;
		background-attachment:fixed;
		position:relative;
		}

.bg9 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/09.jpg);
		background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
		background-position:center center;
		background-attachment:fixed;
		position:relative;
		}

.bg10 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/10.jpg);
		background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
		background-position:center center;
		background-attachment:fixed;
		position:relative;
		}

.bg11 {
		background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/11.jpg);
		background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
		background-position:center center;
		background-attachment:fixed;
		position:relative;
		}

.bg12 {
    background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/12.jpg);
    background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    background-position:center center;
    background-attachment:fixed;
    position:relative;
    }

.bg13 {
    background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/13.jpg);
    background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    background-position:center center;
    background-attachment:fixed;
    position:relative;
    }


.bg14 {
    background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/14.jpg);
    background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    background-position:center center;
    background-attachment:fixed;
    position:relative;
    }

.bg15 {
    background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/15.jpg);
    background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    background-position:center center;
    background-attachment:fixed;
    position:relative;
    }

.inner {
			text-align:center;
			width:100%;
			min-height:420px;
			position:relative;
			}

.inner1 {
			text-align:center;
			width:100%;
			min-height:98vh;
			position:relative;
			}

.txt_con {
			position:absolute;
			top:90%;
			height:10em; 
			margin-top:-5em; 
			width:100%;
			color:#fff;
      font-size: 14px;
      z-index: 2;
			}

.txt_con_about {
      position:fixed;
      top: 20%;
      height: 10em; 
      margin-top: -5em;
      width: 100%;
      color: #FAEBD7;
      font-size: 14px;
      margin-left: 8%; 
      z-index: 999;
      line-height: 2.5;
      }















/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #333;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #222;
}






























html, body
{
    margin: 0px;
}

header, footer
{
    font-family: monospace;
    margin: 0 auto;
  padding: 5em 3em;
  text-align: center;
    background: #555;
}

header h1
{
    color: #AAA;
    font-size: 40px;
    font-weight: lighter;
    margin-bottom: 5px;
}

header span
{
    color: #222;
}

footer span
{
  color: #AAA;
}

div.containerNAV
{
    font-family: monospace;
    margin: 5 auto;
    padding: 13vh 3em;
    text-align: center;
}

div.containerNAV a
{
    color: #fff;
    text-decoration: none;
    font: 14px monospace;
    margin: 20px 20px;
    padding: 12px 0px;
    position: relative; right: -6vh;
    z-index: 5;
    cursor: pointer;
}

div.containerBOT
{
    font-family: monospace;
    margin: 5 auto;
    padding: 13vh 3em;
    text-align: center;
}

div.containerBOT a
{
    color: #fff;
    text-decoration: none;
    font: 14px monospace;
    margin: 20px 20px;
    padding: 12px 0px;
    position: relative;
    z-index: 5;
    cursor: pointer;
}


div.container_about_NAV
{
    font-family: monospace;
    margin: 5 auto;
    padding: 13vh 3em;
    text-align: center;
}

div.container_about_NAV a
{
    color: #FAEBD7;
    text-decoration: none;
    font: 14px monospace;
    margin: 20px 20px;
    padding: 12px 0px;
    position: relative; right: -6vh;
    z-index: 5;
    cursor: pointer;
}

div.container_about_BOT
{
    font-family: monospace;
    margin: 5 auto;
    padding: 0em 3em;
    text-align: center;
}

div.container_about_BOT a
{
    color: #FAEBD7;
    text-decoration: none;
    font: 14px monospace;
    margin: 20px 20px;
    padding: 12px 0px;
    position: relative; right: 0px; bottom: 120px;
    z-index: 5;
    cursor: pointer;
}





.red
{
    background: #f44336;
}

.purple
{
    background: #673ab7;
}

.indigo
{
    background: #3f51b5;
}

.blue
{
    background: #2196f3;
}

.cyan
{
    background: #00bcd4;
}

.teal
{
    background: #009688;
}

.green
{
    background: #4caf50;
}

.lightGreen
{
    background: #8bc34a;
}

.lime
{
    background: #c0ca33;
}

.yellow
{
    background: #fdd835;
}

.amber
{
    background: #ffc107;
}

.orange
{
    background: #ff9800
}

.deepOrange
{
    background: #ff5722;
}

.brown
{
    background: #795548;
}

.gray
{
    background: #9e9e9e;
}

.black
{
    background: #000;
}

.bgbot
{
    background:url(https://raw.githubusercontent.com/hoangfx/laladee.me/refs/heads/main/aboutme.jpg);
    opacity: 100%;
    background-size:cover;
        background-size:cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    background-position:center center;
    background-attachment:fixed;

    
}

/* Top and Bottom borders go out */
div.topBotomBordersOut a:before, div.topBotomBordersOut a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersOut a:before
{
    top: 0px;
    transform: translateY(10px);
}

div.topBotomBordersOut a:after
{
    bottom: 0px;
    transform: translateY(-10px);
}

div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

/* Top and Bottom borders come in */
div.topBotomBordersIn a:before, div.topBotomBordersIn a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersIn a:before
{
    top: 0px;
    transform: translateY(-10px);
}

div.topBotomBordersIn a:after
{
    bottom: 0px;
    transform: translateY(10px);
}

div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

/* Top border go down and Left border appears */
div.topLeftBorders a:before
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2px;
    height: 0px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

div.topLeftBorders a:after
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

div.topLeftBorders a:hover:before
{
    height: 100%;
}

div.topLeftBorders a:hover:after
{
    opacity: 0;
    top: 100%;
}

/* Circle behind */
div.circleBehind a:before, div.circleBehind a:after
{
    position: absolute;
    top: 22px;
    left: 50%;
    width: 90px;
    height: 90px;
    border: 4px solid #fff;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
    border-radius: 50%;
    background: transparent;
    content: "";
    opacity: 0;
    transition: all 0.3s;
    z-index: -1;
}

div.circleBehind a:after
{
    border-width: 2px;
    transition: all 0.4s;
}

div.circleBehind a:hover:before
{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

div.circleBehind a:hover:after
{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1.3);
}

/* Brackets go out */
div.brackets a:before, div.brackets a:after
{
    position: absolute;
    opacity: 0;
    font-size: 35px;
    top: 0px;
    transition: all 0.3s;
}

div.brackets a:before
{
    content: '(';
    left: 0px;
    transform: translateX(10px);
}

div.brackets a:after
{
    content: ')';
    right: 0px;
    transform: translateX(-10px);
}

div.brackets a:hover:before, div.brackets a:hover:after
{
    opacity: 1;
    transform: translateX(0px);
}


/* Border from Y to X  */
div.borderYtoX a:before, div.borderYtoX a:after
{
    position: absolute;
    opacity: 0.5;
    height: 100%;
    width: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

div.borderYtoX a:before
{
    left: 0px;
    top: 0px;
}

div.borderYtoX a:after
{
    right: 0px;
    bottom: 0px;
}

div.borderYtoX a:hover:before, div.borderYtoX a:hover:after
{
    opacity: 1;
    height: 2px;
    width: 100%;
}

/* Border X get width  */
div.borderXwidth a:before, div.borderXwidth a:after
{
    position: absolute;
    opacity: 0;
    width: 0%;
    height: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

div.borderXwidth a:before
{
    left: 0px;
    top: 0px;
}

div.borderXwidth a:after
{
    right: 0px;
    bottom: 0px;
}

div.borderXwidth a:hover:before, div.borderXwidth a:hover:after
{
    opacity: 1;
    width: 100%;
}

/* Pull down  */
div.pullDown a:before
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullDown a:hover:before
{
    height: 100%;
}

/* Pull up  */
div.pullUp a:before
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    bottom: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullUp a:hover:before
{
    height: 100%;
}

/* Pull right  */
div.pullRight a:before
{
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullRight a:hover:before
{
    width: 100%;
}

/* Pull left  */
div.pullLeft a:before
{
    position: absolute;
    width: 2px;
    height: 100%;
    right: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullLeft a:hover:before
{
    width: 100%;
}

/* Pull up and down  */
div.pullUpDown a:before, div.pullUpDown a:after
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullUpDown a:before
{
    top: 0px;
} 

div.pullUpDown a:after
{
    bottom: 0px;
}

div.pullUpDown a:hover:before, div.pullUpDown a:hover:after
{
    height: 100%;
}

/* Pull right and left  */
div.pullRightLeft a:before, div.pullRightLeft a:after
{
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullRightLeft a:before
{
    left: 0px;
} 

div.pullRightLeft a:after
{
    right: 0px;
}

div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after
{
    width: 100%;
}

/* Highlight text out  */
div.highlightTextOut a
{
    color: rgba(255, 255, 255, 0.3); 
}

div.highlightTextOut a:before, div.highlightTextIn a:before
{
    position: absolute;
    color: #FFF;
    top: 0px;
    left: 0px;
    padding: 10px;
    overflow: hidden;
    content: attr(alt);
    transition: all 0.3s;
    transform: scale(0.8);
    opacity: 0;
} 

div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before
{
    transform: scale(1);
    opacity: 1;
}

/* Highlight text in  */
div.highlightTextIn a
{
    color: rgba(0, 0, 0, 0.4); 
}

div.highlightTextIn a:before
{
    transform: scale(1.2);
} 






























#text3d {
  font-family: helvetica;
  text-transform: uppercase;
  text-align: center;
  color: #fefefe;
  text-shadow: #999 3px 5px 0,
               #888 4px 6px 3px,
               #ccc 8px 11px 10px;
}

#letterpress {
  background: #fff;
  color: transparent;
  text-shadow: 0px 1px 3px rgba(250,250,250,0.95);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;

}



#text_neon {
    color: #f5f5f5;
    text-shadow: 0 0 3px #f5f5f5,
               0 0 15px #7deaec,
               0 0 30px #7deaec;
}




.copy-area {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    opacity: 0;
}