.visually-hidden{
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px}

main{
    font-family: 'roboto flex',system-ui;
    color:#333
}

main>header{
    width: 100%;
    height: min(100vmin,61.8vh);
    background-color: #111;
    display: grid;
    place-items: center
}

.ddd{fill: #ddd}
.fff{fill: #fff}
clipPath rect{fill: none}
.verse,.thick,.thin{font-size: 89px}
.verse,.thick{font-variation-settings: 'wght' 610, 'wdth' 55, 'opsz' 89}

.cite{fill: #888}

h2,.button{
    font-weight: 377;
    font-stretch: 144%;
}

h2{
    text-wrap:balance;
}

h2 strong{
    font-weight: 610;
    font-variation-settings:"GRAD" 144;
}

svg{width: 100%}

.card h3{
    line-height: 1;
    font-weight: 610;
    font-stretch: 144%;
    font-variation-settings:"GRAD" 144;
    
}

.card ul{
    margin-top: .5lh;
    text-wrap:pretty;
}

main>:last-child{padding-bottom: 4.236em}

@media(orientation:portrait){
    main>header{
        background: radial-gradient(circle at 50% 45%, #444 0%, #111 50%);
    }
    
    main>header div{
        margin: 0;
        width:62%;
    }
    
    svg{transform: 
        scale(1.2) 
        translateX(2%)
        translateY(3.5%)
    }
    .here-img-clip{clip-path: url(#clippath)}
    .i-am-img-clip{clip-path: url(#clippath-1)}
    .verse{
        font-size: 89px;
        font-variation-settings: 'wght' 610, 'wdth' 55, 'opsz' 89;
    }
    
    .period, .rdq,.ldq {font-variation-settings: 'wght' 233, 'wdth' 34, 'opsz' 89}
    
    .send,.me{filter:drop-shadow(0 0 8px rgba(255,200,55,.21))drop-shadow(0 0 5px rgba(255,200,55,.21))drop-shadow(0 0 3px rgba(255,200,100,.21))drop-shadow(0 0 2px rgba(255,255,255,.21))}
    
    .cite{
        font-size: 13px;
        font-variation-settings: 'wght' 377, 'wdth' 144, 'opsz' 13}
}

@media(orientation:landscape){
    main>header{
        background: radial-gradient(at 55% 47%, #444, #111 50%);
    }
    
    main>header div{
        width: min(100%,100ch)
    }
    
    .here-img-clip{clip-path: url(#l-clippath)}
    .i-am-img-clip{clip-path: url(#l-clippath-1)}

    .send-me .fff {
        font-size: 199px;
        font-variation-settings: 'wght' 610, 'wdth' 55, 'opsz' 144;
        filter:drop-shadow(0 0 8px rgba(255,200,55,.21))drop-shadow(0 0 5px rgba(255,200,55,.21))drop-shadow(0 0 3px rgba(255,200,100,.21))drop-shadow(0 0 2px rgba(255,255,255,.21))
    }
    
    .thick {font-variation-settings: 'wght' 610, 'wdth' 55, 'opsz' 89}
    .thin {font-variation-settings: 'wght' 233, 'wdth' 34, 'opsz' 89}

    .cite {
        font-size: 16px;
        font-variation-settings: 'wght' 377, 'wdth' 144, 'opsz' 16;
    }
    
    h2{text-align: center}
}