* {
   margin: 0px;
   padding: 0px;
   font-family: 'Slabo 27px', serif;
}

html {
   scroll-behavior: smooth;
}

a {
   text-decoration: none;
   color: white;
}

.header-grid {
   display: grid;
   grid-template-columns: 10% 90%;
   grid-template-rows: 15% 85%;
   grid-template-areas:
      "logo    nav  "
      "title   title";
   background-image: url("images/red-black-tech.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: white;
   min-height: 100vh;
   min-width: stretch;
   place-items: stretch;
}

.logo {
   grid-area: logo;
   place-self: start start;
   margin-left: 32px;
   font-size: 40px;
   display: flex;
   flex-direction: row;
   align-items: center;
}

.logo p {
   margin-left: 20px;
   padding-top: 16px;
   font-family: 'Raleway', sans-serif;
}

.circle {
   background: white;
   margin-top: 24px;
   width: 64px;
   height: 64px;
   border-radius: 50%;
}

.circle p {
   color: black;
   text-align: center;
}

.nav {
   grid-area: nav;
   place-self: start end;
   margin: 48px 32px 0px 0px;
   list-style: none;
}

.nav li {
   display: inline-block;
}

.nav li a {
   text-transform: uppercase;
   font-family: 'Raleway', sans-serif;
   margin-right: 32px;
   padding: 12px;
   border: 2px solid transparent;
}

.nav li.active a {
   border: 2px solid white;
}

.nav li a:hover {
   animation-name: nav-highlight;
   animation-duration: .8s;
   animation-fill-mode: forwards;
}

@keyframes nav-highlight {
   100% {border: 2px solid white;}
}

h1 {
   grid-area: title;
   place-self: center;
   text-align: center;
}

.name {
   font-size: 100px;
   background-color: black;
}

.caption {
   font-size: 40px;
   background-color: black;
}

h2 {
   text-align: center;
   font-size: 80px;
   padding-top: 80px;
   padding-bottom: 40px;
}

h3 {
   text-align: center;
   font-size: 40px;
}

.section1 {
   text-align: center;
   color: black;
   background-color: white;
}

.section1 > p {
   text-align: left;
   padding: 25px 100px;
   font-size: 24px;
}

.section2 {
   text-align: center;
   color: white;
   background-color: rgb(205, 30, 30);
}

.section2 > h3 {
   padding-top: 100px;
}

.section2 > p {
   
   padding: 25px 100px;
   font-size: 24px;
}

.section3 {
   text-align: center;
   color: white;
   background-color: black;
}

.section3 > p {
   text-align: center;
   padding: 25px 100px;
   font-size: 24px;
}