:root {
    --fish-main-colour: #F0592A;
    --fish-shade-colour: #CE4728;
    --container-color: #FDEBE6;
}

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    background-color: #DFEAF9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-toggler {
    opacity: 0;
    position: fixed;
}

.tf-container {
    position: relative;
    height: 485px;
    width: 485px;
    border-radius: 50% 50%;
    background-color: transparent;
    box-shadow: 0 0 40px 54px var(--container-color),
                inset 0 0 0 10px #FFF;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition: box-shadow 300ms;
}

.tf-container:after {
    content: '';
    position: absolute;
    height: 485px;
    width: 485px;
    border-radius: 50% 50%;
    background-color: transparent;
    cursor: pointer;
}

.tf-fish-back {
    position: absolute;
    z-index: -1;
    animation: fish_float 10s ease-out;
    animation-iteration-count: infinite;
}

.tf-fish-front {
    position: absolute;
    animation: fish_float 10s ease-out;
    animation-iteration-count: infinite;
}

.tf-tail-fin-container {
    position: absolute;
    height: 110px;
    width: 40px;
    transform-origin: right;
    animation: tail_fin_paddle 2s ease-out;
    animation-iteration-count: infinite;
}

.tf-tail-fin-container--top {
    top: 156px;
    left: 6px;
}

.tf-tail-fin-container--bottom {
    top: 275px;
}

.tf-tail-fin {
    position: absolute;
    height: 110px;
    width: 40px;
    background-color: var(--fish-main-colour);
    border: solid 3px black;
    border-radius: 0 50% 0 50%;
    box-shadow: inset 5px -11px 14px 3px var(--fish-shade-colour);
    transform: rotate(-5deg) skewX(-15deg) skewY(5deg);
    transition: all 300ms;
}

.tf-tail-fin--top {
}

.tf-tail-fin--bottom {
    height: 60px;
    width: 40px;
    border-radius: 50% 0 50% 0;
}

.tf-body-container {
    position: absolute;
    left: 98px;
    top: 90px;
    transition: all 300ms;

    animation: fish_breathe 10s ease-out;
    animation-iteration-count: infinite;
}

.tf-body {
    position: absolute;
    height: 360px;
    width: 360px;
    background-color: var(--fish-main-colour);
    border: solid 3px black;
    border-radius: 100px 300px 300px 300px / 50px 280px 280px 280px;
    box-shadow: inset 20px -20px 56px 20px var(--fish-shade-colour);
    transform: rotate(-0.125turn);
    transition: all 300ms;
}

.tf-scales-container {
    position: absolute;
    left: 160px;
    top: 140px;
    transition: all 300ms;

    animation: fish_breathe 10s ease-out;
    animation-iteration-count: infinite;
}

.tf-scales {
    position: absolute;
    height: 40px;
    width: 25px;
    border-radius: 20px 2px 2px 20px;
    transition: all 300ms;
}

.tf-scales-1 {
    left: 0;
    top: 40px;
}

.tf-scales-2 {
    left: 20px;
    top: 20px;
}

.tf-scales-3 {
    left: 40px;
    top: 0;
}

.tf-scales-4 {
    left: 60px;
    top: 20px;
}

.tf-scales-5 {
    left: 80px;
    top: 0;
}

.tf-scales-6 {
    left: 100px;
    top: 20px;
}

.tf-scales-7 {
    left: 120px;
    top: 40px;
}

.tf-scales-small {
    box-shadow: 0 44px  0 4px var(--fish-shade-colour), -3px  44px 0 4px black,
                0 90px  0 4px var(--fish-shade-colour), -3px  90px 0 4px black;
    transition: all 300ms;
}

.tf-scales-medium {
    box-shadow: 0 44px  0 4px var(--fish-main-colour), -3px  44px 0 4px black,
                0 90px  0 4px var(--fish-main-colour), -3px  90px 0 4px black,
                0 136px 0 4px var(--fish-main-colour), -3px 136px 0 4px black;
    transition: all 300ms;
}

.tf-scales-large {
    box-shadow: 0 44px  0 4px var(--fish-main-colour), -3px  44px 0 4px black,
                0 90px  0 4px var(--fish-shade-colour), -3px  90px 0 4px black,
                0 136px 0 4px var(--fish-shade-colour), -3px 136px 0 4px black,
                0 182px 0 4px var(--fish-main-colour), -3px 182px 0 4px black;
    transition: all 300ms;
}

.tf-eyebrow {
    position: absolute;
    height: 16px;
    background-color: black;
    border-radius: 50% 50% 0 0;
    transition: all 300ms;
}

.tf-eyebrow--left {
    left: 348px;
    top: 178px;
    width: 60px;
    transform: rotate(-7deg);
}

