html{

  scroll-behavior: smooth;

  }

body {
    color:aliceblue;
    font-size: 2rem;
    background-color: #111;
    margin: 0;
  }

ul {
    opacity: 0;
    display: flex;
    text-align: center;
    justify-content: center;
    list-style-type: none;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:transparent;
    position: -webkit-sticky;
    /*Safari*/position: sticky;
    top: 0;
    z-index: 5;
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
}

#menu{

  height: 16vh;

}

li {
    float: left;
    font-family: 'emoji';
  }

li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
}
.element::-webkit-scrollbar { width: 0 !important }


  @keyframes example {
    0%   {top: 0px;}
    100% {}
  }

.active {
    height: 7vh;
  }

.header1{
  text-align: center;
  font-size: 3vh;
  font-family: 'VT323';
  color: #4CAF50;
  background-color: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: -1;
  transition: 1s;
  flex-direction: column;
}

#test{
  background-color: #111;
  height:100vh;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  margin: 0;
  padding-left: 2rem;
  padding-right: 2rem;
  overflow-x: hidden;
  overflow-y: hidden;
  perspective: 10px;
  z-index: 2;
  top:0;

}

.wrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform-style: preserve-3d;
}

.bg,
.fg,
.fg2{

position: absolute;
height: 100%;
width: 100%;
object-fit: fill;
}

.bg{
  transform: translateZ(-10px) scale(2) ; -webkit-transform: translateZ(-10px) scale(2) ; -moz-transform: translateZ(-10px) scale(2) ; -ms-transform: translateZ(-10px) scale(2) ; -o-transform: translateZ(-10px) scale(2) ;
}

.fg{
  transform: translateZ(0px) scale(1);
  -webkit-transform: translateZ(0px) scale(1);
  -moz-transform: translateZ(0px) scale(1);
  -ms-transform: translateZ(0px) scale(1);
  -o-transform: translateZ(0px) scale(1);
}

.fg2{
  transform: translateZ(1.8px) scale(0.82);
  -webkit-transform: translateZ(1.8px) scale(0.82);
  -moz-transform: translateZ(1.8px) scale(0.82);
  -ms-transform: translateZ(1.8px) scale(0.82);
  -o-transform: translateZ(1.8px) scale(0.82);
}


#test2{

  background-color: #111;
    display: flex;
    margin: 0;
    padding: 0;
    /* z-index: 3; */
    /* top: 0; */
    justify-content: center;
}

.visible{
opacity: 1;
}

@keyframes fadeIn {
  0% {
      transform: scale(0);
      opacity: 0.0;
  }
  60% {
      transform: scale(1.1);
  }
  80% {
      transform: scale(0.9);
      opacity: 1;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

.head_mzwolenik{

  position: absolute;
  margin-bottom: 20rem;
  font-size: 7vh;
  font-family: 'VT323';
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
}

#coalkid{
  opacity: 0;
  width: 30vw;
  position: relative;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -ms-transition: 2s;
  -o-transition: 2s;
}

#about_ckid{
  opacity: 0;
  font-size: calc(10px + 1.5vw);
  color: #51d0a9;
  width: 50vw;
  position: relative;
  font-family: 'VT323';
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
}

#separator{

  width: 100%;
  background-color: #111;
}

.wrap2{
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
  transform-style: preserve-3d;
}

#bad{
height: 50vh;
background-color: #51d0a9;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}

#technowrap{

  display: flex;
  align-items: center;
}



.wrap1img{
  position: relative;
  display: flex;
  height: 10vw;
  animation: floatAnimation 2s ease-in-out infinite;
  -webkit-animation: floatAnimation 2s ease-in-out infinite;
}

.wrap2img{
  position: relative;
  display: flex;
  height: 10vw;
  animation: floatAnimation 2s ease-in-out infinite;
  -webkit-animation: floatAnimation 2s ease-in-out infinite;
  animation-delay: 250ms;
}

