@font-face {
    font-family: "FlowersKingdom";
    src: url('https://marianabeldi.github.io/N25/fonts/FlowersKingdom.woff') format('woff'),
  url('https://marianabeldi.github.io/N25/fonts/FlowersKingdom.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
    --bg-color: #1c201c;
    --blue: #3171a0;
    --cream: #fbe7d9;
    --green: #388f41;
    --orange: #e69a3b;
    --pink: #e76c96;
    --red: #d9514a;
    --violet: #76417c;
    --yellow: #f5bc41;
}
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    accent-color: var(--pink);
    background-color: var(--bg-color);
    cursor: url("https://marianabeldi.github.io/N25/assets/cursor.png"), auto;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    margin: 0 auto;
    scroll-behavior: smooth;
}
h1, h2, h3 {
    font-family: FlowersKingdom, "Flowers Kingdom", sans-serif;
}
.btn {
    background-color: var(--yellow);
    border: 2px solid var(--bg-color);
    border-radius: 1rem;
    color: var(--bg-color);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 2rem 2rem 1rem;
    text-transform: uppercase;
    text-decoration: none;
}
#arcoiris, #piso, #hongo1, #hongo2, #tulipanes, #flores, #dir, #btn, #arco {
    opacity: 0;
    animation: maskAnim 2s ease-in forwards;
}
@keyframes maskAnim {
  0%, 1% { opacity: 1; clip-path: circle(0%);}
  100% { clip-path: circle(100%); opacity: 1; }
}

/* Link hover effects */
a {
    transition: all 0.3s ease;
}

.btn-entradas:hover #btn rect {
    fill: #f5d76e;
    transition: all 0.3s ease;
}

.btn-entradas:hover #btn text {
    fill: #000;
    transition: all 0.3s ease;
}

.text-line:hover rect {
    fill: #4a8fc4 !important;
    transition: all 0.3s ease;
}

.text-line:hover text {
    fill: #fff !important;
    transition: all 0.3s ease;
}