/*
  Ugo Possenti
  for start2impact
*/

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

/* fontface */

@font-face {
  font-family: 'DecimaMono';
  src: url('fonts/DecimaMonoPro-Bold.ttf');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'MaisonNeue';
  src: url('fonts/MaisonNeue-Bold.ttf');
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: 'MaisonNeue';
  src: url('fonts/MaisonNeue-Book.ttf');
  font-style: normal;
  font-weight: normal;
}

/* Font Style */

header h1 {
  font-family: 'DecimaMono', 'Roboto Mono', monospace;
  font-size: 54px;
  font-weight: 400;
  color: #1e1f23;

  background-color: white;
  padding: 10px;
  border-radius: 3px;
}


.bio h1 {
  font-family: 'MaisonNeue', Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.8em;
  font-weight: bold;
  color: #1e1f23;

  background-color: white;
  padding-top: 10px;
  padding-left: 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.bio p {
  font-family: 'MaisonNeue', Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.8em;
  color: #4E4E4E;

  background-color: white;
  padding: 0 10px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.footer p {
  font-family: 'MaisonNeue', Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #cecece;

  text-align: center;

  margin: 10px 0;
}

.social a {
  font-family: 'DecimaMono';
  font-size: 30px;
  font-weight: normal;

  background-color: white;
  padding: 5px;
  margin: 30px;
}

/* Highlight color */

::selection {
  background: #dffca9;
}

.footer p:last-of-type::selection {
  color: #cecece;
}

/* Page */


/* Header */

.header-wrapper {
  display: flex;
  flex-wrap: wrap;

  padding: 310px 100px;
}

header h1 span {
	display: inline-block;
}

h1 span:after {
  border-top: 1em solid #20D919;
  content: "";
  display: block;

  margin-top: -.54em;
  margin-left: 1.5em;
}


/* a style */

a {
  z-index: 1;
  color: #20D919;
  text-decoration: none;
  position: relative;
  transition: color .4s ease-out;
}

a:visited {
  color: #20D919;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #1e1f23;
}

a::after {
  z-index: -1;
  border-top: 1em solid #20D919;
  content: "";
  position: absolute;
    right: 100%;
    bottom: -.5em;
    left: 0.5em;
  transition: right .4s cubic-bezier(0,.5,0,1),
              border-color .4s ease-out;
}

a:hover::after {
  animation: anchor-underline 1s cubic-bezier(0,.5,0,1);
  right: -.2em;
}


/* .social a style */

.social a {
  z-index: 1;
  color: #20D919;
  text-decoration: none;
  position: relative;
  transition: color .4s ease-out;
}

.social a:visited {
  color: #20D919;
  text-decoration: none;
}

.social a:hover {
  text-decoration: none;
  color: #1e1f23;
}

.social a::after {
  z-index: -1;
  border-top: .7em solid #20D919;
  content: "";
  position: absolute;
    right: 100%;
    bottom: .1em;
    left: 0.5em;
  transition: right .4s cubic-bezier(0,.5,0,1),
              border-color .4s ease-out;
}

.social a:hover::after {
  animation: anchor-underline 1s cubic-bezier(0,.5,0,1);
  right: -.2em;
}


/* Bio */

p {
  text-align: justify;
}

.bio {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.avatar {
  height: 230px;
  width: 230px;
  margin: 10px 60px 30px 60px;
}

.text {
  display: block;
  margin-left: 100px;

  height: auto;
  width: 600px;

  margin: 0 60px;
  margin-bottom: 30px;
}


/* Social */

.social {
  margin: 10px 0 40px 0;
  padding: 100px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


/* Footer */

.footer p {
  padding: 0;
  margin: 0;
}

.footer span{
  color: #f75c95;
}

.footer p:last-of-type{
  color: white;
  padding: 0;
  margin: 0;
}


/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1e1f23;
  }

  /* Highlight color */

  .footer p:last-of-type::selection {
    color: #45464a;
  }

  header h1 {
    background-color: #1e1f23;
    color: #cecece;
  }

  header h1 span {
  	display: inline-block;
  }


  h1 span:after {
    border-top: 1em solid green;
    content: "";
    display: block;

    margin-top: -.54em;
    margin-left: 1.5em;
  }

  .bio p {
    color: #cecece;

    background-color: #1e1f23;
    padding: 0 10px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  .bio h1 {
    color: #cecece;

    background-color: #1e1f23;
    padding-top: 10px;
    padding-left: 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  a {
    color: green;
  }

  a:visited {
    color: green;
  }

  a:hover {
    color: #cecece;
  }

  a::after {
    z-index: -1;
    border-top: 1em solid green;
    content: "";
    position: absolute;
      right: 100%;
      bottom: -.5em;
      left: 0.5em;
    transition: right .4s cubic-bezier(0,.5,0,1),
                border-color .4s ease-out;
  }

  a:hover::after {
    animation: anchor-underline 1s cubic-bezier(0,.5,0,1);
    right: -.2em;
  }

  /* .social a */

    .social a {
      color: green;
    }

    .social a:visited {
      color: green;
    }

    .social a:hover {
      color: #cecece;
    }

    .social a::after {
      z-index: -1;
      border-top: .7em solid green;
      content: "";
      position: absolute;
        right: 100%;
        bottom: .1em;
        left: 0.5em;
      transition: right .4s cubic-bezier(0,.5,0,1),
                  border-color .4s ease-out;
    }

    .social a:hover::after {
      animation: anchor-underline 1s cubic-bezier(0,.5,0,1);
      right: -.2em;
    }

    .social a {
      background-color: #1e1f23;
      border-radius: 3px;
    }

    .footer p{
      color: #45464a;
    }

    .footer p:last-of-type{
      color: #1e1f23;
    }

    .footer span {
      color: #db8cb8;
    }
}