@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;600&display=swap');
::selection { 
  background: #0d798e; 
  color: #000;}

body {
  height: 100vh;
  width: 100%;
  background: #111;
  background: linear-gradient(rgba(10, 10, 10, 0.94), rgba(0, 0, 0, 0.25)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url('/img/bg.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;

font-family: 'Montserrat', sans-serif;
    color: #fff;
}
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
}

.section {
  /*border: 1px dashed rgb(28 87 95 / 30%);*/
  padding: 4rem 5rem;
  max-width: 523px;
}
.contact {
  display: flex;
}

a {
  text-decoration: none;
  color: #fff;
}

.contact-item {
  width: 50%;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  background: red;
  margin-right: 10px;
  background: rgb(255 255 255 / 5%);
  transition: background 200ms;
}

.contact-item:hover {
  background: #fff;
  color: #000;
  font-weight: 900;
}

.contact-item:hover path {
  fill: #000;
}

.contact-icon {
  min-width: 32px;
  margin-right: 1rem;
}

.contact path {
  fill: #fff;
}

.text__glitch {
  font-size: 3rem;
  text-transform: uppercase;
  animation: glitch 4s infinite;
  margin-top: 2rem;
  margin-bottom: 0;
}

@keyframes glitch {
	// FIRST GLITCH
	30%{
		text-shadow: 3px -3px 0px rgba(60, 85, 255, 1);
	}
	32%{
		text-shadow: -3px 3px 0px rgba(255,85,0,1);	
	}
	0%, 28%, 34%{
		text-shadow: none;
	}
	31%,32%{
		transform: translate(-2px,2px);
	}
	32%,33%{
		transform: translate(2px,-2px);
	}
	31%,33%{
		transform: translatex(0);
	}
	
	// SECOND GLITCH
	50%{
		text-shadow: 1px 1px 0px rgba(60, 85, 255, 1);
		
	}
	52%{
		text-shadow: -1px -1px 0px rgba(255,85,0,1);	
		
	}
	48%, 54%{
		text-shadow: none;
	}
	49%,52%{
		transform: translatex(0);
	}
	50%{
		transform: translate(2px,2px);
	}
	51%{
		transform: translate(-2px,-2px);
	}
}

.text__glitch::after{
    position: absolute;
    content: attr(data-text);
    bottom: 0;
    left: 0;
    color: #fff;
    background-color: #242423;
    width: 100%;
    visibility: hidden;
  animation: clip 4s infinite;
}

@keyframes clip{
	28%, 31%{
        clip: none;
        left: 0;
        visibility: visible;
				color: #FFF;
	}
	30%{
        clip: rect(60px, 999px, 80px, 0px);
        left: -5px;
				color: #D1C9B8;
    }
    48%, 52%{
        clip: none;
        left: 0;
        visibility: visible;
				color: #FFF;
	}
	50%{
        clip: rect(30px, 999px, 55px, 0px);
        left: 5px;
				color: #D1C9B8;
    }
    
}

.text__developer {
  font-size: .75rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.text__list {
  margin: 0; 
  padding: 0;
  list-style: none;
  color: #999;
}

.text__list:hover {
  font-size: .75rem;
}

.text__list li {
  transition: font-size 20ms;
}


.text__list li::before {
  content: "// ";
}

.text__list li.main {
  background: #0d798e;
  color: #000;
  font-size: 2rem;
  display: inline;
  margin: 1rem 0 1rem 3rem;
  padding: 0 1rem ;
}

.text__list li.main::before {
  content: "";
}

.text__list li:hover {
  font-size: 2rem;
}

.text__quote {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  margin-top: 2rem;
}

.text__quote p {
  margin: 0;
  padding: 0;
}

.text__quote-author {
  opacity: .4;
}