@font-face {
    font-family: "ProximaNova-Medium";
    src: url("../fonts/367A9E_5_0.eot");
    src: url("../fonts/367A9E_5_0.eot?#iefix") format("embedded-opentype"),url("../fonts/367A9E_5_0.woff2") format("woff2"),url("../fonts/367A9E_5_0.woff") format("woff"),url("../fonts/367A9E_5_0.ttf") format("truetype")
}

html {
    font-size: 16px;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, rgba(245,245,245,1) 0vw, rgba(245,245,245,1) 22vw, rgba(226,230,230,1) 25vw, rgba(51,113,115,0.15) 72vw, rgba(51,113,115,0.2) 75vw, #337173 120vw);
    font-family: "ProximaNova-Medium";
    color: #000000c2;
    user-select: none;
}

body {
    margin: 0;
}

main {
    display: grid;
    width: 100vw;
    height: 100vh;
    justify-items: center;
    align-items: center;
    grid-template-rows: 1fr 1fr auto;
}

.logo {
    content: url("https://fischerkerrn.com/wp-content/uploads/2022/11/FK-logo.svg");
}

.welcome {
    font-size: 1.4em;
    align-self: start;
    padding: 15px;
    border-radius: 15px;
}

section {
    justify-self: end;
    display: grid;
    border-radius: 20px 0 0 0;
    padding: 9px 0 0 9px;
    grid-template-columns: min-content auto;
    background: #ffffff52;
}

.tap {
    justify-self: end;
    align-self: center;
    margin-bottom: 3px;
    margin-right: 3px;
    text-align: right;
    width: 45vw;
}

.tap-area {
    border: 3px solid #0000000d;
    border-radius: 50px;
    height: 50px;
    width: 50px;
    justify-self: end;
    align-self: end;
    margin: 3px;
    display: grid;
    transition: 0.2s ease-out;
    background-color: unset;
}

    .tap-area > div {
        border: 12px solid #00000005;
        border-radius: 50px;
        height: 0px;
        width: 0px;
        justify-self: center;
        align-self: center;
        transition: 0.2s ease-out;
    }


    .tap-area:active {
        border-color: #4c537857;
    }

        .tap-area:active > div {
            border-color: #12275836;
        }

@media (min-width: 481px) {
    html {
        font-size: 20px;
    }

    .welcome {
        padding: 30px;
        border-radius: 20px;
    }

    section {
        background: #ffffff30;
    }

    .tap {
        width: 30vw;
    }
}