#characters div{
    padding: 25px;
}
#characters .row{
    gap:25px
}
.characterBox{
    border: solid 4px;
    width: 310px;
    height: 310px;
    background-color: #1e1e1e;
    position: relative;

}
.characterBox:hover {
  transform: scale(1.2);
  transition: all 350ms ease-in-out;
}
main img{
    height: 250px;
}
.centered {
    font-family: "Press Start 2P", system-ui;
  position: absolute;
  width:80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0%;
  transform: opacity ease-in 4s;
}
.gurt{
    border-color: #2a9e16;
}
.gurt:hover{
    background-color: #648a61;
    border-color: #00df13;
}

.gurt:hover img{
    opacity: 50%;
}
.gurt:hover .centered{
    color: #09ff00;
    opacity: 100%;
}
.lilBuffy{
    border-color: #fbd636;
}
.lilBuffy:hover{
    background-color: #8d9263;
    border-color: #fbff21;
}

.lilBuffy:hover img{
    opacity: 50%;
}
.lilBuffy:hover .centered{
    color: #e5ff00;
    opacity: 100%;
}
.sarah{
    border-color:#d7b583;
}
.sarah:hover{
    background-color: #584f44;
    border-color: #af760b;
}

.sarah:hover img{
    opacity: 50%;
}
.sarah:hover .centered{
    color: #ffc711;
    opacity: 100%;
}
.albe{
    border-color: #a536fb;
}
.albe:hover{
    background-color: #564363;
    border-color: #6b039b;
}
.albe:hover img{
    opacity: 50%;
}
.albe:hover .centered{
    color: #d429ff;
    opacity: 100%;
}
@keyframes switching {
  0% {src: url(Img/KosmoV1.png);}
  50% {src: url(Img/KoV2.png);}
  100% {src: url(Img/KozzieV2.png);}
}
#ko{
  animation-name: switching;
  animation-duration: 2s;  
  animation-iteration-count: infinite;  
}
.kosmo{
    border-color: #1c7a95;
    transform: opacity ease-in 4s;

}
.kosmo:hover{
    background-color: #4b6980;
    border-color: #0b8caf;
}

.kosmo:hover img{
    opacity: 50%;
}
.kosmo:hover .centered{
    color: rgb(17, 255, 255);
    opacity: 100%;
}
.trevor{
    border-color: #9e0000;
}
.trevor:hover{
    background-color: #50312f;
    border-color: #f31c00;
}

.trevor:hover img{
    opacity: 50%;
}
.trevor:hover .centered{
    color: #ff3300;
    opacity: 100%;
}
.daisy:hover{
    background-color: #707377;
}

.daisy:hover img{
    opacity: 50%;
}
.daisy:hover .centered{
    color: #ffffff;
    opacity: 100%;
}