body {
  margin: 0;
  padding: 0;
  font-family: "Oxygen", sans-serif;
  font-weight: 300;
  background-color: #FFFFFF; }

h1, h2, h3, p {
  font-size: 300;
  color: #221E20;
  padding: 0;
  margin: 0;
  font-weight: 300;
  padding: 0 10px 0 10px; }

a {
  text-decoration: none; }

h1 {
  font-size: 30px;
  font-weight: 400; }
  @media (max-width: 575.98px) {
    h1 {
      font-size: 20px; } }

h2 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 20px; }
  @media (max-width: 575.98px) {
    h2 {
      font-size: 24px;
      margin-bottom: 10px; } }

h3 {
  font-size: 24px;
  font-weight: 400;
  margin-top: 10px; }
  @media (max-width: 575.98px) {
    h3 {
      margin-top: 10px;
      font-size: 18px; } }

p {
  font-size: 18px; }
  @media (max-width: 575.98px) {
    p {
      font-size: 15px; } }

#hero {
  width: 100vw;
  height: auto;
  overflow-x: hidden; }
  #hero h3 {
    padding-top: 10px;
    font-weight: 300;
    font-size: 20px;
    margin-top: 0; }
    @media (max-width: 575.98px) {
      #hero h3 {
        padding-top: 5px; } }
  #hero span {
    height: 30px;
    display: flex;
    align-items: center; }
    #hero span a {
      height: 25px;
      transition: 0.3s all ease-in; }
    #hero span a:hover {
      filter: opacity(50%); }
  #hero .nav {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr; }
    #hero .nav .logo {
      grid-column: 1/2;
      display: flex;
      align-items: center; }
      #hero .nav .logo #logo {
        height: 15px; }
    #hero .nav .social {
      grid-column: 2/2;
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      #hero .nav .social img {
        height: 35px;
        margin-left: 10px; }
  #hero .hero {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr; }
    @media (max-width: 575.98px) {
      #hero .hero {
        height: auto;
        grid-auto-columns: none;
        grid-auto-rows: 1fr 1fr; } }
    #hero .hero .text-hero {
      display: flex;
      align-items: center;
      justify-content: center;
      grid-column: 1/2; }
      @media (max-width: 575.98px) {
        #hero .hero .text-hero {
          width: 100vw;
          grid-column: none;
          grid-row: 2/2; } }
    #hero .hero .img-hero {
      grid-column: 2/2;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 575.98px) {
        #hero .hero .img-hero {
          width: 100vw;
          grid-column: none;
          grid-row: 1/2; } }
      #hero .hero .img-hero img {
        height: 70vh;
        filter: blur(0px);
        transition: 0.1s filter ease-in; }
        @media (max-width: 575.98px) {
          #hero .hero .img-hero img {
            height: 90vw; } }
      #hero .hero .img-hero img:hover {
        filter: blur(0px);
        cursor: none; }
    #hero .hero .arrow img {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateY(-50%);
      transform: rotate(180deg);
      height: 30px; }
    #hero .hero .arrow h6 {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateY(-50%); }

#project {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden; }
  @media (max-width: 575.98px) {
    #project {
      height: auto;
      margin-top: 20px; } }
  #project h2, #project h3, #project p {
    color: #221E20; }
  #project h3 {
    color: #221E20;
    background-image: linear-gradient(#FFFFFF, #FFFFFF);
    background-size: 0%;
    background-position: left;
    background-repeat: no-repeat;
    transition: 0.3s all ease-in; }
  #project h3:hover {
    background-image: linear-gradient(#221E20, #221E20);
    background-size: 100%;
    color: #FFFFFF; }
  #project .project {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr; }
    @media (max-width: 575.98px) {
      #project .project {
        height: auto;
        grid-auto-columns: none;
        grid-auto-rows: 1fr 1fr; } }
    #project .project .text-project {
      display: flex;
      align-items: center;
      justify-content: center;
      grid-column: 2/2; }
      @media (max-width: 575.98px) {
        #project .project .text-project {
          width: 100vw;
          grid-column: none;
          grid-row: 2/2; } }
    #project .project .img-project {
      grid-column: 1/2;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 575.98px) {
        #project .project .img-project {
          width: 100vw;
          grid-column: none;
          grid-row: 1/2; } }
      #project .project .img-project img {
        height: 70vh;
        filter: blur(0px);
        transition: 0.1s filter ease-in; }
        @media (max-width: 575.98px) {
          #project .project .img-project img {
            height: 90vw; } }
      #project .project .img-project img:hover {
        filter: blur(0px);
        cursor: none; }

