/****** RESPONSIVE ******/

/* Big Screens */

@media only screen and (min-width: 1441px) {
    *{
        font-size: 24px;
    }

    #ephemeral #circle-text textPath {
        font-size: 2.24px;
    }
}

/* Small Dektop / Big Tablet */

@media only screen and (max-width: 1024px) {
    * {
        font-size: 12px;
    }

    #reference-container.reference-container--big {
        width: 60%;
    }

    #reference-button.move-reference-button {
        transform: translateX(-60vw);
    }

    /** EPHEMERAL **/
    .circle-1 {
        transform: translate(-50%, 65%);
    }
    
    .circle-2 {
        transform: translate(-50%, 69%);
    }
    
    .circle-3 {
        transform: translate(-50%, 73%);
    }
    
    .circle-4 {
        transform: translate(-50%, 77%);
    }

    .circle-cover-left, .circle-cover-right {
        width: 20%;
    }

}

/* Tablet */

@media only screen and (max-width: 768px) {
    * {
        font-size: 10px;
    }

    nav h2 a {
        text-decoration: underline;
    }

    #reference-button,
    #reference-button span,
    #reference-button-container button {
        font-size: 1.5rem;
    }

    #reference-content p,
    #reference-content a {
        font-size: 1.75rem;
    }

    /*** DARLING ***/

    #darling p {
        font-size: 1.25rem;
    }

    /*** IL PLEUT ***/
    #il-pleut header {
        top: 5%;
    }
    
    #il-pleut h1 {
        font-size: 3.25rem;
    }
    #il-pleut h1 {
        font-size: 3.25rem;
    }

    .raindrop {
        font-size: 3rem;
    }

    .verse {
        font-size: 1.5rem;
        width: auto;
    }

    /** EPHEMERAL **/
    .circle {
        width: 300%;
    }

    .circle-1 {
        transform: translate(-50%, 65%);
    }
    
    .circle-2 {
        transform: translate(-50%, 69%);
    }
    
    .circle-3 {
        transform: translate(-50%, 73%);
    }
    
    .circle-4 {
        transform: translate(-50%, 77%);
    }

    .circle-cover-left, .circle-cover-right {
        width: 15%;
    }

    /*** FISH ***/
    gills-div gill-p {
        transform: rotate(90deg) translateY(-400%);
    }

}

/* Smartphone */

@media only screen and (max-width: 480px) {

    #reference-container.reference-container--big {
        width: 100%;
    }

    #reference-button.move-reference-button {
        transform: translateX(calc((-100vw) + 20px + 100%));
    }

    #reference-button,
    #reference-button span,
    #reference-button-container button {
        font-size: 2rem;
    }

    #reference-content p,
    #reference-content a {
        font-size: 2rem;
    }

    /*** DARLING ***/

    #darling p {
        font-size: 0.5rem;
    }


    /** EPHEMERAL **/
    .circle {
        width: 450%;
    }

    .circle-1 {
        transform: translate(-50%, 60%);
    }
    
    .circle-2 {
        transform: translate(-50%, 64%);
    }
    
    .circle-3 {
        transform: translate(-50%, 68%);
    }
    
    .circle-4 {
        transform: translate(-50%, 72%);
    }

    .circle-cover-left, .circle-cover-right {
        width: 0%;
    }

    /*** FISH ***/
    cale-p, gill-p, eye-p, finleft-p, finright-p, tail-p {
        font-size: 3rem;
    }
}