@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
  --dark: #252422;
  --light: #fffcf2;
  --orange: #eb5e28;
  font-family: "inter";
  cursor: default;
}
* {
  padding: 0;
  margin: 0;
}
body {
  min-height: 100vh;
  background-color: var(--dark);
  color: var(--light);
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  max-width: 1080px;
  /* display: grid;
  grid-template-columns: 1fr 1fr; */
  display: flex;
  gap: 20px;
  height: 250px;
  margin: 20px;
  /* border: 1px solid red; */
  * {
    max-height: 250px;
  }
}

h1 {
  font-size: 1.2rem;
}
.title {
  border-bottom: 2px solid var(--light);
  /* margin-bottom: 15px; */
}
#bio {
  display: flex;
  align-items: center;
  gap: 20px;
  h1 {
    font-size: 1.5rem;
  }
  p {
    text-align: justify;
    font-size: small;
  }
  #photo-profile {
    height: 120px;
    border-radius: 50%;
  }
  article {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #contacts ul {
    list-style-type: none;
    display: flex;
    gap: 10px;
    li a {
      color: var(--light);
      text-decoration: none;
    }
    li a:hover {
      color: var(--orange);
    }
  }
}
#list-skills {
  margin-top: 20px;
  h1 {
    border-bottom: 2px solid var(--light);
    margin-bottom: 15px;
  }
  ul {
    display: flex;
    list-style-type: none;
    gap: 10px;
    flex-wrap: wrap;
  }
}
#list-projects {
  min-width: 50%;
  #projects-type { 
    display: flex;
    justify-content: space-between;
    list-style: none;
    border-bottom: 2px solid white;
    margin-bottom: 15px;
    li {
      position: relative;
      input{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
        /* margin: 0; */
        opacity: 0;
        z-index: 1;
      }
      label {
        display: block;
      }
      input[type="radio"]:checked + label {
        color: var(--orange);
      }
      input[type="radio"]:hover + label {
        color: var(--orange);
      }
      
    }
  }
  #projects {
    overflow-y: auto;
    .project {
      margin-bottom: 20px;
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 100%;
      gap: 5px;

      h1 {
        font-size: medium;
        cursor: pointer;
      }
      h1:hover {
        color: var(--orange);
      }
      div {
        grid-row: 2;
        display: flex;
        justify-content: space-between;
        a {
          text-decoration: none;
          color: white;
        }
      }
      h2 {
        font-weight: 300;
        cursor: pointer;
        font-size: small;
        text-align: justify;
      }
      h2:hover {
        color: var(--orange);
      }
    }
  }
}
@media (max-width: 1000px) {
  #bio {
    h1 {
      font-size: 1.2rem;
    }
  }
  body {
    align-items: flex-start;
  }
  main {
    width: 600px;
    display: flex;
    flex-direction: column;
  }
  #list-projects #projects {
    overflow-y: visible;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: 1rem;
  }
  #bio {
    gap: 10px;
    h1 {
      font-size: 1rem;
    }
    p {
      font-size: x-small;
    }
    article {
      gap: 5px;
    }
    #contacts ul {
      li a {
        font-size: smaller;
      }
    }
  }
  #bio #photo-profile {
    height: 60px;
  }
  #list-skills {
    h1 {
      font-size: 1rem;
    }
    ul {
      gap: 5px;
    }
    ul li {
      font-size: smaller;
    }
  }
  #list-projects {
    #projects-type {
      gap: 60px;
    }
  }
}