* {
    margin: auto;
    padding: 0;
}

body {
    min-height: 100vh;
    background-color: #f5f5f4;
    font-family: "Aleo", serif;
    font-size: 1rem;
}

img {
    max-width: 100%;
    display: block;
}

.profile {
    border-radius: 100%;
    border: black solid 3px;

    animation: 3s ease-in-out infinite paused spin;
}

.profile:hover {
    animation-play-state: running;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        aspect-ratio: 1;
        clip-path: polygon(50% 0%, 79% 90%, 2% 35%, 98% 35%, 21% 91%);
    }
}

.container {
    max-width: 60rem;
    padding: 0 2rem;
}

.flex {
    display: flex;
    gap: 1rem;
}

li {
    list-style: none;
}

a {
    color: #f5f5f4;
    text-decoration: none;
}

a:hover {
    background-color: #f9a8d4;
    padding: .5rem;
    border-radius: .5rem;
}

h1 {
    font-size: 2.8rem;
    font-family: "Mogra", system-ui;
}

h2 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

header,
footer {
    background-color: #f472b6;
    color: #f5f5f4;
    padding: 2rem;
}

main {
    margin: 3rem 0;
}

header .flex {
    justify-content: space-between;
    align-items: center;
}

section {
    background-color: #F3F2F2;
    padding: 2rem;
    border-radius: 10px;

    position: relative;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.hello::after,
.hello::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(from var(--angle), transparent 70%, #FF0080);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: .5rem;
    border-radius: 10px;
    animation: 3s linear infinite border-glow;
}

.hello::before {
    filter: blur(1.5rem);
    opacity: 0.5;
}

@keyframes border-glow {
    0% {
        --angle: 0deg;
    }

    100% {
        --angle: 360deg;
    }
}

.featured {
    margin: 10rem 0;
}
/* Carousel */
.carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 1rem 0;

    position:relative;
    scroll-marker-group: after;
}


/* Carousel Buttons */
.carousel::scroll-button(left) {
    content: "◀" / "Scroll left";
}

.carousel::scroll-button(right) {
    content: "▶" / "Scroll right";
}

.carousel::scroll-button(*) {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-content: center;
    border: none;
    border-radius: 100%;
    background-color: #f472b6;
    cursor: pointer;
}

.carousel::scroll-button(left) {
    inset-inline-start: .25rem;
}

.carousel::scroll-button(right) {
    inset-inline-end: .25rem;
}

.carousel::scroll-button(*):hover {
    background-color: #f9a8d4;
}

.carousel .slide {
    scroll-snap-stop: always;
    scroll-snap-align: center;
}
/* Carousel Markers */
.carousel .slide::scroll-marker{
    content: "";
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 100%;
    margin: 0 .3rem;
    background-color: #f9a8d4;
}

.carousel .slide::scroll-marker:target-current{
    background-color: #FF0080;
}

.carousel::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;

}

/* Warning */
.warning {
    background-color: #f7da57;
    padding: 1.5rem;
    max-width: 500px;
    border-radius: 8px;
    z-index: 100;
}


/* checks to see if the browser used supports scroll-marker-group */
@supports (scroll-marker-group: after) {
    .warning {
        display:none;
    }
}