a {
  color: inherit;
  text-decoration: inherit;
}
html {
}
body {
    background-color:#f0f0f0;
}

.headline {
    color: black;
    text-align: center;
    font-size:50px;
    margin:5px;
}
.subheadline {
    color: black;
    text-align: center;
    font-size:25px;
    margin:5px;
}

.linksContainer {
    display: grid;
    padding: 10px;
    column-gap: 50px;
    row-gap: 50px;
    
    margin: 0px 20%;
    
    grid-template-columns: 1fr 1fr 1fr;
}
.linkContainer {    
    display:flex;
    flex-direction:column;
    aspect-ratio: 1 / 1;
    align-items: center;
    
    border-radius:10%;
    border:5px solid black;
    background-color: #f0f0f0;
    overflow:hidden;
    
    filter: none;
    transition:0.1s linear;
}
.linkContainer:hover {
    border:5px solid black;
    background-color: #d0d0d0;
    filter: saturate(120%);
}
.linkContainer:active {
    border:5px solid black;
    background-color: #ffffa0;
    filter: saturate(120%) brightness(90%);
}

.linkIcon {
    flex-grow:1;
    flex-shrink:1;
    font-size:100%;
}
.linkText {
    flex-grow:0;
    font-size:30px;
}

.listEntry:hover {
    background-color:#b0b0a0;
}

.foot {
    position: absolute;
    bottom:10px;
    left:10px;
}