@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');

@keyframes pulse {
    0% {
        background-color: pink;
    }
    50% {
        background-color: #81b4ca;
    }
    100% {
        background-color: pink;
    }
}

body {
    position: relative;
}

body:not(.bg-pink) {
    animation: pulse 10s infinite;
}

* {
    font-family: 'Yeseva One', cursive;
    user-select: none;
    color: white;
}

h2 {
    font-size: 50px;
}

h1 {
    font-size: 50px;
    margin-bottom: 50px;
}

a {
    font-size: 70px;
    color: white;
	text-decoration: underline;

}
a:hover{
    color: white;
}
main {
    height: 100%;
    height: 100vh;
    overflow-y: hidden;
}

.btn-primary {
    background-color: #81b4ca !important;

}

.btn-pink {
    background-color: pink !important;
}

.bg-pink {
    background-color: pink !important;
}

.btn-jake {
    position: absolute;
    z-index: 1000;
    top: -220px;
    width: 100px;
    height: 100px;
    border-radius: 50% !important;
}

#gender_reveal {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (device-width: 414px)
and (device-height: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
and (-webkit-device-pixel-ratio: 3) {
    #right_outer {
        right: 20%;
    }

    #right_inner {
        right: 3%;
    }

    #left_inner {
        right: 1%;
    }
}