:root {
    --primary: #EF233C;
    --secondary1: #2B2D42;
    --secondary2: #D90429;
    --background1: #8D99AE;
    --background2: #EDF2F4;
}

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    text-align: center;
}

body {
    background-color: var(--background1);
}

#title {
    color: var(--primary);
    margin: 10px;
}

#subtitle {
    color: var(--secondary1);
    margin: 10px;
}

#footer {
    color: var(--secondary2);
    margin: 10px;
}



/* Below is all ChatGPT generated CSS for fish tank */
.bowl{
    width:460px;
    height:340px;
    position:relative;
    border-radius:0 0 220px 220px / 0 0 260px 260px;
    border:10px solid rgba(255,255,255,0.85);
    background:rgba(255,255,255,0.35);
    box-sizing:border-box;
    margin: 40px auto;
}

/* top rim */
.bowl::before{
    content:"";
    position:absolute;
    top:-34px;
    left:50%;
    transform:translateX(-50%);
    width:420px;
    height:70px;
    border-radius:50%;
    border:6px solid rgba(255,255,255,0.85);
    background:rgba(255,255,255,0.15);
}

/* inner glass highlight */
.bowl::after{
    content:"";
    position:absolute;
    inset:16px;
    border-radius:0 0 210px 210px / 0 0 240px 240px;
    border:5px solid rgba(255,255,255,0.25);
}

.water{
    position:absolute;
    left:52px;
    right:52px;
    bottom:44px;
    height:240px;
    border-radius:170px;
    background:linear-gradient(#49b0f2,#2a9bdd);
    overflow:hidden;
}

/* bubbles */
.bubble{
    position:absolute;
    bottom:0;
    width:12px;
    height:12px;
    background:white;
    border-radius:50%;
    opacity:0.7;
    animation: rise 6s linear infinite;
}

/* floating animation */
@keyframes rise{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-240px);
    }
}