*{
    color: #101733fc;
}

body{
    font-family: 'Courier New', Courier, monospace;
    margin: 5px 5px 5px 5px;
    padding: 10px 10px 10px 10px;

}

header h1{
    color: #000;
    font-weight: 900;
    font-size: 50px;
    text-align: center;
    background-color: #1c4a77bf;
    border: 5px inset #a1c3f4;
    border-radius: 15px;
  
}
header{
    text-align: center;
    padding: 20px;
    background-color: #3c648c78;
}
.grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    column-rule: 5px inset rgba(40, 99, 167, 0.87);
    
    column-gap: 10px;
    
    row-gap: 10px;
    

}
.item{
    display: block;
    padding: 10px;
    border: #a1c3f4 inset 3px;
    border-radius: 15px;
    background-color: #728aabb5;
    text-align: center;
    justify-content: stretch;
    align-items: stretch;
    place-items: stretch;
    place-self: center;

}
.audio{
    display: block;
    padding: 10px;
    border: #d6a1f4dc inset 3px;
    border-radius: 15px;
    background-color: #b882ded0;
    text-align: center;
    justify-content: stretch;
    align-items: stretch;
    place-items: stretch;
    place-self: center;
}
h2{
    text-align: center;
}


a{
        text-decoration: none;
        color: #f94b4b;
        padding: 3px;
        font-weight: bold;
}
a:hover{
        color: #000000;
        text-decoration: double;
        background-color: #904defd8;
        padding: 3px;
        border: #000 solid 1px;
        border-radius: 5px;
        font-weight: bold;
    }


footer{
    display:block;
    text-align: center;
}