#work {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden; }
  @media (max-width: 575.98px) {
    #work {
      height: auto;
      margin-top: 20px; } }
  #work h2, #work h3, #work p {
    color: #221E20; }
  #work h3 {
    color: #221E20;
    background-image: linear-gradient(#FFFFFF, #FFFFFF);
    background-size: 0%;
    background-position: left;
    background-repeat: no-repeat;
    transition: 0.3s all ease-in; }
  #work h3:hover {
    background-image: linear-gradient(#221E20, #221E20);
    background-size: 100%;
    color: #FFFFFF; }
  #work .work {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr; }
    @media (max-width: 575.98px) {
      #work .work {
        height: auto;
        grid-auto-columns: none;
        grid-auto-rows: 1fr 1fr; } }
    #work .work .text-work {
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 575.98px) {
        #work .work .text-work {
          width: 100vw;
          grid-column: none;
          grid-row: 2/2; } }
    #work .work .img-work {
      grid-column: 2/2;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 575.98px) {
        #work .work .img-work {
          width: 100vw;
          grid-column: none;
          grid-row: 1/2; } }
      #work .work .img-work img {
        height: 70vh;
        filter: blur(0px);
        transition: 0.1s filter ease-in; }
        @media (max-width: 575.98px) {
          #work .work .img-work img {
            height: 90vw; } }
      #work .work .img-work img:hover {
        filter: blur(0px);
        cursor: none; }

#art {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden; }
  @media (max-width: 575.98px) {
    #art {
      height: auto;
      margin-top: 20px; } }
  #art h2, #art h3, #art p {
    color: #221E20; }
  #art h3 {
    color: #221E20;
    background-image: linear-gradient(#FFFFFF, #FFFFFF);
    background-size: 0%;
    background-position: left;
    background-repeat: no-repeat;
    transition: 0.3s all ease-in; }
  #art h3:hover {
    background-image: linear-gradient(#221E20, #221E20);
    background-size: 100%;
    color: #FFFFFF; }
  #art .art {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr; }
    @media (max-width: 575.98px) {
      #art .art {
        height: auto;
        grid-auto-columns: none;
        grid-auto-rows: 1fr 1fr; } }
    #art .art .text-art {
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 575.98px) {
        #art .art .text-art {
          width: 100vw;
          grid-column: none;
          grid-row: 2/2; } }
    #art .art .img-art {
      grid-column: 1/2;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 575.98px) {
        #art .art .img-art {
          width: 100vw;
          grid-column: none;
          grid-row: 1/2; } }
      #art .art .img-art img {
        height: 70vh;
        filter: blur(0px);
        transition: 0.1s filter ease-in; }
        @media (max-width: 575.98px) {
          #art .art .img-art img {
            height: 90vw; } }
      #art .art .img-art img:hover {
        filter: blur(0px);
        cursor: none; }

#about {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden; }
  @media (max-width: 575.98px) {
    #about {
      height: auto;
      margin-top: 20px;
      margin-bottom: 20px; } }
  #about h2, #about h3, #about p {
    color: #221E20; }
  #about h3 {
    color: #221E20;
    background-image: linear-gradient(#FFFFFF, #FFFFFF);
    background-size: 0%;
    background-position: left;
    background-repeat: no-repeat;
    transition: 0.3s all ease-in; }
  #about h3:hover {
    background-image: linear-gradient(#221E20, #221E20);
    background-size: 100%;
    color: #FFFFFF; }
  #about .about {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr; }
    @media (max-width: 575.98px) {
      #about .about {
        height: auto;
        grid-auto-columns: none;
        grid-auto-rows: 1fr 1fr; } }
    #about .about .text-about {
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 575.98px) {
        #about .about .text-about {
          width: 100vw;
          grid-column: none;
          grid-row: 2/2; } }
    #about .about .img-about {
      grid-column: 2/2;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 575.98px) {
        #about .about .img-about {
          width: 100vw;
          grid-column: none;
          grid-row: 1/2; } }
      #about .about .img-about img {
        height: 70vh;
        filter: blur(0px);
        transition: 0.1s filter ease-in; }
        @media (max-width: 575.98px) {
          #about .about .img-about img {
            height: 90vw; } }
      #about .about .img-about img:hover {
        filter: blur(0px);
        cursor: none; }

.footer {
  width: 100;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr; }
  @media (max-width: 575.98px) {
    .footer {
      background-color: #221E20; } }
  .footer .mail {
    grid-column: 1/2;
    display: flex;
    align-items: center; }
  .footer .mobile {
    grid-column: 2/2;
    display: flex;
    align-items: center;
    justify-content: flex-end; }
  .footer a {
    padding: 0 10px 0 10px;
    color: #221E20;
    font-size: 18px;
    font-weight: 400;
    background-image: linear-gradient(#FFFFFF, #FFFFFF);
    background-size: 0%;
    background-position: left;
    background-repeat: no-repeat;
    transition: 0.3s all ease-in; }
    @media (max-width: 575.98px) {
      .footer a {
        color: #FFFFFF; } }
  .footer a:hover {
    background-image: linear-gradient(#221E20, #221E20);
    background-size: 100%;
    color: #FFFFFF; }

.regular {
  font-weight: 300; }

.medium {
  font-weight: 400; }

.bold {
  font-weight: 700; }

.primopiano {
  background-color: #221E20; }

/*# sourceMappingURL=style.css.map */