/* =====================
   BACKGROUND
===================== */



body {

    margin:0;
    padding:40px;

    text-align:center;

    font-family:Arial, Helvetica, sans-serif;

    background:linear-gradient(
        120deg,
        #ffffff,
        #eaf4ff,
        #ffffff,
        #dfefff
    );

    background-size:400% 400%;

    animation:
    backgroundMove 15s ease infinite,
    fadeIn 1s ease;

}


@keyframes backgroundMove {

    0% {
        background-position:0% 50%;
    }

    50% {
        background-position:100% 50%;
    }

    100% {
        background-position:0% 50%;
    }

}



@keyframes fadeIn {

    from {
        opacity:0;
    }

    to {
        opacity:1;
    }

}



/* =====================
   LOGO
===================== */

.logo {
    width: 150px;
    animation: float 5s ease-in-out infinite;
}

@keyframes float {
    50% {
        transform: translateY(-12px);
    }
}



/* =====================
   TITLE
===================== */


.title {

    font-size:52px;

    margin-bottom:10px;

}/* =====================
   DIVIDER
===================== */


.divider {

    width:220px;

    height:4px;

    background:black;

    margin:20px auto;

    border-radius:50px;

}



/* =====================
   TEXT ANIMATION
===================== */


.title,
.subtitle,
.divider,
.datetime,
.quote,
.menu button,
.version {

    opacity:0;

    animation:textAppear 1s ease forwards;

}



.title {

    animation-delay:.2s;

}


.divider {

    animation-delay:.4s;

}


.subtitle {

    animation-delay:.6s;

}


.datetime {

    animation-delay:.8s;

}


.quote {

    animation-delay:1s;

}



.menu button:nth-child(1){

    animation-delay:1.2s;

}



.menu button:nth-child(2){

    animation-delay:1.4s;

}



.menu button:nth-child(3){

    animation-delay:1.6s;

}



@keyframes textAppear {

    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}



/* =====================
   DATE/TIME
===================== */


#date {

    font-size:22px;

    font-weight:bold;

}



#time {

    font-size:35px;

}



/* =====================
   QUOTE
===================== */


.quote {

    font-size:20px;

    font-style:italic;

    color:#555;

    margin:30px;

}



/* =====================
   BUTTONS
===================== */


.menu {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:25px;

}



/* ORIGINAL SIGN IN BUTTON */


.menu a button {

    width:250px;

    padding:15px 25px;

    font-size:18px;

    background:white;

    border:2px solid black;

    border-radius:30px;

    cursor:pointer;

}



/* OTHER BUTTONS | IDK WHY THEY ARE SEPARATE T_T */


.menu button {

    width:250px;

    height:55px;

    border-radius:30px;

    background:white;

    border:2px solid black;

    font-size:18px;

    cursor:pointer;

    transition:.2s;

}



.menu button:hover {

    transform:scale(1.08);

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

}



/* =====================
   VERSION
===================== */


.version {

    position:fixed;

    bottom:15px;

    right:20px;

    color:#777;

}