html, body {
  background: #EB5757;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #000000, #EB5757);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #000000, #EB5757); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: 'Architects Daughter', cursive;
}

.jumbotron {
  background: #EB5757;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #000000, #EB5757);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #000000, #EB5757); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 color: white;
 font-family: 'Architects Daughter', cursive;
}

.jummbotron {
  font-family: 'Architects Daughter', cursive;
  color: white;
}

/* em {
color: white;
	font-family: 'Architects Daughter', cursive;
   font-weight: bolder;
font-family: 'Architects Daughter', cursive;
} */


.been {
color: black;
font-family: 'Architects Daughter', cursive;
}

/* custom 3d links  */
          .button .list {
            list-style:none;
            margin:0 5px;
            
          }
          
          .button .list a .fa {
            font-size: 40px;
            color: #262626;
            line-height:80px;
            transition: .5s;
            padding-right: 14px;
          }
          
          .button .list a span {
            padding:0;
            margin:0;
            position:absolute;
            top: 30px;
            color: #262626;
            letter-spacing: 4px;
            transition: .5s;
          }
          
          /* social button size  */
          .button .list a {
            text-decoration: none;

            position: relative;
            display: block;

            width:260px;
            height:80px;
            background: grey;
            text-align: left;
            padding-left: 20px;
            transform: rotate(-0deg) skew(0deg) translate(0,0);
            transition:.5s;
            box-shadow: -70px 20px 10px rgba(0,0,0,.5);
          }
          .button .list a:before {
            content: '';
            position: absolute;
            top:10px;
            left:-20px;
            height:100%;
            width:20px;
            background: #b1b1b1;
            transform: .5s;
            transform: rotate(0deg) skewY(-45deg);
          }
          .button .list a:after {
            content: '';
            position: absolute;
            bottom:-20px;
            left:-10px;
            height:20px;
            width:100%;
            background: #b1b1b1;
            transform: .5s;
            transform: rotate(0deg) skewX(-45deg);
          }
          
          .button .list a:hover {
            transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
            box-shadow: -50px 50px 50px rgba(0,0,0,.5);
          }
          
          .button .list:hover .fa {
            color:#fff;
          }
          
          .button .list:hover span {
            color:#fff;
          }
            
          .button .list:hover:nth-child(1) a{
            background: #3b5998;
          }
          .button .list:hover:nth-child(1) a:before{
            background: #365492;
          }
          .button .list:hover:nth-child(1) a:after{
            background: #4a69ad;
          }
          
          .button .list:hover:nth-child(2) a{
            background: #00aced;
          }
          .button .list:hover:nth-child(2) a:before{
            background: #097aa5;
          }
          .button .list:hover:nth-child(2) a:after{
            background: #53b9e0;
          }
          
          .button .list:hover:nth-child(3) a{
            background: #dd4b39;
          }
          .button .list:hover:nth-child(3) a:before{
            background: #b33a2b;
          }
          .button .list:hover:nth-child(3) a:after{
            background: #e66a5a;
          }
          
          .button .list:hover:nth-child(4) a{
            background: #e4405f;
          }
          .button .list:hover:nth-child(4) a:before{
            background: #d81c3f;
          }
          .button .list:hover:nth-child(4) a:after{
            background: #e46880;
          }

          .button .list:hover:nth-child(5) a{
            background: grey;
          }
          .button .list:hover:nth-child(5) a:before{
            background: #555253;
          }
          .button .list:hover:nth-child(5) a:after{
            background: #aca5a6;
          }

          .button .list:hover:nth-child(6) a{
            background: #363634;
          }
          .button .list:hover:nth-child(6) a:before{
            background: #222324;
          }
          .button .list:hover:nth-child(6) a:after{
            background: #615f5f;
          }

          .button .list:hover:nth-child(7) a{
            background: #18610e;
          }
          .button .list:hover:nth-child(7) a:before{
            background: #174919;
          }
          .button .list:hover:nth-child(7) a:after{
            background: #015808;
          }

          .button .list:hover:nth-child(8) a{
            background: darkred;
          }
          .button .list:hover:nth-child(8) a:before{
            background: red;
          }
          .button .list:hover:nth-child(8) a:after{
            background: #d10101;
          }

          .button .list:hover:nth-child(9) a{
            background: blue;
          }
          .button .list:hover:nth-child(9) a:before{
            background: #109beb;
          }
          .button .list:hover:nth-child(9) a:after{
            background: #217ae0;
          }

          /* flexbox  */
        .flex-container {
          display: flex;
          flex-wrap: wrap;
          text-align: center;
          justify-content: center;
         } 

       .list.item-1 {
        padding-left: 10%;
        padding-top: 10%;
         }

      .list.item-2 {
        padding-left: 10%;
        padding-top: 20%;
         }

       div.list.item-3{
       padding-left: 10%;
        padding-top: 20%;
         }
      div.list.item-4{
        padding-left: 10%;
        padding-top: 20%;
        }

      div.list.item-5{
        padding-left: 10%;
        padding-top: 20%;
        }
     
        div.list.item-6{
        background-color: transparent;
        padding-left: 10%;
        padding-top: 20%;
      }
      
      div.list.item-7{
       padding-left: 10%;
        padding-top: 20%;
      }
      div.list.item-8{
     padding-left: 10%;
    padding-top: 20%;
      }
      div.list.item-9{
        padding-left: 10%;
        padding-top: 20%;
      }
      
      .row {
 background: #000000;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #434343, #000000);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {
color: white;
font-family: 'Architects Daughter', cursive;
}



 /* light text  */