.wrap3img{
  position: relative;
  display: flex;
  height: 10vw;
  animation: floatAnimation 2s ease-in-out infinite;
  -webkit-animation: floatAnimation 2s ease-in-out infinite;
  animation-delay: 500ms;
}

@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5vh);
    -webkit-transform: translateY(-5vh);
    -moz-transform: translateY(-5vh);
    -ms-transform: translateY(-5vh);
    -o-transform: translateY(-5vh);
}
}

#power{
font-size: calc(10px + 1.5vw);
color: #111111;
width: 40vw;
position: relative;
font-family: 'VT323';
transition: 1s;
}

#skull{

  height: 5vh;
  transition: 1s;
}

#space_invader{

  height: 5vh;
  transition: 1s;
}

#alien{

  height: 5vh;
  transition: 1s;
}

#alien:hover{

  height: 6vh;

}

#skull:hover{

  height: 6vh;

}

#space_invader:hover{

  height: 6vh;

}

#home {
  height: 5vh;
  color: aliceblue;
  display:none;
  font-family: 'VT323';

}

#play {
  height: 5vh;
  color:#886ce4;
  display:none;
  font-family: 'VT323';

}

#about {
  height: 5vh;
  color:#79db75;
  display: none;
  font-family: 'VT323';

}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #463967;
  color: white;
  font-family: 'VT323';
  font-size: 2vh;
  text-align: center;
}

canvas {

  touch-action: none;
  width:200px;
  height: 300px;
  background-color: #33225a;
  object-fit: contain;
}

#good {
  overflow: hidden;
    position: relative;
    height: 50vh;
    background-color: #33225a;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: flex-start;
}
#github {
  position: relative;
  top: -50vh;
  display: flex;
  height: 100%;
  width: 25vw;
  background-color: #111111;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  animation: unset;
  animation-iteration-count: unset;
  -webkit-animation: unset;
  flex-direction: column;
}

@keyframes drop{
  0%{}
  100%{ transform: translateY(50vh); -webkit-transform: translateY(50vh); -moz-transform: translateY(50vh); -ms-transform: translateY(50vh); -o-transform: translateY(50vh); }
}


#git_image{
   transition:0.5s;
   width:28vw;
   filter: invert(82%) sepia(15%) saturate(1424%) hue-rotate(105deg) brightness(87%) contrast(89%);
   -webkit-transition:0.5s;
   -moz-transition:0.5s;
   -ms-transition:0.5s;
   -o-transition:0.5s;
   -webkit-filter: invert(82%) sepia(15%) saturate(1424%) hue-rotate(105deg) brightness(87%) contrast(89%);
}
#git_image:hover{

  width:33vw;

}
#git_login{
  color: #ccd6dd;
  font-family: 'VT323';
}

#lucy_handler{
  width: 18vw;
  height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

}

#lucy_speak{

  font-size:calc(10px + 1.5vw);
  font-family: 'VT323';
  color: #4fd0a9;;
  transition: 1s;

}

#lucy{

  width: 100%;

}

#playground_space{
    font-size: 3vh;
    display: flex;
    font-family: 'VT323';
    color: #8a5bcd;
    transition: 1s;
    height: 80vh;
    justify-content: space-around;
}

#about_me_container{
  font-size: calc(10px + 1.5vw);
  display: flex;
  font-family: 'VT323';
  color: #79db75;
  transition: 1s;
  height: 80vh;
  justify-content: space-around;
  align-items: flex-start;


}

#me{

width: 30vw;

}
#about_me{
color: #79db75;
width: 50vw;

}
#arrow{
  transition: 1s;
  opacity: 0;
  filter: invert(55%) sepia(46%) saturate(595%) hue-rotate(73deg) brightness(97%) contrast(83%);
  animation: arrowAnimation 2s ease-in-out infinite;
  -webkit-animation: arrowAnimation 2s ease-in-out infinite;
}

@keyframes arrowAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2vh);
    -webkit-transform: translateY(-2vh);
    -moz-transform: translateY(-2vh);
    -ms-transform: translateY(-2vh);
    -o-transform: translateY(-2vh);
}
}