/*
Theme Name: Portafolio
Theme URI: http://urldeltema
Description: portafolio
Author: Nicolas-leal
Author URI: dirección web del autor
Version: 0.1
License: GNU General Public License (u otra)
Tags: etiquetas que ayuden a indexar el tema
*/
.card-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}

.card_proyect {
  background-color: #002E77;
  border-radius: 10px;
  box-shadow: 0 0px 10px rgb(0, 0, 0);
  max-width: 300px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card_proyect:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 12px rgb(0, 0, 0);
}

.card_proyect h2 {
  font-size: 1.5em;
  margin: 0 0 10px;
}

.card_proyect button {
  cursor:pointer;
    position:relative;
    padding:10px 20px;
    color:white;
    background:black;
    font-size:28px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    transition:all 1s;
    &:after,&:before{
      content:" ";
      width:10px;
      height:10px;
      position:absolute;
      border :0px solid #fff;
      transition:all 1s;
      }
    &:after{
      top:-1px;
      left:-1px;
      border-top:2px solid white;
      border-left:2px solid white;
    }
    &:before{
      bottom:-1px;
      right:-1px;
      border-bottom:2px solid white;
      border-right:2px solid white;
    }
    &:hover{
      border-top-right-radius:0px;
    border-bottom-left-radius:0px;
       background:rgba(0,0,0,.5);
       color:white;
      &:before,&:after{
        
        width:100%;
        height:100%;
         border-color:white;
      }
    }
  }

@media screen and (max-width: 600px) {
  .card-container {
    flex-direction: column;
    align-items: center;
  }

  .card_proyect {
    width: 80%;
  }
}