* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  overflow-x: hidden;
  scroll-behavior: smooth; }

body {
  animation: ease-in 1.5s load; }

.header {
  font-family: 'Montserrat', sans-serif; }
  .header__container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap; }
  .header__sidebar {
    width: 100vw; }
  .header__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/christopher-gower-m_HRfLhgABo-unsplash.jpg);
    background-size: cover;
    width: 100%;
    min-height: 60vh;
    background-position: center; }
  .header__ul {
    display: flex;
    justify-content: center;
    margin: 1rem auto; }
  .header__li {
    color: white;
    text-decoration: none;
    list-style: none;
    margin: auto 3rem;
    font-size: 23px; }
  .header__li a {
    text-decoration: none;
    animation: ease-in 5s load; }
  .header__a-active {
    color: whitesmoke;
    border-bottom: solid 3px green; }
  .header__a-link {
    color: white; }
  .header__logo {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: 3.7rem auto; }
  .header__logoImg {
    width: 7%;
    border-radius: 50%;
    transition: 1s ease;
    animation: ease-in 5s logo; }
  .header__logoImg:hover {
    box-shadow: green 10px 10px 10px;
    transition: 0.5s ease-in-out;
    filter: blur(0.5px); }
  .header__texts {
    text-align: center;
    color: whitesmoke; }
  .header__buttons {
    text-align: center;
    margin: 1em auto; }
  .header__btn {
    margin: auto 1em; }
  .header__socials {
    text-align: center;
    margin: 4.5em auto; }
  .header__toggle {
    display: none; }
  .header__sidebar-mobile-links-class {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; }
  .header__sidebar-mobile-links {
    display: none; }
  .header__a-link:hover {
    color: greenyellow; }

.traits {
  margin: 3em auto;
  width: 100%;
  min-height: 50vh; }
  .traits__container {
    display: flex;
    justify-content: center;
    flex-direction: column; }
  .traits__header {
    text-align: center; }
  .traits__h1 {
    font-family: 'Montserrat', sans-serif; }
  .traits__card {
    box-shadow: 12px 10px 4px;
    text-align: center;
    margin: 1em 12em;
    min-height: 30vh; }
  .traits__texts {
    margin: 1em 1em; }
  .traits__h2-left {
    text-align: center;
    font-family: 'Nunito', sans-serif; }
  .traits__paragraph-left {
    font-family: 'Nunito', sans-serif;
    justify-content: center;
    text-align: center; }
  .traits__h2-right {
    text-align: center; }
  .traits__paragraph-right {
    text-align: center; }

.skills {
  margin: 3em auto;
  width: 100%;
  min-height: 60vh; }
  .skills__container {
    display: flex;
    justify-content: center;
    flex-direction: column; }
  .skills__header {
    text-align: center;
    font-family: 'Montserrat', sans-serif; }
  .skills__card {
    box-shadow: 12px 10px 4px;
    text-align: center;
    margin: 1em 12em;
    min-height: 30vh; }
  .skills__skills {
    display: flex;
    flex-direction: column;
    justify-content: center; }
  .skills__progress {
    display: flex;
    margin: 2.5em 5em;
    height: 3vh; }

.work {
  margin: 3em auto;
  width: 100%;
  min-height: 90vh; }
  .work__container {
    display: flex;
    justify-content: center;
    flex-direction: column; }
  .work__header {
    text-align: center;
    font-family: 'Montserrat', sans-serif; }
  .work__card {
    box-shadow: 12px 10px 4px;
    text-align: center;
    margin: 1em 12em;
    min-height: 14.2vh; }
  .work__row {
    display: flex;
    flex-direction: row; }
  .work__column-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    background-color: green;
    min-height: 15vh;
    min-width: 12em;
    transform: translateX(-100rem);
    opacity: 0.1;
    transition: 2s ease-in-out; }
  .work__column-right {
    display: flex;
    flex-direction: column;
    flex: 4; }
  .work__texts-left {
    margin: 1em 1em;
    color:white;
    font-family: 'Balsamiq Sans', cursive; }
  .work__texts-right {
    margin: 1em 1em;
    font-family: 'Nunito', sans-serif;
    opacity: 0; }
  .work__role {
    text-align: left; }
  .work__description {
    text-align: left; }

