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

:root{
    font-size: 62.5%;
}

body{
    background: linear-gradient(45deg, #190361 0%, #BB00FF 100%);
    font-size: 1.6rem;
    
    display: grid;
    place-items: center;
    height: 100vh;

    animation: gradient 10s ease infinite;
    background-size: 200% 200%;
}

.hide{
    display: none;
}

main{
    padding: 4.8rem 6.4rem 6.4rem;
    width: 42.8rem;
    margin: 0 90%;
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.8);
    border-radius: 5px;
}

main div{
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
    align-items: center;
    text-align: center;
    color: #34355B;
}

h1, h2{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 24px;
    line-height: 29px;
}

h1, p{
    color: #34355B;
}

p , button{
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 20px;
}

img{
    margin: 4.3rem 0;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* screenOne */
.screenOne img{
    animation: shake 10s infinite;
    cursor: pointer;
    transition: .3s;
}

.screenOne img:hover{
    cursor: pointer;
    /* transform: scale(1.1); */
    animation: shake 300ms infinite backwards;
}

@keyframes shake{
    0%{
        transform:rotate(0);
    }
    25%{
        transform: translate(.5rem); 
    }
    50%{
        transform: rotate(2deg);
    }
    75%{
        transform: translateY(-.5rem); 
    }
    100%{
        transform:rotate(0);
        transform: translate(0);
    }
}


/* screenTwo */
.message{
    padding: 1rem;

    font-family: 'Dancing Script', cursive;
    font-size: 24px;
    line-height: 29px;
    color: black;

    background: #E4EDF1;
    box-shadow: 2px 2px 2px rgba(85, 85, 85, 0.5);

    animation: surprise 2s;
}


#btnReset{
    padding: 1.6rem;
    border: none;
    border-radius: 4px;

    color: white;
    background: #FF9500;
    transition: .3s;
}

#btnReset:hover{
    background: #da7f00;
    cursor: pointer;
}

@keyframes surprise{
    0%{
        transform: translateY(15rem) scale(0);
    }
    
    100%{
        transform: translateY(0);
    }
}

@media (max-width:48em){
    main{
        padding: 6.4rem 1rem;
        width: 90%;
    }

    main img{
        width: 20rem;
    }
}