@keyframes growIn {
	0% {opacity: 0; font-size: 1em;}
	40% {font-size: 2.8em;}
}

main {
    align-items: center;
    justify-content:center;
    overflow: hidden;
}

#video {
    max-width: 90%; /* to fit on mobile */
    max-height: 90%; /* to fit inside main */
	box-shadow: 0px 0px 100px 0 black;
    animation: growIn 0.4s;
}

#video-btn {
    padding: 70px 40px;
    margin:30px;
    max-width:30vw;
    max-height:30vh;
    background: var(--background-tile-gradient);

    text-align:center;

    font-size: 2.5em;
    cursor: pointer;
    color: #eeeeee;
    border: 5px solid var(--accent);
    border-radius: 25px;

    animation: growIn 1.0s;
    transition-duration: 0.5s;
}

#video-btn:hover {
	box-shadow: 0px 0px 60px 0px rgba(255, 0, 0, 0.3);
	border-radius:0px;
	background: #50222d;
    font-size: 2.8em;
}

#video-btn:active {
	transition-duration: 0.05s;
	box-shadow: 0px 0px 80px 0px rgba(255, 0, 0, 0.7);
	font-size: 5.2vw;
	border-radius: 10px;
}


/*------------------------------------*/

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {
    #video-btn {
        font-size: 1.3em;
        max-width:85vw;
    }
    #video-btn:hover {
        font-size: 1.5em;
    }
    @keyframes growIn {
        0% {opacity: 0; font-size: 0em;}
        40% {font-size: 1.5em;}
    }
}