.tf-eyebrow--right {
    left: 426px;
    top: 175px;
    width: 56px;
    transform: rotate(5deg);
}

.tf-eye {
    position: absolute;
    top: 200px;
    height: 80px;
    width: 60px;
    background-color: #FFF;
    border: solid 3px black;
    border-radius: 50% 50% 50% 50% / 50% 50% 36% 50%;
    box-shadow: inset 0 6px 14px 3px #A8DCE2;
    transition: all 30ms;
}

.tf-eye::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 17px;
    height: 10px;
    width: 10px;
    background-color: #000;
    border-radius: 50% 50%;
    transition: all 30ms;
}

.tf-eye::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    height: 80px;
    width: 60px;
    background-color: var(--fish-main-colour);
    border: solid 3px black;
    border-radius: 50% 50% 50% 50% / 50% 50% 36% 50%;
    box-shadow: inset 5px -11px 14px 3px var(--fish-shade-colour);
    transition: opacity 30ms;
}

.tf-eye.tf-eye--right::after {
    height: 75px;
    width: 55px;
}

.tf-eye--right {
    left: 420px;
    top: 195px;
    height: 75px;
    width: 55px;
}

.tf-eye--left {
    left: 350px;
}

.tf-lip {
    position: absolute;
    left: 350px;
    height: 50px;
    width: 135px;
    background-color: var(--fish-main-colour);
    border: solid 3px black;
    border-radius: 0 45% 45% 50%;
    box-shadow: inset 5px -11px 14px 3px var(--fish-shade-colour);
    transform: skewX(10deg) rotate(-10deg);
    transition: all 300ms;
}

.tf-lip--top {
    top: 300px;
}

.tf-lip--bottom {
    top: 320px;
    left: 355px;
    width: 100px;
    transform: skewX(10deg) rotate(0deg);
}

.tf-mouth {
    position: absolute;
    top: 327px;
    left: 360px;
    height: 40px;
    width: 70px;
    background-color: #000;
    border: solid 3px black;
    border-radius: 50% 50%;
    transition: all 300ms;
}

.tf-teeth {
    position: absolute;
    top: 327px;
    left: 370px;
    height: 30px;
    width: 80px;
    background-color: #FFF;
    border: solid 3px black;
    transition: all 300ms;
}

.tf-glint-cross {
    opacity: 0;
    position: absolute;
    top: 340px;
    left: 445px;
    height: 30px;
    width: 2px;
    background-color: #FFF;
}

.tf-glint-cross::after {
    content: '';
    position: absolute;
    left: -15px;
    top: 15px;
    height: 2px;
    width: 30px;
    background-color: #FFF;
}

.tf-glint-cross--rotated {
    transform: rotate(45deg);
}

.tf-side-fin-container {
    position: absolute;
    top: 400px;
    height: 110px;
    width: 40px;
    transform-origin: top right;
    animation: side_fin_paddle 10s ease-out;
    animation-iteration-count: infinite;
}

.tf-side-fin-container--left {
    left: 170px;
}

.tf-side-fin-container--right {
    left: 300px;
}

.tf-side-fin {
    position: absolute;
    height: 110px;
    width: 40px;
    background-color: var(--fish-main-colour);
    border: solid 3px black;
    border-radius: 50% 0 50% 0;
    box-shadow: inset 12px 8px 14px 3px var(--fish-shade-colour);
    transform: rotate(-133deg) skewX(-2deg) skewY(-20deg);
    transition: all 300ms;
}

.tf-side-fin--left {
}

.tf-side-fin--right {
    height: 100px;
    width: 30px;
}

.tf-toggle-base {
    position: absolute;
    top: 80px;
    left: 200px;
    height: 60px;
    width: 160px;
    background-color: #8A8A8A;
    border: solid 3px black;
    border-radius: 50% 50%;
    box-shadow: inset 4px -7px 14px 3px #6D6E6E;
}

.tf-toggle-ball {
    position: absolute;
    top: 25px;
    left: 226px;
    height: 94px;
    width: 114px;
    background-color: #8A8A8A;
    border-radius: 134px 134px 74px 74px;
    box-shadow: inset 4px -7px 14px 3px #6D6E6E,
                inset 4px -7px 14px 3px #FFF,
                0 0 0 3px #000;
}

.tf-toggle-ball::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 24px;
    height: 24px;
    width: 66px;
    background-color: #000;
    border-radius: 10px 10px;
}

.tf-toggle-shaft {
    position: absolute;
    top: -6px;
    left: 270px;
    height: 50px;
    width: 20px;
    background-color: #8A8A8A;
    border: solid 3px black;
    border-radius: 0 0 50% 50% / 0 0 10% 10%;
    box-shadow: inset 4px -7px 14px 3px #6D6E6E;
    transform-origin: 10px 110px;
    transform: rotate(-20deg);
    transition: all 300ms;
}

