* {
color: var(--fontColor);
font-family: serif;
font-weight: bold;
line-height: 25px;
}

p{
    font-size: x-large;
}

.home {
    text-align: center;
    padding: 1rem;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.phoneNumber{
    font-size: xx-large;
    margin: 30px;
    text-decoration: none;
}

h1, h2{
position: relative;
left: -10px;
font-size: xx-large;
}

section{
border-bottom: 2px solid black;
}

.background{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url("./assets/RichardoMilos.gif");
background-repeat: repeat;
width: 100vw;
height: 100vh;
opacity: 1%;
animation: RicardoMilosJumpscare 2s ease-out;
}

@keyframes RicardoMilosJumpscare {
0% {
    opacity: 0;
}
50%{
    opacity: 1;
}
100% {
    opacity: 0;
}
}

@keyframes slideInFromLeft {
0% {
    transform: translateX(-100%);
    opacity: 0;
}

50% {
    opacity: 0;
}

100% {
    transform: translateX(0);
    opacity: 1;
}
}

@keyframes slideInFromRight {
0% {
    transform: translateX(100%);
    opacity: 0;
}

50% {
    opacity: 0;
}

100% {
    transform: translateX(0);
    opacity: 1;
}
}

/* Staggered effect: Apply delay using nth-child */
section:nth-child(1) {
animation: slideInFromLeft 1s ease-out;
animation-delay: 0s;  /* First section has no delay */
}

section:nth-child(2) {
animation: slideInFromRight 1s ease-out;

animation-delay: 0.2s;  /* Second section delays for 0.2s */
}

section:nth-child(3) {
animation: slideInFromLeft 1s ease-out;

animation-delay: 0.4s;  /* Third section delays for 0.4s */
}

section:nth-child(4) {
animation: slideInFromRight 1s ease-out;

animation-delay: 0.6s;  /* Fourth section delays for 0.6s */
}

section:nth-child(5) {
animation: slideInFromLeft 1s ease-out;

animation-delay: 0.8s;  /* Fourth section delays for 0.6s */
}