:root{
    --page1-bg-color: steelblue;
    --page2-bg-color: orange;
    --page3-bg-color: seagreen;
    --page4-bg-color: grey;
}

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

body{
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}


.page{
    height: 100vh;
    display: flex;
    flex-direction: column;
    color: white;
    align-items: center;
    text-align: center;
    justify-content: center;
    
}

#page-1 {
    background-color: var(--page1-bg-color);
}

#page-2 {
    background-color: var(--page2-bg-color);
}

#page-3{
    background-color: var(--page3-bg-color);
}

#page-4{
    background-color: var(--page4-bg-color);
}

.page > h2{
    font-size: 2.5rem;
    margin: 0rem 0.8rem 0.5rem 0.8rem;
}

.page > p{
    font-size: 1rem;
    margin: 0rem 0.8rem;
}

.buttons{
    display: flex;
}

.btn{
    text-decoration: none;
    padding: 0.8rem 1rem;
    margin: 0.8rem 0.3rem;
}

.primary-btn{
    background-color: white;
    color: #333;
    transition-property: all;
    transition-duration: 1s;
}

.primary-btn:hover{
    background-color: #333;
    color: white;
}

.secondary-btn{
    background-color: #333;
    color: white;
    transition-property: all;
    transition-duration: 1s;
}

.secondary-btn:hover{
    background-color: white;
    color: #333;
}

#page-1 > h2{
    transform: translateY(-1200px);
    animation-name: slide-down;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@keyframes slide-down{
    to{
        transform: translateY(0px);
    }
}

#page-1 > p{
    transform: translateX(-1200px);
    animation-name: slide-right;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@keyframes slide-right{
    to{
        transform: translateX(0px);
    }
}