/* ALL*/
:root {
    --background: #f6f6f6;
    --terminalBackground: #232627;
}
* {
	background-color: var(--background);
    font-family: Menlo, Monaco, 'Courier New', monospace;
    list-style-type: none;
	}

section {
    place-items: center;
}


h2 {
    text-align: center;
}

.hidden {
    opacity: 0;
    filter: blur(5px);
    transition: all 1s;
    transform: translateX(-100%);
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

@media(prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
}

/* TITLE */
/*-------------------------------------------------*/
.title {
    text-align: left;
    padding-bottom: 2.5%;
    background-color: var(--terminalBackground);
    color: #eff0f1
    }

.pageTitle {
    font-size: 64px;
    font-style: italic;
    margin: 0 auto;
    background-color: var(--terminalBackground);

}

.pageTitle::after {
    content: '';
    animation: write 1.2s forwards;
    animation-delay: 1.5s;
}

.navBar {
    background-color: var(--terminalBackground);
    
}

.navBar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    background-color: var(--terminalBackground);
}

.navBar > li {
    
    color:#eff0f1;
    background-color: var(--terminalBackground);
}

.navBar > li > a {
    
    color:#eff0f1;
    background-color: var(--terminalBackground);
}

.navBar::after {
    content: '';
    animation: blink 1s infinite;
}
  
  @keyframes write {
    0% {
     content:'';
    }
    9% {
      content:'j';
    }
    18% {
      content:'je';
    }
    27% {
      content:'jef';
    }
    36% {
      content:'jeff';
    }
    45% {
      content:'jeff\\';
    }
    54% {
      content:'jeff\\ ';
    }
    63% {
      content:'jeff\\ e';
    }
    72% {
      content:'jeff\\ ed';
    }
    81% {
      content:'jeff\\ eds';
    }
    90% {
      content:'jeff\\ edso';
    }
    100% {
      content:'jeff\\ edson';
    }
  }

  @keyframes blink {
    50% {
        content: '_';
    }
    100% {
        content: '';
    }
  }

/* SOCIAL LINKS */
/*-------------------------------------------------*/

.socialMedia {
    min-height: none;
}
.socialLinks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-inline-start: 0;
    justify-content: center;
}

.socialLinks > div > a > img {
    height: 100px;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
}

.socialLinks:nth-child(2) {
    transition-delay: 100ms;
}
.socialLinks:nth-child(3) {
    transition-delay: 200ms;
}
.socialLinks:nth-child(4) {
    transition-delay: 300ms;
}

/* CERTIFICATIONS */
/*-------------------------------------------------*/

.certifications{
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
    min-height: 75vh;
}

.certBadge {
    padding-inline-start: 0;
    justify-content: space-evenly;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.certBadge > div > a > img, .csisCertList > a > img {
    height: 200px;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
}

/* Animation Stagger */
.certBadge:nth-child(2) {
    transition-delay: 100ms;
}
.certBadge:nth-child(3) {
    transition-delay: 200ms;
}
.certBadge:nth-child(4) {
    transition-delay: 300ms;
}
.certBadge:nth-child(5) {
    transition-delay: 400ms;
}
.certBadge:nth-child(6) {
    transition-delay: 500ms;
}
.certBadge:nth-child(7) {
    transition-delay: 600ms;
}
.certBadge:nth-child(8) {
    transition-delay: 700ms;
}
  
/* PROJECTS */
/*-------------------------------------------------*/

.projects {
    text-align: center;
    min-height: 75vh;
}

.projectLink {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-inline-start: 0;
    justify-content: center;
    align-items: center;
}

.projectLink > div > a > img {
    height: auto;
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;   
}

.projectLogos {
    height: 200px;
    width: auto;
}

.projectLink:nth-child(2) {
    transition-delay: 100ms;
}
.projectLink:nth-child(3) {
    transition-delay: 200ms;
}
.projectLink:nth-child(4) {
    transition-delay: 300ms;
}

/* ABOUT ME */
/*-------------------------------------------------*/

.aboutMe {
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
    min-height: 75vh;

}

#aboutMeStatement {
    text-align: left;
}