@import url('https://fonts.googleapis.com/css2?family=Coiny&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
body{
    font-family: "Coiny", system-ui;
    background-color: rgb(0, 0, 34);
    background: linear-gradient(135deg, rgb(0, 0, 34), rgb(0, 74, 130), rgb(0, 148, 198));
    min-height: 100vh;
}
header{
    color: rgb(219, 210, 198);
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    background-color: rgb(0, 148, 198);
    border-radius: 10px;

}
.typy {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 1rem;
}

.typy > * {
    flex: 1 1 calc(33.333% - 8px);
    text-align: center;
    box-sizing: border-box;
}
.card{
    display: flex ;
    flex-direction: column;
    justify-content: center;
    height: 100px;
    border-radius: 10px;
    text-align: center;
    line-height: 100px;
    text-decoration: none;
    color: rgb(219, 210, 198);
    font-size: 60px;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    gap: 8px;
    line-height: 1.2;
}
.card:hover {
    transform: translateY(-6px) scale(1.05);
    filter: brightness(1.2);
    box-shadow: 0 8px 24px 10px rgba(0,0,0,);
}
.angiel {
    font-size: 18px;
    opacity: 0.9;
}

 
.card-normal   { background-color: #a0a0a0; }
.card-fire     { background-color: #e2621b; }
.card-water    { background-color: #0094c6; }
.card-grass    { background-color: #3a9e3a; }
.card-electric { background-color: #c8a800; }
.card-ground   { background-color: #9b6e2e; }
.card-rock     { background-color: #7a6a4a; }
.card-flying   { background-color: #6a8fc8; }
.card-bug      { background-color: #5a8a2a; }
.card-ghost    { background-color: #5a3a8a; }
.card-steel    { background-color: #6a8a9a; }
.card-psychic  { background-color: #c83a6a; }
.card-ice      { background-color: #3aaac8; }
.card-dragon   { background-color: #4a3ac8; }
.card-dark     { background-color: #3a2a3a; }