* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    font-size: 62.5%;
    /*usar rem *10 */
}

body {
    /* background: linear-gradient(45deg, #190361 0%, #BB00FF 100%); */
    background: linear-gradient(45deg, #190361, #bb00ff);
    background-size: 200% 200%;
	animation: gradient 10s ease infinite;

    display: grid;
    place-items: center;
    height: 100vh;
}

main {
    background: #FFFFFF;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.8);
    border-radius: 5px;
}

h1,
h2 {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 2.4rem;
    color: #34355B;
    text-align: center;
}

/* screen 1 */
.screen1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4.8rem 6.4rem 6.4rem;
}

h1 {
    width: 26rem;
    margin-bottom: 1.4rem;
}

.screen1 p {
    font-family: 'DM Sans';
    font-size: 1.5rem;
    color: #34355B;

    margin-bottom: 2rem;
}

.screen1 img:hover {
    cursor: pointer;
    animation: shakeImg 0.13s;
    animation-iteration-count: infinite;
}

/* screen 2 */
.screen2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4.8rem 6.4rem;
    gap: 1.7rem;
}

h2 {
    width: 30rem;
}

.msgRandom {
    font-family: 'Dancing Script';
    font-size: 2.4rem;
    line-height: 2.9rem;
    text-align: center;
    background: #E4EDF1;
    box-shadow: 2px 2px 2px rgba(85, 85, 85, 0.5);
    width: 29rem;
    padding: 1rem;

    animation: downTop 2.5s;
}

.container2 {
    padding: 4.3rem 0;
}

button {
    background: #FF9500;
    font-family: 'DM Sans';
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    color: #FFFFFF;


    width: 18rem;
    padding: 1.6rem;
    border: none;
    border-radius: 4px;
}

button:hover {
    opacity: 0.9;
    cursor: pointer;
}

.hide {
    display: none;
}

@keyframes shakeImg {
    0% {
        transform: translateY(3px);
    }

    50% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(-3px);
        transform: translateY(-3px);
    }
}

@keyframes downTop {
    0% {
        transform: translateY(12rem);
    }

    100% {
        transform: translateY(0);
    }
}