/* Global Styling */

html {
  scroll-behavior: smooth;
}

.content {
  padding: 10px;
}

body {
	background: #2a2a2a;
}

h1 {
	font-family: 'IBM Plex Serif', serif;
	font-weight: 500;
  font-size: 2em;
	color: #fd3ab6;
}

h2 {
	font-family: 'IBM Plex Sans Condensed', sans-serif;
	font-weight: 500;
	color: #e8f1f2;
}

p {
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 300;
  font-size: 1.15em;
  line-height: 1.7em;
	color: #e8f1f2;
}

h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8em;
  font-weight: 400;
  text-align: center;
  color: #e8f1f2;
  text-transform: uppercase;
}

h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9em;
  font-weight: 400;
  text-align: center;
}

.logo {
  padding-top: 16em;
}

.tagline {
  padding-bottom: 8em;
}

.down {
  bottom: 30px;
  padding-bottom: 3em;
}

#bumpup {
  transform: translateY(-400%);
}

.border {
  border-top: 2px #e8f1f2;
}

sup a {
  font-size: 0.7em;
}

sup a:hover {
  font-size: 0.7em;
  text-decoration: underline;
  cursor: pointer;
}

/* Section Animation */

.animate-top {
  position:relative;
  animation: 1s ease-in-out 0.4s 1 normal none running animatetop;
}
  @keyframes animatetop{
    from{
      top:-400px;opacity:0
    } 
    to{
      top:0;opacity:1
    }
  }

  section {
    scale: 0.94;
    opacity: 0;
    transition: 0.9s;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
  }
  
  section.active {
    opacity: 1;
    top: 0;
    scale: 1;
  }
  
/* DELETE */

  #revealPoint {
    position: fixed;
    height: 20px;
    width: 100%;
    left: 0;
    bottom: 200px;
    color: red;
    padding: 7px;
    margin: 0;
    border-bottom: 1px solid red;
  }

/*-- Hero --*/

  .hero {
    background-image: url(img/landing.png);
    color: #e8f1f2;
    height: 60%;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 80px;
  }

/*-- What we do --*/

.what-we-do{
  color: #e8f1f2;
}

.highlight {
  font-size: 69px;
  color: #2ec1d400;
  background: 
    linear-gradient(90deg,#000 50%,#51cdc5 0) 
    var(--_p,100%)/200% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  transition: .4s;
}
.highlight:hover {
  --_p: 0%;
}

.capabilities {
  background: #51cdc5;
  color: #121212;
  background-size: cover;
  place-content: center;
  min-block-size: 60vh;
  padding-bottom: 100px;
}

/*-- How we do it --*/

.how-we-do-it{
  color: #e8f1f2;
  min-block-size: 75vh;
}

.block {
	position: relative;
	margin: 30px auto 0;
	width: 500px;
	height: 500px;
  border-radius: 250px;
	background: #02060d;
}

.block:before, .block:after {
	content: '';
	position: absolute;
  border-radius: 250px;
	left: -1px;
	top: -1px;
	background: linear-gradient(45deg, #2bd6fcb7, #005a6e, #2ec0d4, #e8f1f2, #82cfe5, #007a92, #005a6e);
	background-size: 300%;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	z-index: -1;
	animation: steam 60s linear infinite;
}

@keyframes steam {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}

.block:after {
	filter: blur(5px);
}

#the-code {
  max-height: 500px;
}

.code-intro{
  display:inline-flex;
  align-content: center;
}

/* Get in touch */

.contact {
  background: #51cdc5;
  color: #121212;
  background-size: cover;
  place-content: center;
  min-block-size: 60vh;
  padding-bottom: 100px;
}

button {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  margin-top: 20px;
  color: #2a2a2a;
  background-color: #fd3ab6;
  min-height: 50px;
  min-width: 160px;
  border: none;
  border-radius: 5px;
}

button a {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  margin-top: 20px;
  color: #2a2a2a;
  text-decoration: none;
}

/* Footer */

footer {
  font-family: "IBM Plex Mono", monospace;
  margin-top:80px;
  max-height: 40vh;
  background-color: #121212;
  font-size: 12px!important;
  color: #e8f1f2;
}

/* Scroll prompt */

#scroll {
  position: fixed;
  bottom: 40px;
  right: 100px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8em;
  text-align: center;
  color: #e8f1f2;
}


/* Content Blocks */

.large {
  /* display: inline-grid; */
  place-content: center;
  min-block-size: 75vh;
}

.small {
  display: inline-grid;
  place-content: center;
  min-block-size: 40vh;
}

.spacing {
  display: inline-grid;
  place-content: center;
  min-block-size: 15vh;
}







/* Terms */

.terms {
  color: #e8f1f2;
  text-align: left;
}

h5{
  font-size: 18px;
}


/* Mobile */


@media only screen and (max-width: 767px) {
  
  h1 {
    font-size: 48px;
    line-height: 1.2em;
  }

  h2 {
    font-size: 36px;
    line-height: 1.2em;
  }

  #bumpup {
    transform: translateY(0%);
  }

  .highlight {
    font-size: 48px;
    color: #e8f1f2;
  }

  .hero {
    max-height: 100%;
  }

  .spacing {
    min-block-size: 0vh!important;
    padding: 0;
  }

  .hidden-mobile {
    display:none !important;
  }

  .large {
    /* display: inline-grid; */
    place-content: center;
    min-block-size: 60vh;
    padding-bottom: 40px;
  }

  .logo {
    padding-top: 10em;
  }
  
  .tagline {
    padding-bottom: 6em;
  }

  .block {
    width: 350px;
    height: 350px;
    border-radius: 175px;
  }
  
  .block:before, .block:after {
    border-radius: 175px;
  }

  #the-code {
    max-height: 350px;
  }
}