@font-face {
    font-family: 'GeomanistBook';
    src:  url('../../../fonts/Geomanist-Book.woff') format('woff');
}
@font-face {
    font-family: 'GeomanistBold';
    src:  url('../../../fonts/Geomanist-Bold.woff') format('woff');
}

.wrapper {
    position: absolute;
    left: 0px; top: 0px;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.wrapper:hover {
    cursor: pointer;
}
.details {
    position: fixed;
    left: 0px; top: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.text {
    color: white;
    position: absolute;
}
.title {
    font-family: 'GeomanistBold';
    font-size: 40px;
}
.result p {
    font-family: 'GeomanistBook';
    font-size: 20px;
}
.explain {
  font-size: 22px;
}
#animation {
    max-height: 750px;
    max-width: 30%;
    display: inline-block;
    width: auto;
    z-index: 3;
}
.close {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 64px;
    height: auto;
}
.close:hover {
    cursor: pointer;
}
.element {
    width: 100%;
    height: auto;
    float: left;
}