*{
    margin:0px;
    padding: 0px;
     font-family: sans-serif;
}

body{
    display: inline;
    
    background-color: rgb(27, 25, 25);
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.card{
    height: 220px;
    margin: 30px;
    box-shadow: 5px 5px 20px black;
    overflow: hidden;
    border: 2PX solid black;
}
img{
    height: 220px;
    width: 200px;
    border-radius: 3px;
    transition: .5s;
}
.intro{
    height: 40px;
    width: 180px;
    padding: 6px;
    box-sizing: border-box;
    position: absolute;
    bottom: 280px;
    background: rgb(1, 80, 1);
    color: white;
    transition: .5s;
}
h1{
    margin: 10px;
    font-size: 20px;
}
p{
    font-size: 20px;
    margin: 20px;
    visibility: hidden;
    opacity: 0;
}
a{
    font-weight: bolder;
    color: black;
    visibility: hidden;
}

.card:hover{
    cursor: pointer;

}
.card:hover .intro{
    height: 220px;
    bottom: 290px;
    background:none;
    color: black;
    
}
.card:hover p{
    opacity: 1;
    visibility: visible;
}
.card:hover img{
   
    opacity: .5;

}
.card:hover a{
    opacity: 1;
    visibility: visible;
}


.row{
    display: flex;
    justify-content: center;
    align-items: center;
}
.car{
    height: 220px;
    margin: 30px;
    box-shadow: 5px 5px 20px black;
    overflow: hidden;
    border: 2PX solid black;
}
img{
    height: 220px;
    width: 200px;
    border-radius: 3px;
    transition: .5s;
}
.int{
    height: 40px;
    width: 200px;
    padding: 6px;
    box-sizing: border-box;
    position: absolute;
    bottom: 1px;
    background: rgb(1, 80, 1);
    color: white;
    transition: .5s;
}
h1{
    margin: 10px;
    font-size: 20px;
}
p{
    font-size: 20px;
    margin: 20px;
    visibility: hidden;
    opacity: 0;
}

a{
    font-weight: bolder;
    color: black;
    visibility: hidden;
}
.car:hover{
    cursor: pointer;

}
.car:hover .int{
    height: 220px;
    bottom: 350 px;
    background:none;
    color: black;
    
}
.car:hover p{
    opacity: 1;
    visibility: visible;
}
.car:hover img{
   
    opacity: .5;

}
.car:hover a{
    opacity: 1;
    visibility: visible;
}




.final{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ca{
    height: 220px;
    margin: 30px;
    box-shadow: 5px 5px 20px black;
    overflow: hidden;
    border: 2PX solid black;
}
img{
    height: 220px;
    width: 200px;
    border-radius: 3px;
    transition: .5s;
}
.in{
    height: 40px;
    width: 200px;
    padding: 6px;
    box-sizing: border-box;
    position: absolute;
    bottom: -280px;
    background: rgb(1, 80, 1);
    color: white;
    transition: .5s;
}
h1{
    margin: 10px;
    font-size: 20px;
    color: white;
}
p{
    font-size: 20px;
    margin: 20px;
    visibility: hidden;
    opacity: 0;
    font-weight: bolder;
    color: white;
}
a{
    font-weight: 1000;
    color: rgb(255, 252, 252);
    visibility: hidden;
    
}
.ca:hover{
    cursor: pointer;

}
.ca:hover .in{
    height: 220px;
    bottom: -275px;
    background:none;
    color: black;
    
}
.ca:hover p{
    opacity: 1;
    visibility: visible;
}
.ca:hover img{
   
    opacity: .5;

}
.ca:hover a{
    opacity: 1;
    visibility: visible;
}