body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 45px 90px;
    color: #1704ff;
}

a:hover {
    font-style: italic;
    background: red;
    border: 1px #1704ff;
}

h1 {
    font-size: 110%;
    display: inline;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 110%;
    margin: 0;
}

@keyframes rotate-360 {
    from {
        transform: rotate(0deg);
        /* transform-origin: 43% 52%; */
    }

    to {
        transform: rotate(359deg);
        /* transform-origin: 43% 52%; */
    }
}
@keyframes rotate-360-counter-cc {
    from {
        transform: rotate(359deg);
        /* transform-origin: 43% 52%; */
    }

    to {
        transform: rotate(0deg);
        /* transform-origin: 43% 52%; */
    }
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    margin-bottom: 10px;
}

.container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}


.snail {
    max-width: 200px;
    transition-duration: 0.8s;
    transform: scale(1);
}

.snail:hover {
    transition-duration: 0.8s;
    transform: scale(1.2);
}

.no-color-link:hover {
    background: none;
}

.btn:hover {
    font-style: normal;
    background: none;
    border: none;
}

details summary::marker {
    content: "";
    /* or any other icon */
}

details[open] summary::before {
    content: "";
    /* or any other icon */
}

details summary::after {
    content: " [more]";
    color: red;
}

details summary:hover::after {
    font-style: italic;
}

details[open] summary::after {
    content: "";
    /* or any other icon */
}