/* =====================================================
   GOOGLE FONT
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* =====================================================
   ROOT
===================================================== */

:root{

    --primary:#B71C1C;
    --primary-dark:#800000;
    --secondary:#FFF5F5;
    --gold:#F4B400;

    --white:#FFFFFF;
    --black:#222222;
    --gray:#666666;

    --shadow:0 10px 30px rgba(0,0,0,.12);

}


/* =====================================================
   RESET
===================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:'Poppins',sans-serif;

    background:#f5f5f5;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}


/* =====================================================
   CONTAINER
===================================================== */

.container{

    width:95%;

    max-width:1200px;

    background:white;

    border-radius:25px;

    padding:45px;

    box-shadow:var(--shadow);

}


/* =====================================================
   HEADER
===================================================== */

header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:50px;

}


/* =====================================================
   LOGO
===================================================== */

.logo{

    width:130px;

    height:130px;

    object-fit:contain;

}


/* =====================================================
   TITLE
===================================================== */

.title{

    flex:1;

    text-align:center;

}

.title h1{

    font-size:42px;

    color:var(--primary);

    font-weight:800;

    letter-spacing:2px;

}

.title h2{

    margin-top:12px;

    font-size:28px;

    color:var(--black);

}

.title h3{

    margin-top:8px;

    font-size:30px;

    color:var(--primary-dark);

    font-weight:700;

}

.title h4{

    margin-top:15px;

    font-size:22px;

    color:var(--gray);

}

.title h5{

    margin-top:8px;

    font-size:22px;

    color:var(--gold);

}


/* =====================================================
   MENU
===================================================== */

main{

    display:flex;

    flex-direction:column;

    gap:25px;

    width:420px;

    margin:auto;

}


/* =====================================================
   BUTTON
===================================================== */

main button{

    border:none;

    padding:20px;

    font-size:22px;

    font-weight:700;

    border-radius:18px;

    cursor:pointer;

    transition:.3s;

    background:var(--primary);

    color:white;

    box-shadow:0 10px 20px rgba(214,40,40,.20);

}

main button:hover{

    transform:translateY(-4px);

    background:var(--primary-dark);

}

main button:active{

    transform:scale(.97);

}


/* =====================================================
   FOOTER
===================================================== */

footer{

    margin-top:60px;

    text-align:center;

    color:#777;

    font-size:16px;

}

footer strong{

    color:var(--primary);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:900px){

    header{

        flex-direction:column;

        gap:25px;

    }

    .logo{

        width:90px;

        height:90px;

    }

    .title h1{

        font-size:32px;

    }

    .title h3{

        font-size:24px;

    }

    main{

        width:100%;

    }

}