@import url("styles/common.css");

#sunflower {
    width: 12rem;
    height: 12rem;
    padding: var(--spacing-050);
    border: solid var(--spacing-050) var(--primary-color);
    /* on iOS, prevent long press from opening context menu which would mask the rolling-i animation */
    -webkit-touch-callout: none;
}

#sunflower:active {
    scale: 97%;
}

.dont-break-me {
    text-wrap: nowrap;
}

.rolling-i {
    display: inline-block;
    transition: transform 1.5s, color 1.5s;
}

#sunflower:active ~ h1 .rolling-i {
    transform: rotate(1turn);
    color: gold;
}

.links {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-200);
}

@media (max-width: 25rem /* 400px */) {
    .links {
        flex-direction: column;
        align-items: center;
    }
}

.links li {
    padding: 0;
}