body {
  background: #f1f0cc;
  color: #222;

  font-family: Georgia, serif;

  margin: 0;
  padding: 40px;

  line-height: 1.7;
}

.page {
  max-width: 700px;
  margin: auto;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

a {
  text-decoration: none;
  color: inherit;
}

.subtitle {
  font-size: 17px;
  color: #666;
  margin-bottom: 3rem;
}

.row {
    display: flex;

    gap: 60px;
}

.card_github {
    position: relative;

    width: 250px;
    height: 200px;
    
    border: 2px solid transparent;
    transition: 0.05s;

    margin-bottom: 2rem;

    

}

.border {
   position: absolute;

   opacity: 0;

   top: -3px;
   left: -4px;

   width: 103%;
   height: 104%;

   transition: 0.05s;

}

.top_github {
    background: #90e0ef;
    color: black;
    

    width: 100%;
    height: 65%;
}



.bottom_github {

    background: #cad4c2;
    color: black;
        
    font-family: "Intel One Mono";
    font-size: 35px;
    
    width: 96.25%;
    height: 35%;

    display: flex;

    justify-content: flex-end;
    align-items: flex-end;

    padding-right: 10px;
}

.terminal {
    position: absolute;

    top: -30px;
    left: 0px;

    width: 100%;
    height: 100%; 
    
    opacity: 1;
}

.terminal_hover {
    position: absolute;

    top: -30px;
    left: 0px;


    width: 100%;
    height: 100%; 
    
    opacity: 0;
}

.card_github:hover .border {
    opacity: 1
}

.card_github:hover .terminal {
    opacity: 0;
}

.card_github:hover .terminal_hover {
    opacity: 1;
}

.card_blog {
    position: relative;

    width: 250px;
    height: 200px;
    
    border: 2px solid transparent;
    transition: 0.05s;

    margin-bottom: 2rem;
}
.batman {
    position: absolute;

    top: -19px;
    left: 0px;

    width: 100%;
    height: 100%; 
    
    opacity: 1;
}

.batman_hover {
    position: absolute;

    top: -30px;
    left: 0px;

    width: 100%;
    height: 100%; 
    
    opacity: 0;
}


.border_blog {
   position: absolute;

   opacity: 0;

   top: -3px;
   left: -4px;

   width: 103%;
   height: 104%;

   transition: 0.05s;

}

.card_blog:hover .border_blog {
    opacity: 1
}

.top_blog {
    background: #f18701;
    color: black;

    width: 100%;
    height: 65%;
}
.bottom_blog {

    background: #cad4c2;
    color: black;
        
    font-family: "Intel One Mono";
    font-size: 35px;
    
    width: 96.25%;
    height: 35%;

    display: flex;

    justify-content: flex-end;
    align-items: flex-end;

    padding-right: 10px;
}

.card_blog:hover .batman {
    opacity: 0;
}

.card_blog:hover .batman_hover {
    opacity: 1;
}