.it {
  margin: 3em auto;
  width: 100%;
  min-height: 100vh; }
  .it__container {
    display: flex;
    justify-content: center;
    flex-direction: column; }
  .it__header {
    text-align: center;
    font-family: 'Montserrat', sans-serif; }
  .it__card {
    box-shadow: 12px 10px 4px;
    text-align: center;
    margin: 1em 12em;
    min-height: 14.2vh; }
  .it__row {
    display: flex;
    flex-direction: row; }
  .it__column-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    background-color: green;
    min-height: 15vh;
    min-width: 12em;
    transform: translateX(-100rem);
    opacity: 0.1;
    transition: 2s ease-in-out; }
  .it__column-right {
    display: flex;
    flex-direction: column;
    flex: 4; }
  .it__texts-left {
    margin: 1em 1em;
    color:white;
    font-family: 'Balsamiq Sans', cursive; }
  .it__texts-right {
    margin: 1em 1em;
    font-family: 'Nunito', sans-serif; }
  .it__skill {
    text-align: center; }
  .it__description {
    text-align: left; }

.cert {
  margin: 3em auto;
  width: 100%;
  min-height: 40vh; }
  .cert__container {
    display: flex;
    justify-content: center;
    flex-direction: column; }
  .cert__header {
    text-align: center;
    font-family: 'Montserrat', sans-serif; }
  .cert__card {
    box-shadow: 12px 10px 4px;
    text-align: center;
    margin: 1em 12em;
    min-height: 14.2vh; }
  .cert__row {
    display: flex;
    flex-direction: row; }
  .cert__column-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    background-color: green;
    min-height: 15vh;
    min-width: 12em; }
  .cert__column-right {
    display: flex;
    flex-direction: column;
    flex: 4; }
  .cert__texts-left {
    margin: 1em 1em;
    color:white;
    font-family: 'Balsamiq Sans', cursive; }
  .cert__texts-right {
    margin: 1em 1em;
    font-family: 'Nunito', sans-serif; }
  .cert__certification {
    text-align: center; }
  .cert__description {
    text-align: left; }

.portofolio {
  margin: 3em auto;
  width: 100%;
  min-height: 40vh; }
  .portofolio__container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: auto 20rem; }
  .portofolio__header {
    text-align: center;
    font-family: 'Montserrat', sans-serif; }
  .portofolio__row {
    display: flex;
    flex-direction: row;
    justify-content: center; }
  .portofolio__column1 {
    display: flex;
    flex-direction: column;
    flex: 1; }
  .portofolio__column2 {
    display: flex;
    flex-direction: column;
    flex: 1; }
  .portofolio__img {
    max-width: 100%;
    margin: 1rem 1rem;
    border-radius: 2%;
    box-shadow: 12px 10px 4px;
    opacity: 0.3;
    transition: 1s ease-out; }
  .portofolio__img:hover {
    max-width: 110%;
    margin: 1rem 1rem;
    border-radius: 2%;
    box-shadow: 12px 10px 4px;
    opacity: 1;
    transition: 1s ease-out; }

.references {
  margin: 3em auto;
  width: 100%;
  min-height: 30vh; }
  .references__container {
    display: flex;
    justify-content: center;
    flex-direction: column; }
  .references__header {
    text-align: center;
    font-family: 'Montserrat', sans-serif; }
  .references__card {
    box-shadow: 12px 10px 4px;
    text-align: center;
    margin: 1em 12em;
    min-height: 14.2vh; }
  .references__row {
    display: flex;
    flex-direction: row;
    justify-content: center; }