.tf-toggle-tip {
    position: absolute;
    top: -16px;
    left: 260px;
    height: 30px;
    width: 40px;
    background-color: #8A8A8A;
    border: solid 3px black;
    border-radius: 50% 50%;
    box-shadow: inset 4px -7px 14px 3px #6D6E6E,
                inset 4px -7px 14px 3px #FFF;
    transform-origin: 20px 120px;
    transform: rotate(-20deg);
    transition: all 300ms;
}

.tf-bubble {
    opacity: 0;
    position: absolute;
    top: 320px;
    height: 15px;
    width: 15px;
    background-color: transparent;
    box-shadow: inset -3px 3px 6px 0 #3387E2;
    border-radius: 50% 50%;
    border: 1px solid #3387E2;
}

.tf-bubble--1 {
    left: 500px;
    animation: bubble_up 10s ease-out;
    animation-iteration-count: infinite;
}

.tf-bubble--2 {
    left: 520px;
    animation: bubble_up 10s ease-out;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

.tf-bubble--3 {
    left: 510px;
    height: 20px;
    width: 20px;
    animation: bubble_up 10s ease-out;
    animation-delay: 3s;
    animation-iteration-count: infinite;
}

.tf-sleep-z--1 {
    animation: sleep_z_up 9s linear;
    animation-iteration-count: infinite;
    animation-delay: 0s;
}

.tf-sleep-z--2 {
    animation: sleep_z_up 9s linear;
    animation-iteration-count: infinite;
    animation-delay: 3s;
}

.tf-sleep-z--3 {
    animation: sleep_z_up 9s linear;
    animation-iteration-count: infinite;
    animation-delay: 6s;
}

.tf-sleep-z {
    opacity: 0;
    position: absolute;
    left: 400px;
    top: 120px;
    height: 15px;
    width: 45px;
    background-color: #000;
}

.tf-sleep-z::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -5px;
    height: 15px;
    width: 45px;
    background: #000;
    transform-origin: right;
    transform: rotate(-40deg);
}

.tf-sleep-z::after {
    content: '';
    position: absolute;
    top: 34px;
    height: 15px;
    width: 45px;
    background: #000;
}

.tf-toggler:checked ~ .tf-container {
    --fish-main-colour: #4FB95E;
    --fish-shade-colour: #459C4B;
    --container-color: #DFF9E3;
}

.tf-toggler:checked ~ .tf-container .tf-eyebrow {
    transform: translateY(-10px);
}

.tf-toggler:checked ~ .tf-container .tf-eye::after {
    opacity: 0;
    animation: eye_blink 10s ease-out;
    animation-iteration-count: infinite;
}

.tf-toggler:checked ~ .tf-container .tf-lip--bottom {
    transform: skewX(10deg) rotate(0deg) translate(0, 40px);
}

.tf-toggler:checked ~ .tf-container .tf-glint-cross {
    animation: glint 1s ease-out;
}

.tf-toggler:checked ~ .tf-container .tf-toggle-shaft {
    transform: rotate(20deg);
}

.tf-toggler:checked ~ .tf-container .tf-toggle-tip {
    transform: rotate(20deg);
}

.tf-toggler:checked ~ .tf-container .tf-sleep-z {
    opacity: 0;
    animation: none;
}

@keyframes fish_breathe {
    0% { transform: scale(1); }
    96% { transform: scale(1); }
    98% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

@keyframes fish_float {
    0% { transform: translate(0, -20px); }
    50% { transform: translate(0, 20px); }
    100% { transform: translate(0, -20px); }
}

@keyframes bubble_up {
    0% { opacity: 1; transform: translate(0, 0); }
    50% { opacity: 1; }
    100% { opacity: 0.1; transform: translate(20px, -306px); }
}

@keyframes sleep_z_up {
    0% { opacity: 1; transform: translate(0, 0) scale(0.1); }
    50% { opacity: 1; }
    100% { opacity: 0.1; transform: translate(-100px, -230px) scale(1); }
}

@keyframes tail_fin_paddle {
    0% { transform: translateZ(-100px) rotateY(50deg); }
    50% { transform: translateZ(-100px) rotateY(0deg); }
    100% { transform: translateZ(-100px) rotateY(50deg); }
}

@keyframes side_fin_paddle {
    0% { transform: rotate(0deg); }
    45% { transform: rotate(0deg); }
    47% { transform: rotate(10deg); }
    49% { transform: rotate(0deg); }
    50% { transform: rotate(20deg); }
    52% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

@keyframes eye_blink {
    0% { opacity: 0; }
    96% { opacity: 0; }
    97% { opacity: 1; }
    98% { opacity: 0; }
    99% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes glint {
    0% { opacity: 0; transform: scale(0.2); }
    30% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}