/* Variables */
:root {
    --blue: #9CCFE7;
    --periwinkle: #B7CEFF;
    --aquamarine: #92A4CC;
    --purple: #977FD7;
    --pink: #F5A9CB;
    --yellow: #FFFFC2;
    --green: #D7F4D2;
    --shadow: rgb(220, 213, 213);
    --bg-blue: #D9E6F3;
    --bg-taro: #F1E0EA;
    --bg-peach: #FCE6E9;
    --bg-nude: #FBE3D7;
    --rainbow-red: #FFD1D1;
    --rainbow-yellow: #FBFFDE;
    --rainbow-green: #D7FDDF;
    --rainbow-blue: #E0FFFD;
    --rainbow-indigo: #D0D0FE;
    --rainbow-violet: #F9DDFF;
    --linear-gradient: linear-gradient(90deg, var(--blue) 0%, var(--purple) 50%, var(--pink) 100%);
    --btn-gradient: linear-gradient(90deg, var(--periwinkle) 0%, var(--aquamarine) 100%);
}

/* Scroll behavior */
html {
    scroll-behavior:smooth;
}

/* Animations */
@keyframes bg-shift {
    0% {
        background-color: var(--bg-blue);
    }

    33% {
        background-color: var(--bg-taro);
    }

    66% {
        background-color: var(--bg-peach);
    }

    100% {
        background-color: var(--bg-nude);
    }
    
}

/* Logo styling */
#title-container {
    cursor: pointer;
}

/* Menu color */
#menu {
    background: linear-gradient(180deg, var(--periwinkle) 0%, transparent 100%);
}

/* Navigation links styling */
#nav-links a {
    font-family: 'Courier New', Courier, monospace;
    transition-duration: 0.5s;
    transition-property: color, text-shadow;
}

#nav-links a:hover {
    color: white;
    text-shadow: 0 0 10px var(--yellow);
}

/* Logo styling */
#title {
    font-family: 'Londrina Solid', cursive;
    font-size: 1.5rem;
}

/* Background color animation */
body {
    animation: bg-shift 8s ease infinite alternate;
}

#wrapper {
    --p: 50px;
    --q: 50px;
    background: radial-gradient(circle at var(--p) var(--q), var(--rainbow-red) 40px, transparent 40px, transparent 60px, var(--rainbow-yellow) 60px, var(--rainbow-yellow) 80px, transparent 80px, transparent 100px, var(--rainbow-green) 105px, var(--rainbow-green) 135px, transparent 140px, transparent 170px, var(--rainbow-blue) 180px, var(--rainbow-blue) 220px, transparent 230px, transparent 270px, var(--rainbow-indigo) 285px, var(--rainbow-indigo) 335px, transparent 350px, transparent 400px, var(--rainbow-violet) 420px, var(--rainbow-violet) 480px, transparent 500px);
}

/* Animation for color-shifting text */
@keyframes background-shift {

    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
    
}

/* Animation for heading */
@keyframes bounce {
    0% { 
        transform: translateY(0);

    }

    20% {
        transform: translateY(-10px) scaleX(0.9) scaleY(1);
    }

    25% {
        transform: translateY(2px) scaleX(1);
    }

    27% {
        transform: translateY(0) scaleX(1.1) scaleY(0.9);
    }

    29% {
        transform: translateY(0) scaleX(1);
    }

    31% {
        transform: scaleX(1.1) scaleY(0.9);
    }

    33% {
        transform: scale(1);
    }

    100% {
        transform: translate(0);
    }
    
}

/* Animation for glowing effect */
@keyframes glow {
    0% {
        box-shadow: 0px 0px 10px 2px var(--yellow), inset 0px 0px 10px 1px var(--yellow);
    }

    50% {
        box-shadow: 0px 0px 10px 15px var(--yellow), inset 0px 0px 10px 5px var(--yellow);
    }

    100% {
        box-shadow: 0px 0px 10px 2px var(--yellow), inset 0px 0px 10px 1px var(--yellow);
    }
}

/* Color-changing border animation */
@keyframes slideshow-frame {
    0% {
        border: 15px solid var(--periwinkle);
    }

    25% {
        border: 15px solid var(--purple);
    }

    50% {
        border: 15px solid var(--pink);
    
    }

    75% {
        border: 15px solid var(--green);
    }

    100% {
        border: 15px solid var(--blue);
    }
}

/* Main heading styling */
h1 {
    font-family: 'Cabin Sketch', cursive;
    background: var(--linear-gradient);
    background-size: 200%;
    background-position: left;
    backgroud-clip:text;
    -webkit-background-clip: text;
    color: transparent;
    animation: background-shift 3s ease infinite alternate, bounce 3s infinite;
}

/* Text-boxes styling */
#about-us-container {
    --x:50%;
    --y:50%;
    border-radius: 35px;
    padding: 20px;
    border: 5px solid white; 
    background: radial-gradient(circle at var(--x) var(--y), white 0%, rgba(255,255,255,0.2) 80%);
    box-shadow: 0px 0px 10px 2px var(--yellow), inset 0px 0px 10px 1px var(--yellow);
    animation: glow 3s infinite;
}