:root {
	--white:#f1f1f1
}

/* div > span {
	opacity: 0.15;
} */
#I {
	opacity: 1;
	animation: flickerI 2s linear  reverse infinite;
}
#I::after {
	content: '';
	width: 150%;
	-webkit-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
	-moz-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
	box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
}
#L, #G {
	animation: flickerLG 2s linear reverse infinite;
	position: relative;
}
#L::after, 
#L::before  {
	content:' ';
	width: 100px;
	height: 100px;
	background: var(--white);
	position: absolute;
	top: -50%;
	left: 100%;
	border-radius: 100%;
	opacity: 0.05;
	filter: blur(10px);
}
#L::after {
	width: 200px;
	height: 200px;
	top: -150%;
	left: -5%;
	opacity: 0.1;
	filter: blur(10px);
}
#H {
	animation: flickerH 2s linear reverse infinite
}

#T {
	animation: flickerH 2s linear reverse infinite
}

@keyframes flickerI {
	0% {
		opacity: 0.4;
	}
	5% {
		opacity: 0.5;
	}
	10% {
		opacity: 0.6;
	}
	15% {
		opacity: 0.85;
	}
	25% {
		opacity: 0.5;
	}
	30% {
		opacity: 1;
	}
	35% {
		opacity: 0.1;
	}
	40% {
		opacity: 0.25;
	}
	45% {
		opacity: 0.5;
	}
	60% {
		opacity: 1;
	}
	70% {
		opacity: 0.85;
	}
	80% {
		opacity: 0.4;
	}
	90% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes flickerLG {
	0% {
		opacity: 0.19;
	}
	5% {
		opacity: 0.2;
	}
	10% {
		opacity: 0.25;
	}
	15% {
		opacity: 0.35;
	}
	25% {
		opacity: 0.2;
	}
	30% {
		opacity: 0.4;
	}
	35% {
		opacity: 0.1;
	}
	40% {
		opacity: 0.25;
	}
	45% {
		opacity: 0.2;
	}
	60% {
		opacity: 0.4;
	}
	70% {
		opacity: 0.35;
	}
	80% {
		opacity: 0.4;
	}
	90% {
		opacity: 0.2;
	}
	100% {
		opacity: 0.4;
	}
}

@keyframes flickerH {
	0% {
		opacity: 0.15;
	}
	5% {
		opacity: 0.2;
	}
	10% {
		opacity: 0.12;
	}
	15% {
		opacity: 0.2;
	}
	25% {
		opacity: 0.15;
	}
	30% {
		opacity: 0.4;
	}
	35% {
		opacity: 0.05;
	}
	40% {
		opacity: 0.12;
	}
	45% {
		opacity: 0.15;
	}
	60% {
		opacity: 0.3;
	}
	70% {
		opacity: 0.2;
	}
	80% {
		opacity: 0.3;
	}
	90% {
		opacity: 0.18;
	}
	100% {
		opacity: 0.3;
	}
}

@keyframes flickerT {
	0% {
		opacity: 0.01;
	}
	5% {
		opacity: 0.05;
	}
	10% {
		opacity: 0.03;
	}
	15% {
		opacity: 0.1;
	}
	25% {
		opacity: 0.07;
	}
	30% {
		opacity: 0.1;
	}
	35% {
		opacity: 0.05;
	}
	40% {
		opacity: 0.06;
	}
	45% {
		opacity: 0.1;
	}
	60% {
		opacity: 0.;
	}
	70% {
		opacity: 0.1;
	}
	80% {
		opacity: 0.;
	}
	90% {
		opacity: 0.0;
	}
	100% {
		opacity: 0.1;
	}
}
/* light text end  */

/* custom scroll bar  */
* {
	margin: 0;
	padding: 0;

  }
  
  section {
	padding: 6px;
	background: black;
  }
  
  section h2 {
	font-size: 2.5em;
	color: #fff;
  }
  
  section p {
	font-size: 1.2em;
	color: #fff;
  }
  
  ::-webkit-scrollbar {
	width: 0;
  }
  
  #scrollPath {
	position: fixed;
	top: 0;
	right: 0;
	width: 10px;
	height: 100%;
	background: rgba(255, 255, 255, 0.05);
  }
  
  #progressBar {
	position: fixed;
	top: 0;
	right: 0;
	width: 10px;
	background: linear-gradient(to top, #008aff, #00ffe7);
	animation: animate 5s linear infinite;
  }
  
  @keyframes animate {
	0%, 100% {
	  filter: hue-rotate(0);
	}
	50% {
	  filter: hue-rotate(360deg);
	}
  }
  
  #progressBar::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, #008aff, #00ffe7);
	filter: blur(10px);
  }
  
  #progressBar::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, #008aff, #00ffe7);
	filter: blur(30px);
  }
  /* scroll end  */

  /* amate text  */
