/*  STYLESHEET FOR: GOTOP BUTTON

Index:
+ VARIABLES
+ GOTOP BUTTON
  - Container specifiations
  - Button shape specifiations
  - Button icon specifiations
  - Button animation
  - Size animation
*/

/* ######################## VARIABLES ######################## */
:root{
    --base-color1: #cdd751; /*#e17743*/ /*#cdd751*/
    --base-color2: #929497;
    --base-color3: #1e56a2;
    --dark-text: #222222;
    --light-text: #f5f5f5;
    --light-bg: #eeeeee;
    --dark-bg: #0a1b2c;

    --font-base: 'Libre Franklin', sans-serif;
}

/* ######################## GOTOP BUTTON ######################## */
/* Container specifiations */
.float-button-container{
    position: fixed;
    bottom: 0.5rem;
    left: 3rem;
    width: 3rem;
    height: 3rem;
    z-index: -1;
}

/* Button shape specifiations */
.button {
    width: 0rem;
    height: 0rem;
    margin-top: 0.5rem;
    background-color: var(--base-color2);
    border-radius: 20%;
    cursor: pointer;
    transition: 0.2s; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* Button icon specifiations */
.button img{
    width: 80%;
    margin: 50% 50% 50% 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s;
}

/* Button animation */
.show{
    z-index: 10;
}

.show .button{
    animation: popup 0.3s ease-in-out;
    width: 3rem;
    height: 3rem;
    z-index: 11;
}

.show img{
    transform: translate(-50%, -50%) scale(1);
}

/* Size animation */
@keyframes popup {
    0%{
        width: 0rem;
        height: 0rem;
    }
    50%{
        width: 2rem;
        height: 2rem;
    }
    100%{
        width: 3rem;
        height: 3rem;
    }
}