/*------------GENERAL--------------*/
body
{
    margin: 0;
    box-sizing: border-box;
    font-family: Roboto;
}
h2{
    font: 32px "Zilla Slab";
    color:#FF5900;
    font-weight: 700;
}
hr
{
    border:1px solid #FF5900;
    margin-top: 15px;
    margin-bottom: 50px;
    width: 100px;
    height: 1px;
}
img
{
    user-select: none;
}
button
{
    cursor: pointer;
}
p
{
    font: 18px roboto;
    line-height: 28px;
    color: #231f20;
}

::selection
{
    background-color: #666;
    color: #fff;
}
*
{
    margin: 0;
    box-sizing: border-box;
    scroll-behavior:smooth;
}
a:link, a:visited
{
    text-decoration: none;
    color: inherit;
}
/*-----------HEADER-------------*/
.header
{
    background-color: #FF5900;
    container-type: inline-size;
    container-name: header;
    max-height: 99vh;
}

.header__wrapper
{
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-bottom: 50px;
    position: relative;
    color:#fff;
    gap: 20px;
    justify-content: center;
    width: 95%;
    padding-left: 5px;
    margin: 60px auto;
}

.header h1
{
    font-family: "Zilla Slab", Roboto;
    font-size: 36px;
}
.header p
{
    font: 18px Roboto;
    margin-top: 20px;
    line-height: 28px;
    color: #fff;
}

.header__container
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.header__container--2
{
    max-width: 460px;
    position: relative;
}

.header__container button
{
    min-width: 111px;
    width: 11px;
    min-height: 46px;
    height: 46px;
    font: 18px sans-serif;
    background-color: #231f20;
    color: #fff;
    font-weight: 600;
    line-height: 28px;
    border-radius: 8px;
    margin-top: 23px;
    border: none;
    cursor: pointer;
}

/*---------HEADER QUERIES-----------*/
@container header (min-width:700px)
{
    .header__wrapper
    {
        min-height: 0;
        max-height: 400px;
        margin: 50px auto;
        margin-bottom: 17px;
        width: 65%;
        position: relative;
        left:-20px;
        top: 10px;
        flex-direction: row;
        justify-content: center;
    }
    .header__container
    {
        justify-content: center;
    }
    .header__container--2
    {
        position: relative;
        right: -20px;
    }
}