.link {
  outline: none;
  text-decoration: none;
  position: relative;
  font-size: 2em;
  line-height: 1;
  color: red;
  display: inline-block;
  padding-left: 42%;
  padding-bottom: 2%;
  font-family: 'Architects Daughter', cursive;
  }
     
 .link--change {
  text-transform: uppercase;
  font-weight: 650;
  overflow: hidden;
  line-height: 0.75;
  color: black;
  font-family: 'Architects Daughter', cursive;
  }
     
 .link--change:hover {
  color: transparent;
  }
     
 .link--change::after {
  content: '';
  position: absolute;
  height: 8px;
  width: 100%;
  top: 50%;
  margin-top: -4px;
  right: 0;
  background: black;
  transform: translate3d(-50%,0,0);
  transition: transform .3s;
  transition-timing-function: cubic-bezier (0.7,0,0.3,1);
  font-family: 'Architects Daughter', cursive;
  }
     
 .link--change:hover::after {
  transform: translate3d(100%,0,0);
  }
     
 .link--change::before {
  content: attr(data-letters);
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: white;
  white-space: nowrap;
  width: 0%;
  transition: width 0.6s 0.5s;
  font-family: 'Architects Daughter', cursive;
  }
     
 .link--change:hover::before {
  width: 100%;
  }
/* end  */

 .nerd {
  font-family: 'Architects Daughter', cursive;

} 
body {
  font-family: 'Architects Daughter', cursive;

}

/*  footer  */
body {
  
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #eee;
  font-family: 'Architects Daughter', cursive;
}

.header {
  height: 100vh;
  background-image: 
  linear-gradient(to right bottom, 
   rgba(15, 17, 17, 0.8),
   rgba(255, 0, 0, 0.8)),
   url("https://images.unsplash.com/photo-1549861833-c5932fd19229?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1191&q=80");
background-size: cover;
  background-position: top;
  position: relative;
  font-family: 'Architects Daughter', cursive;
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}

.brand-box {
  position: absolute;
  top: 40px;
  left: 40px;
}

.brand { font-size: 20px; }

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Architects Daughter', cursive;
}

.heading-primary {
  color: white;
  text-transform: uppercase;
  font-family: 'Architects Daughter', cursive;
  backface-visibility: hidden;
  margin-bottom: 30px;
}

.heading-primary-main {
  display: block;
  font-size: 26px;
  font-family: 'Architects Daughter', cursive;
  font-weight: 400;
  letter-spacing: 5px;
}

.heading-primary-sub {
  display: block;
  font-size: 18px;
  font-family: 'Architects Daughter', cursive;
  font-weight: 700;
  letter-spacing: 7.4px;
}

.btn:link,
.btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Architects Daughter', cursive;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 100px;
  transition: all .2s;
  position: relative;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn-white {
  background-color: white;
  color: #777;
font-size: 14px;
font-family: 'Architects Daughter', cursive;
} 

 /* footer end */