html,
body {
    margin: 0;
    height: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    height: 100svh;
    height: 100dvh;
}

body {
    background: #fff;
    color: #000;
    background: url(back.jpg?v=202501231753) no-repeat 50% 40% fixed;
    background-size: cover;
    text-align: center;
    display: flex;
    flex-direction: column;
    touch-action: pan-y;
    display: grid;
    grid-template-rows: 1fr auto 0 10vh 10vh 1fr;
    grid-template-rows: 1fr auto 0 10svh 10svh 1fr;
    grid-template-rows: 1fr auto 0 10dvh 10dvh 1fr;
    grid-template-columns: 1fr repeat(3, auto) 1fr;
    grid-template-areas:
        ". . . . ."
        ". a a a ."
        ". . . . ."
        ". s r d ."
        ". f y w ."
        ". . . . .";
    row-gap: 1vmin;
    column-gap: 2vmax;
}

body>* {
    transition: opacity .5s;
    opacity: 1;
}

body.loading>* {
    opacity: 0;
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

*:focus,
*:active {
    outline: none !important;
}

#cover,
#content {
    grid-area: a;
    border-radius: 2vmin;
    margin: auto;
    max-width: 90vw;
    max-height: 75vh;
    max-height: 75svh;
    max-height: 75dvh;
    height: 100%;
}

#cover {
    cursor: pointer;
    touch-action: manipulation;
    touch-action: none;
    transition: opacity 1s;
}

#content {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: #000 0 0 1vmax;
}

a {
    background: url(sweet.png) no-repeat center;
    background-size: contain;
    font-size: 4.5vmin;
    color: #fff;
    text-shadow: #000 0 0 1vmin;
    font-weight: bold;
    font-family: sans-serif;
    align-content: center;
    min-width: 6em;
    filter: drop-shadow(0 0 2vmin #fff);
}

a:link,
a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none;
    outline: none;
}

a[href][target="share"] {
    grid-area: s;
}

a[target="_self"] {
    grid-area: r;
}

a[target="dedication"] {
    grid-area: d;
}

a[target="facebook"] {
    grid-area: f;
}

a[target="youtube"] {
    grid-area: y;
}

a[target="tkc"] {
    grid-area: w;
}

@media (min-aspect-ratio: 1.4) {
    body {
        grid-template-rows: 15vh repeat(3, auto) 15vh;
        grid-template-rows: 15svh repeat(3, auto) 15svh;
        grid-template-rows: 15dvh repeat(3, auto) 15dvh;
        grid-template-columns: 1fr auto auto 0 30vw 1fr;
        grid-template-areas:
            ". . . . a ."
            ". f s . a ."
            ". y r . a ."
            ". w d . a ."
            ". . . . a .";
        row-gap: 1vmin;
        column-gap: 2vmax;
    }

    #cover,
    #content {
        max-height: 90vh;
        max-height: 90svh;
        max-height: 90dvh;
    }
}