@import url(colors.css);
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');
* {
  box-sizing: border-box;
}
body{
  background-color: var(--colorPrincipal);
}

main{
  padding-top: 6%;
  display: flex;
  padding-left: 28%;
  padding-right: 28%;
}
aside{
  padding-top: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
aside h2{
  text-align: center;
  font-size: 1.3rem;

}

h1{
  font-family: monospace;
  font-size: 1.62rem;
  color: var(--colorTexto);
  padding-left: 4px;

}
h2{
  font-family:monospace;
  color: var(--colorSecundario);
  font-size: 1.3rem;
}
h3{
  font-family:monospace;
  color: var(--colorSecundario);
  font-size: 1.1rem;
}
p{
  font-family: "Sofia Sans", sans-serif;
  font-weight:500;
  color: var(--colorTexto);
  font-size: 1.06rem;
}
a{
  font-family:sans-serif;
  color: var(--colorTexto);
}
button{
  transition-duration: 600ms;
  border: 0cm;
  border-radius: 4px;
  padding: 8px;
  background-color: var(--colorSecundario);
}
button:hover{
  transition-duration: 600ms;
  background-color: var(--colorCuaternario);
  cursor:pointer;
}
li:first-child a{
  border-bottom-left-radius: 16px;
}
li:last-child a{
  border-bottom-right-radius: 16px;
}
/*
classes
*/

img.skills{
  width: 32px;
  height: auto;
}
button.skills{
  background-color: var(--colorPrincipal);
}
div.Project{
  background-color:var(--colorQuinario);
  border: solid 1px var(--colorTexto);
  border-radius: 4px;
  padding-left: 4px;
  margin: 4px;
  margin-bottom: 8px;
}
div.Project div img{
  width: 16px;
  height: auto;
}
.job p{
  font-family: monospace;
  font-size: 1.04rem;
  line-height: 10%;
}
.job p:last-child{
  color: var(--colorDetalles);
  font-family: monospace;
  font-size: 1.04rem;
  line-height: 10%;
}

/*
Ids
*/
#pfp{
  width: 300px;
  height: auto;
  border-radius: 12px;

}
#presentacion{
  padding-left: 4px;
  padding-top: 8px;
  padding-bottom: 6px;
}
#imagen{
  margin: 12px;
}
#skillCont{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  justify-items: center;
  padding: 10px;
  width: 100%;
  max-width: 400px;
}
#downloadBtn{
  font-family: "Sofia Sans", sans-serif;
  font-size: 1rem;
}
#downloadBtn:hover{
  transition-duration: 600ms;
  background-color: var(--colorTerciario);
  cursor:pointer;
}


input[type=radio] {
  display: none;
}

.card {
  position: absolute;
  width: 55%;
  height: 480px;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform .4s ease;
  cursor: pointer;
  opacity: 0.4;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card h2{
  color: var(--colorTexto);
}

.carrousel {
  width: 100%;
  max-width: 800px;
  height: 500px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.cornerborder a{
 font-family: "Sofia Sans", sans-serif;
}
.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.card img {
  width: 80%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.card h2 {
  margin: 10px 0;
  text-align: center;
  padding: 0px 40px;
}

#item-1:checked ~ .cards #c3, #item-2:checked ~ .cards #c1, #item-3:checked ~ .cards #c2 {
  transform: translatex(-40%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #c2, #item-2:checked ~ .cards #c3, #item-3:checked ~ .cards #c1 {
  transform: translatex(40%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #c1, #item-2:checked ~ .cards #c2, #item-3:checked ~ .cards #c3 {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 1;
  
  img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  }
}


#item-2:checked ~ .player #test {
  transform: translateY(0);
}

#item-2:checked ~ .player #test  {
  transform: translateY(-40px);
}

#item-3:checked ~ .player #test  {
  transform: translateY(-80px);
}

.card a {
  position: absolute;
  bottom: 20px;
  right: 12%;
  z-index: 2;
}

.card button {
  background-color: var(--colorSecundario);
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 4px;
  opacity: 0.9;
}
.card button:hover{
  background-color: var(--colorTerciario);
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  main {
    padding-left: 5%;
    padding-right: 5%;
    flex-direction: column;
    align-items: center;
  }

  aside {
    padding-left: 5%;
    padding-right: 5%;
  }

  .card {
    width: 90%;
    height: 400px;
  }

  .card img {
    width: 100%;
  }

  .card h2 {
    font-size: 1.1rem;
    padding: 0 20px;
  }

  #pfp {
    width: 200px;
  }

  #skillCont {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  #skillCont button {
    margin: 5px;
  }

  .card a {
    right: 5%;
  }

  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  p {
    font-size: 1rem;
  }

  #item-1:checked ~ .cards #c3, 
  #item-2:checked ~ .cards #c1, 
  #item-3:checked ~ .cards #c2 {
    transform: translatex(-80%) scale(.6);
  }

  #item-1:checked ~ .cards #c2, 
  #item-2:checked ~ .cards #c3, 
  #item-3:checked ~ .cards #c1 {
    transform: translatex(80%) scale(.6);
  }
}