/* variable */
:root {
  --background: #F6F8FC;
  --color: #0A040A;
  --back-2: #FFFFFF;
}
/* Reset basic CSS */
* {
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

.shadow {
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

  /* SCROLL BAR */
  ::-webkit-scrollbar {
    width: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 7px;

  }
  ::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 20px;
  }
  ::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 20px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* FONT+LINE+WEIGHT-SIZE */
  .headline-size { font-weight: 400; }

  .title-size {}

  .label-size { font-weight: 500; }

  .body-size { font-weight: 400; }

  /* Estilos globais */
  a {
    width: 100%;
    height: 100%;

    all: unset;

    cursor: pointer;
  }

  input {
    all: unset
  }

  button {
    all: unset;

    width: 100%;
    height: 100%;

    cursor: pointer;
  }

  ul, li {
    list-style: none;
  }

  body {
    width: 100%;
    height: 100vh;

    padding-block: 12px;

    display: grid;
    grid-template-areas:
      "IsMe Github"
      "IsMe Footer";
    grid-template-columns: .5fr 2fr;
    grid-template-rows: 1fr .1fr;

    row-gap: 12px;
    column-gap: 12px;

    background-image: url("../images/texture.jpg");
    background-size: 15%;
    background-repeat: repeat;
    /* background-color: var(--background); */
    color: var(--color);
  }

  .radius {
    border-radius: 12px;
  }

  .padding {
    padding-inline: 24px;
    padding-block: 12px;
  }

  /* ID MAIN */
  #isMe {
    grid-area: IsMe;

    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: 40px 2fr 1fr;
    row-gap: 24px;
  }

  #isMe section {
    border-top: 4px solid var(--back-2);
  }

  #github {
    grid-area: Github;
    overflow: auto;

    margin-right: 12px;

    background-color: var(--back-2);
  }

  #footer {
    grid-area: Footer;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--back-2);
  }

  #footer span {
    color: tomato;
  }

  /* HEADER */
  #header {
    margin-left: 12px;
  }

  #navigation {
    width: 100%;
    height: 100%;
  }

  #navigation ul {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: space-between;

    padding-inline-start: 26px;
    padding-inline-end: 13px;

    background-color: var(--back-2);
    border-radius: 999px;
  }

  #navigation input {
    height: 100%;
  }

  #navigation--icon {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 300ms ease;
  }


  /* ABOUT */
  :is(#about h2, #contact h2) {
    margin-block: 12px;
  }

  :is(#about p, #contact p) {
    margin-block: 6px;
  }

  :is(#about) :is(h2, p) {
    margin-left: 12px;
  }

  #about figure {
    width: 100%;
    height: 160px;
  }

  #about figure img {
    width: 100%;
    height: 100%;

    border-radius: 0 999px 999px 0;

    object-fit: cover;
  }

  /* CONTACT */
  :is(#contact h2, #contact p) {
    margin-left: 12px;
  }

  #contact-links {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  #contact-links a {
    padding: 7px;
  }

  #contact-links a:hover {
    border-radius: 999px;
    background-color: var(--back-2);
  }

  /* GITHUB */
  #MyProject {
    padding-top: 32px;

    display: flex;
    flex-direction: column;

    row-gap: 32px;

    justify-content: center;
  }

  .project {
    border-radius: 12px;
    border: 2px solid var(--color);

    padding-inline: 24px;
    padding-block: 12px;

    cursor: pointer;

    transition: all 300ms;
  }

  .project:hover,
  .project:hover .project-head-content span {
    color: var(--back-2);
    background-color: var(--color);
    border-color: var(--back-2);
    fill: var(--back-2);
  }

  .project:hover .project-foot-circle {
    background-color: var(--back-2);
  }

  .project-head{
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 6px;
  }
  .project-head-content {
    display: flex;
    align-items: center;
    column-gap: 6px;
  }

  .project-head-content span {
    padding-inline: 6px;
    padding-block: 3px;

    font-size: 12px;

    border: 1px solid var(--color);
    border-radius: 999px;

    transition: all 300ms;
  }

  .project-body{
    margin-bottom: 18px;
  }

  .project-foot{
    display: flex;
    align-items: center;
    column-gap: 6px;
  }

  .project-foot-circle {
    width: 12px;
    height: 12px;

    background-color: var(--color);

    border-radius: 999px;

    transition: all 300ms;
  }


/* MEDIA */
@media (min-width: 1240px) {
  .headline-size{ font-size: 32px; line-height: 40px; }
  .title-size { font-weight: 400;  font-size: 22px;  line-height: 28px; }
  .label-size { font-size: 14px; line-height: 20px;}
  .body-size { font-size: 16px; line-height: 24px; }
}

@media (max-width: 1239px) {
  .headline-size{ font-size: 28px; line-height: 36px; }
  .title-size { font-weight: 500; font-size: 16px; line-height: 24px; }
  .label-size { font-size: 12px; line-height: 16px;}
  .body-size { font-size: 14px; line-height: 20px; }
}

@media (max-width: 904px) {
  .headline-size{ font-size: 24px; line-height: 32px; }
  .title-size { font-weight: 500; font-size: 14px; line-height: 20px; }
  .label-size { font-size: 11px; line-height: 16px;}
  .body-size { font-size: 12px; line-height: 16px; }

  .padding {
    padding-inline: 12px;
    padding-block: 6px;
  }

  body {
    grid-template-areas:
      "IsMe"
      "Github"
      "Footer";
    grid-template-columns: 1fr;
    grid-template-rows: .5fr 1fr .2fr;
  }

  #isMe {
    margin-inline: 12px;
    grid-area: IsMe;

    grid-template-areas:
      "Header Header"
      "About Contact";

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40px 1fr;

    justify-content: center;
    align-items: center;

    row-gap: 0px;
  }

  #isMe section {
    border-top: 0px;

    align-self: flex-start;
  }

    #header {grid-area: Header; margin: 0; height: 100%;}

    #about {
      grid-area: About;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #about figure {
      width: 90px;
      height: 90px;
    }
    #about figure img {
      width: 100%;
      height: 100%;

      border-radius: 999px;

      object-fit: cover;
    }

    #contact {
      grid-area: Contact;

      text-align: center;
    }


  #github {
    grid-area: Github;
    overflow: auto;

    margin-right: 0;
    padding: 0;

    border-radius: 0px;

    background-color: var(--back-2);
  }

  #github h1 {
    margin-top: 12px;
    margin-inline: 12px;
  }

  #footer {
    margin-inline: 12px;
  }

  #MyProject {
    padding-top: 16px;
    padding-inline: 6px;

    display: flex;
    flex-direction: column;

    row-gap: 16px;

    justify-content: center;
  }

  .project {

    border-radius: 12px;
    border: 2px solid var(--color);

    padding-inline: 12px;
    padding-block: 6px;

    cursor: pointer;

    transition: all 300ms;
  }
}