body {
    background: linear-gradient(209.36deg, #2f3439 0%, #181a1d 100%);
    font-family: "Raleway", sans-serif;
    height: 100%;
    margin: 0;
}

.body {
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr auto;
    grid-template-areas: "card" "card" "card" "button" "ad";
}

.hidden {
    z-index: -1;
    opacity: 0;
}

.installPromptWrapper {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: #00000085;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.installPrompt {
    background: #ececec;
    border-radius: 5px;
    color: #424242;
    max-width: 80vw;
}

.installPromptIconContainer {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F0F0F0' d='M65,17C65,10.377 59.623,5 53,5L17,5C10.377,5 5,10.377 5,17L5,53C5,59.623 10.377,65 17,65L53,65C59.623,65 65,59.623 65,53L65,17Z' /%3E%3C/svg%3E%0A") center center / 70px 70px repeat-x;
    margin: 40px 0 0;
}

.installPromptIconContainer .icon {
    width: 60px;
    margin: 0 auto;
}

.card-wrapper {
    grid-area: card;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-wrapper {
    grid-area: button;
}

#button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10vw;
    padding: 2vh;
    background: linear-gradient(0deg, #2f3439, #2f3439), linear-gradient(180.51deg, #181a1d 2.25%, #2f3439 97.76%);
    box-shadow: -4px -4px 12px rgba(255, 255, 255, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25), inset -4px -4px 12px rgba(255, 255, 255, 0), inset 0px 4px 4px rgba(0, 0, 0, 0);
    border-radius: 30px;
    text-align: center;
    font-size: 1.5em;
    color: white;
    text-transform: uppercase;
    transition: ease-out 0.1s;
}

#button * {
    padding-left: 5px;
    padding-right: 5px;
}

#button:active {
    box-shadow: -4px -4px 12px rgba(255, 255, 255, 0), 0px 4px 4px rgba(0, 0, 0, 0), inset -4px -4px 12px rgba(255, 255, 255, 0.25), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
    transition: ease-out 0.1s;
}

.card {
    transition: all 0.2s ease;
    display: grid;
    align-items: center;
    grid-template-rows: auto, max-content, auto;
    grid-template-areas: "top" "text" "bottom";
    width: 255px;
    height: auto;
    background: #f6f5f0;
    box-shadow: -4px -4px 12px rgba(255, 255, 255, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.card.tp {
    opacity: 0% !important;
}

.card * {
    display: flex;
    justify-content: center;
    padding: 10px;
}

#card-text {
    display: flex;
    align-self: start;
    grid-area: text;
    padding: 35px;
    padding-bottom: 5px;
    padding-top: 2px;
    height: 125px;
    font-style: normal;
    font-weight: bold;
    font-size: 17px;
    line-height: 20px;
    color: #000000;
    mix-blend-mode: normal;
}

.before {
    grid-area: top;
}

.after {
    grid-area: bottom;
    padding-bottom: 10px;
}

.adwrapper {
    grid-area: ad;
}