#intro-text {
    --i:50%;
    --j:50%;
    border-radius: 35px;
    padding: 20px;
    border: 5px solid white;
    background: radial-gradient(circle at var(--i) var(--j), white 0%, rgba(255,255,255,0.3) 80%);
    box-shadow: 0px 0px 10px 2px var(--yellow), inset 0px 0px 10px 1px var(--yellow);
    animation: glow 3s infinite;
}

#intro-container {
    border-radius: 25px;
    border: 15px solid var(--periwinkle);
    animation: slideshow-frame 15s ease infinite alternate-reverse;
    background-position:center;
    background-repeat: no-repeat;
    background-size:cover;
    background-image: linear-gradient(90deg, var(--blue) 0%, var(--purple) 50%, var(--pink) 100%);
    transition-property: background-image;
    transition-duration: 1s;
}

/* Button styling */
.btn {
    font-family: 'VT323', monospace;
    cursor: pointer;
    width: fit-content;
    background: var(--btn-gradient);
    background-size: 300%;
    background-position: left;
    transition-duration: 0.5s;
    transition-property: background, color, box-shadow, transform;
    animation: background-shift 2s infinite alternate-reverse;
}

.btn:hover {
    background: var(--pink);
    transform: translateY(-3px);
    box-shadow: 2px 2px 5px grey;
}

.btn:active {
    background: var(--shadow);
    transform: translateY(3px);
    box-shadow: none;
    transition: none;
}

/* Adoption section styling */
#adopt-container {
    background-image: url("../images/cat-picture.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 35px;
}

#adopt-text {
    --f:50%;
    --g:50%;
    margin-right:auto;
    margin-left:auto;
    width: 80%;
    padding: 25px;
    border-radius: 25px;
    border: 5px solid white;
    animation: glow 3s infinite;
    background: radial-gradient(circle at var(--f) var(--g), white 0%, rgba(255,255,255,0.3) 40%);
    border: 5px solid white;
    animation: glow 3s infinite;
}

.pet-box{
    margin-bottom: 50px;
}

/* Random cat facts styling */
#cat-facts-container {
    text-align: center; 
    border-radius: 35px;
    --m:50%;
    --n:50%;
    background: radial-gradient(circle at var(--m) var(--n), white 0%, rgba(255,255,255,0.3) 80%);
    border: 5px solid white;
    animation: glow 3s infinite;
}

/* Container styling */
#fact-container {
    font-size: 1.2rem;
}

#donation-container {
    text-align: center;
    --c:50%;
    --d:50%;
    border-radius: 35px;
    padding: 20px;
    border: 5px solid white;
    background: radial-gradient(circle at var(--c) var(--d), white 0%, rgba(255,255,255,0.3) 500px);
    box-shadow: 0px 0px 10px 2px var(--yellow), inset 0px 0px 10px 1px var(--yellow);
    animation: glow 3s infinite;
}

#cat-facts-container img {
    margin-top: 15px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    border-radius: 25px;
    border: 15px solid var(--periwinkle);
    animation: slideshow-frame 15s ease infinite alternate-reverse; 
}

#next {
    margin: 15px auto;
}

/* form styling */
.form {
    background: linear-gradient(90deg, var(--periwinkle) 0%, var(--yellow) 100%);
    background-color: rgba(255,255,255,0.8);
}

#form-body {
    --a: 50%;
    --b: 50%;
    background: radial-gradient(circle at var(--a) var(--b), var(--yellow) 0%, var(--periwinkle) 50%);
}

.form-odd {
    background-color: transparent;
}

.form-even {
    background-color: var(--shadow);
}

/* Nonprofit list styling */
#list div {
    padding: 5px;
    margin-top:15px;
    margin-bottom: 15px;
    border: 6px solid var(--shadow);
    border-radius: 15px;
    transition-duration: 0.5s;
    transition-property: background-color,border;
}

#list div:hover {
    background-color: white;
    border: 6px solid var(--blue);
}

#list div:hover a {
    color: var(--pink);
}


#list a {
    font-family: 'Cabin Sketch', cursive;
    font-size: 1.2rem;
    color: var(--purple)
}

#cat-list div {
    padding: 5px;
    margin-top:15px;
    margin-bottom: 15px;
    border: 6px solid var(--shadow);
    border-radius: 15px; 
    background-color: rgba(255,255,255,0.3);
    transition-property: background-color;
    transition-duration: 0.5s;
}

#cat-list div:hover {
    background-color: white;
}

/* Back-to-top button styling */
#back-to-top {
    height: fit-content;
    transform: rotate(270deg);
    left: -20px;
    bottom: 100px;
}

#back-to-top:active {
    transform: rotate(270deg) translateY(3px);
}

/* Footer logo styling */
#footer-logo {
    cursor: pointer;
}