:root{
    --primary-color: #001119;
    --secondary-color: #f9f9f9;
    --ascent-color: #00fffc;
}

@font-face {
    font-family: "Ubuntu";
    src: url('Ubuntu-Regular.woff2') format('woff2');
}

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    scroll-behavior: smooth;
    margin: 0;
    background-color: var(--primary-color);
    font-family: "Ubuntu";
}

.container{
    max-width: 1250px;
    margin: 1rem auto;
    padding: 0 2.5rem;
}

@media (width < 720px){
    .container{
        padding: 0 1rem 0 2.5rem;
        margin: 0 auto;
    }
}

.button-wrapper{
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin: 1.5rem 0;
    gap: 2rem;
}

@media (width < 720px){
    .button-wrapper{
        flex-direction: column;
    }
}

.input{
    padding: 1rem;
    border: 0;
    border-radius: 5px;
    width: 100%;
}

.error{
    transition: background-color 0.5s ease;
    background-color: #cb3b3b; 
    color: #ffffff;
    animation: shake ease-out .5s 10 ;
}

@keyframes shake {
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(3px);
    }
    50%{
        transform: translateX(-3px);
    }
    75%{
        transform: translateX(3px);
    }
    100%{
        transform: translateX(0);
    }
}

.error::placeholder{
    color: #000000;
}

.input:focus{
    outline: 5px solid var(--ascent-color);
    outline-offset: -5px;
}