body {
	background-color: hsl(0, 0%, 16%)
}
#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 8px;
    height: 95vh;
    position: relative;
}
#innercontainer {
	position: fixed;
	padding: 45px 0;
    width: 100%;
	height: 60%;
	top: 0;
}
p {
    font-family: 'Roboto', sans-serif;
    font-size: 10vw;
    letter-spacing: 12pt;
    margin: 12px;
	position: relative;
	top: 35%;
}
#phone {
	margin: 0 auto;
	width: 100%;
	height: 100%;
    animation: phoneFadeIn 1500ms 1 ease-out both;
    animation-delay: 1000ms;
}
@keyframes phoneFadeIn {
    0% {
        transform: translateY(-20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}
.warningfade {
    animation: warningFadeIn 1000ms cubic-bezier(.28,1.61,.38,1) 3000ms 1 both,
    fadeInOut 1000ms ease-in 5500ms infinite normal;
}
@keyframes warningFadeIn {
    from {
        transform: matrix(0.001, 0, 0, 0.001, 4, 3.75);
    }
    to {
        transform: matrix(0.25, 0, 0, 0.25, 3.15, 2.5);
    }
}
@keyframes fadeInOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}
.textfadein {
    animation: textFadeIn 2000ms 1 ease-out both;
    animation-delay: 5500ms;
}
@keyframes textFadeIn {
    0% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}