body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #71c466, #469e4a);
}

p {
    margin: 0;
    font-size: calc(12vw + 12vh);
    text-shadow: 0px 0px 0px rgba(0, 0.1, 0, 0.5),
                 0px 0px 0px rgba(0, 0.1, 0, 0.5),
                 0px 0px 0px rgba(0, 0.1, 0, 0.5);
    background-image: linear-gradient(to top, #abffbd, #abffbd);
    background-clip: text;
    -webkit-text-fill-color: transparent;




    white-space: nowrap; 

    transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}


p:hover {


    text-shadow: 2px 2px 4px rgba(0, 0.1, 0, 0.5),
    4px 4px 6px rgba(0, 0.1, 0, 0.5),
    6px 6px 16px rgba(0, 0.1, 0, 0.5);
    
    -webkit-text-fill-color: transparent;

    
    background-image: linear-gradient(to top, #c0e4c8, #abffbd);

    
}

@media (orientation: portrait) {
    p {
        transform: rotate(-90deg);
        transform-origin: center center;
    }
}

@media (max-aspect-ratio: 1/1) {
    p {
        font-size: calc(12vw + 12vh);
    }
}

@media (max-width: 600px) {
    p {
        font-size: 30vmin;
    }
}