.footer {
  margin: 3em auto;
  width: 100%;
  min-height: 10vh; }
  .footer__container {
    display: flex;
    justify-content: center;
    flex-direction: column; }
  .footer__header {
    text-align: center;
    font-family: 'Montserrat', sans-serif; }
  .footer__social-icons {
    text-align: center;
    margin: 1em auto; }
  .footer__icon {
    margin: auto 0.5em; }
  .footer__fb {
    color: blue; }
  .footer__insta {
    color: orange; }
  .footer__mail {
    color: purple; }
  .footer__linked {
    color: #4d4de6; }

@media (max-width: 1000px) {
  .header {
    width: 100%; }
    .header__sidebar {
      width: 15%;
      min-height: 100vh;
      position: fixed; }
    .header__sidebar.active {
      background: linear-gradient(rgba(0, 0, 0, 0.5), black);
      width: 95vw;
      min-height: 100vh;
      transition: .7s;
      transition-delay: .3s;
      position: fixed; }
    .header__sidebar-mobile-links {
      opacity: 0;
      display: flex;
      flex-direction: row;
      color: whitesmoke;
      font-size: 2.1rem; }
    .header__sidebar-mobile-links.active {
      display: flex;
      opacity: 1;
      justify-content: flex-end;
      flex-direction: row;
      transition: 3s;
      transition-delay: 1s;
      margin: 0.5em 1em; }
    .header__ul {
      opacity: 0; }
    .header__li {
      margin: 0.7em 3em; }
    .header__h1 {
      font-size: 25px; }
    .header__container {
      display: flex;
      flex-wrap: wrap; }
    .header__btn {
      margin: 0.5em auto; }
    .header__a-link {
      font-size: 15px; }
    .header__logoImg {
      min-width: 70px; }
    .header__toggle.active {
      display: flex;
      flex-direction: row;
      margin: -30.1em 0.5em;
      transition: 0.5s; }
    .header__toggle {
      display: flex;
      flex-direction: row;
      margin: -28.1em 0.5em;
      position: absolute; }
    .header__span {
      display: flex;
      flex-direction: column;
      width: 45px;
      height: 1.5px;
      background: whitesmoke;
      transition: .5s;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); }
    .header__toggle .header__span:nth-child(1) {
      transform: translateY(-10px);
      transition: .3s; }
    .header__toggle .header__span:nth-child(4) {
      transform: translateY(10px);
      transition: .3s; }
    .header__toggle.active .header__span:nth-child(1) {
      transform: translateY(-15px);
      transition-delay: .5s;
      opacity: 0; }
    .header__toggle.active .header__span:nth-child(4) {
      transform: translateY(15px);
      transition-delay: .5s;
      opacity: 0; }
    .header__toggle.active .header__span:nth-child(2) {
      transform: rotate(45deg);
      transition-delay: .2s; }
    .header__toggle.active .header__span:nth-child(3) {
      transform: rotate(-45deg);
      transition-delay: .2s; }
    .header__logoImg {
      max-width: 20%;
      max-height: 10vh; }
  .traits {
    margin: 5em auto;
    width: 100%; }
    .traits__container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      flex-basis: 100%; }
    .traits__card {
      margin: 0;
      display: flex;
      flex-direction: column; }
  .skills {
    margin: 5em auto;
    width: 100%; }
    .skills__container {
      display: flex;
      flex-direction: column;
      flex-basis: 100%; }
    .skills__card {
      display: flex;
      flex-direction: column;
      margin: 0; }
  .work {
    margin: 10em auto;
    width: 100%; }
    .work__container {
      display: flex;
      flex-direction: column;
      flex-basis: 100%; }
    .work__card {
      display: flex;
      margin: 1em auto; }
    .work__row {
      display: flex;
      flex-direction: column; }
  .it {
    margin: 10em auto;
    width: 100%; }
    .it__container {
      display: flex;
      flex-direction: column;
      flex-basis: 100%; }
    .it__card {
      display: flex;
      margin: 1em auto; }
    .it__row {
      display: flex;
      flex-direction: column; }
  .cert {
    margin: 10em auto;
    width: 100%; }
    .cert__container {
      display: flex;
      flex-direction: column;
      flex-basis: 100%; }
    .cert__card {
      display: flex;
      margin: 1em 1em; }
    .cert__row {
      display: flex;
      flex-direction: column; }
    .cert__column-right {
      display: flex;
      flex-direction: column;
      flex: 2; }
    .cert__column-left {
      display: flex;
      flex-direction: column;
      flex: 1; }
  .portofolio {
    margin: 5em auto;
    width: 100%; }
    .portofolio__container {
      display: flex;
      flex-direction: column;
      flex-basis: 100%;
      margin: 0; }
    .portofolio__row {
      display: flex;
      flex-direction: column; }
    .portofolio__column1 {
      display: flex;
      margin: 2em auto; }
  .references {
    margin: 5em auto;
    width: 100%; }
    .references__container {
      display: flex;
      flex-direction: column;
      flex-basis: 100%; }
    .references__card {
      display: flex;
      margin: 1em auto; } }

@keyframes load {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  40% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes logo {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  30% {
    opacity: 0; }
  40% {
    opacity: 0; }
  60% {
    opacity: 0; }
  80% {
    opacity: 0.5; }
  90% {
    opacity: 0.6; }
  100% {
    opacity: 1; } }