*{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


nav{
    position: relative;
}


a{
    text-decoration: none;
    color: white;
    transition: all 0.2s ease-in-out;
}

a:hover{
    color: #AA8000;
}
a:active{
  color: #AA8000;
}

ul{
  list-style: none;
}

li{
  color: white;
  font-size: 1.5em;
  transition: all 0.2s ease-in-out;
}

li:hover{
  color: #AA8000;
}
li:active{
color: #AA8000;
}


#lineh5{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    background: #AA8000;
    animation: lineH 6s 2s infinite linear;
}

#lineh6{
    position: absolute;
	right: 0;
    bottom: 0px;
	height: 5px;
	background: #AA8000;
	animation: lineH 6s 2s infinite linear;
}

@keyframes lineH{
    0%{
        width: 0%;
    }
    100%{
width: 100%;opacity: 0;
}
}


.content{
    margin-top: 5em;
}

.presentation{
    border-top: 2px solid #AA8000;
    border-left: 2px solid #AA8000;

}

.presentation2{
  border-bottom: 2px solid #AA8000;
  border-left: 2px solid #AA8000;

}

.skill{
    width: 40em;
    padding: 1em;
    border: 2px solid #AA8000;
    border-radius: 30px;
}
.language{
    width: 70px;
}

.button1{
    border: 1px solid #AA8000;
    padding: 2em;
    color: white;
}



/* CSS */
.button-49,
.button-49:after {
  padding-left: .5em;
  height: 76px;
  line-height: 78px;
  font-size: 1em;
  font-family: 'Bebas Neue', sans-serif;
  background: linear-gradient(45deg, transparent 5%, #2c2a2a 5%);
  border: 0;
  color: #fff;
  letter-spacing: 1px;
  box-shadow: 6px 0px 0px #AA8000;
  outline: transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-49:after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  
  content: 'WEB DEVELOPMENT';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #AA8000 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}

.button-49:hover:after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

@media (min-width: 768px) {
  .button-49,
  .button-49:after {
    width: 200px;
    height: 86px;
    line-height: 88px;
  }
}


.flip-card {
  background-color: transparent;
  width: 550px;
  height: 200px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  border: 1px solid #AA8000;
  border-radius: 30px;
  color: black;
}

/* Style the back side */
.flip-card-back {
  border: 1px solid #AA8000;
  border-radius: 30px;
  color: white;
  transform: rotateY(180deg);
}


.fa-house{
  color: white;
}


.certificate{
  height: 18em;
  border-radius: 30px;
  transition: height 2s;
}
.certificate:hover{
  height: 19em;
}

.work{
  border-bottom: 2px solid #AA8000;
}