* {
    /* outline: 1px solid gray; */
    user-select: none;
}

.haiku, span {
    cursor:default;
}

html {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#haikucontainer {
    width: 60vw;
    height: 60vh;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

.haiku {
    font-size: 19pt;
    opacity: 0;
    filter: blur(25px);
    transform: translateY(6px);
    transition: opacity 1000ms ease, filter 1000ms ease, transform 1000ms ease;
    will-change: opacity, filter, transform;
    display: inline-block;
    position: absolute;
}

.haiku.visible {
    opacity: 1;
    filter: blur(0);
    transform: none;
    display: inline-block;
}

.letter {
  display: inline-block;
  position: relative;
  /* czas i easing możesz dostroić */
  transition: transform 1.8s ease-out, opacity 1.8s ease-out;
  will-change: transform, opacity;
  /* stan początkowy */
  transform: translate(0,0) rotate(0deg);
  opacity: 1;
}

#author {
    position: absolute;
    width: 100%;
    bottom: 30px;
    text-align: right;
    right: 30px;
    font-size: 12pt;
}

.blur-fade {
    opacity: 0;
    filter: blur(25px);
    transition: opacity 1000ms ease, filter 1000ms ease;
    will-change: opacity, filter;
}

.blur-fade.visible {
    opacity: 1;
    filter: blur(0);
}

#info {
    position: absolute;


    font-size: 12pt;
    left: 15px;
    top: 15px;
    text-align: center;
    font-weight: 300;
    padding: 2px 15px;
    color: #fff;
    border-radius: 0px;
    cursor: hand;
    background-color: #ccc;
    text-decoration: none;
}

#info:hover {
    background-color: #999;
}


main {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

main p {
    font-size: 19pt;
    padding-bottom: 80px;
}

@media (max-width: 640px) {

    #haikucontainer {
        width: 95vw;
        height: 70vh;
    }
    .haiku {
        font-size: 13pt; /* zmniejszona czcionka */
    }

    #author {
        font-size: 10pt; /* mniejszy podpis */
    }

    #info {
        font-size: 10pt;
        padding: 2px 10px;
    }

    main p {
        font-size: 13pt;
    }
}