@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap');

:root {
  --orange: #ef6817;
  --main-color: #21201f;
  --light-gray: #727271;
  --lighter-gray: #ADA8A3;
  --dark-gray: #5f605d;
  --darker-gray: #383838;
  --text-color: #f4f4f4;
}

html { scroll-behavior: smooth; }

body {
  background: var(--main-color);
  font-family: 'Quicksand', sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text-color);
}

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

section {
    display: flex;
    width: auto;
    height: 100vh;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#main-section:before {
  content: ' ';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-1:before {
  background-image: url('../img/bg-1.jpg');
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
}
.bg-2:before {
  background-image: url('../img/bg-2.jpg');
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
}
.bg-3:before {
  background-image: url('../img/bg-3.jpg');
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
}
.bg-4:before {
  background-image: url('../img/bg-4.jpg');
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
}
.bg-5:before {
  background-image: url('../img/bg-5.jpg');
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: both;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
}

.fadeOut:before {
  animation-name: fadeOut;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
}

.container {
    text-align: center;
    transition: .5s ease-in;
    max-width: 1920px;
    animation-name: fadeIn;
    animation-duration: 3.2s;
}

.main-text {
  color: var(--lighter-gray);
  font-family: 'Poppins', sans-serif;
  line-height: 2rem;
  text-shadow: 2px 2px 5px #383838;
  z-index: 10;
}
.main-text h1 { font-size: 5vw;}
.main-text h2 { font-size: 3vw;}
.main-text p { font-size: 1.5vw;}

#typed { 
  color: #ef6817;
  font-weight: bold;
}

.orange { color: #ef6817; }

nav {
  font-family: 'Poppins', sans-serif;
  background: var(--darker-gray);
  width: 100%;
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 40px;
  padding: 20px 0;
  margin: 0;
  opacity: .95;
  z-index: 10;
}

nav a {
  color: var(--lighter-gray);
  text-decoration: none;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 500;
  display: inline;
  width: auto;
  margin: 0 1%;
  transition: all .3s ease-in-out;
}
nav a:after{
  display:block;
  margin-top: 5px;
  content: '';
  border-bottom: solid 2px var(--orange);
  transform: scaleX(0);  
  transition: all .25s ease-in-out;
}
nav a:hover { color: var(--light-gray); }
nav a:hover:after, nav a.active:after { transform: scaleX(1); }
nav .nav-logo {
  width: auto;
  max-width: 150px;
  background-image: url(../img/logo-light.png);
  background-size: cover;
}

.responsive-image{ width: 100%; }

.row {
  display: grid;
  column-gap: 20px;
  text-align: left;
  align-items: center;
}

#about .row { grid-template-columns: 10% 20% 60% 10%; }

#about img { border-radius: 50%; }