:root{
    --body-color: white;
    --headline-color: white;
    --link-color: rgb(255, 255, 255);
    --white-color: white;
    --red-color:#e50914;
    --light-color: rgb(231, 231, 231);

    --button-color: #e50914;
    --border-color: #e50914;
    --border: 1px solid #e50914;
    --border-radius: 3px;

    --txt-shadow:  1px 1px 2px rgb(228, 228, 228);

    --font-weight-800: 800;
    --font-weight-400: 400;
    --font-weight-300: 300;

    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-18: 18px;
    --font-size-17: 17px;
    --font-size-40: 40px;
    --font-size-28: 28px;

    --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --box-shadow: 0px 0px 48px -24px rgba(0,0,0,0.5);
}
html, body{
    margin: 0;
    padding: 0;
    font-size: var(--font-size-18);
    font-family: var(--font-primary);
    color: var(--body-color);
    scroll-behavior: smooth;
    transition: all .3s;
    line-height: 1.6;
    overflow-x: hidden;
}
h2, h3{
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-800);
}

h4, h5, h6{
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-400);
    margin: 0;
    padding: 0;
}
p, span{
    font-size: var(--font-size-17);
    margin: 0;
    padding: 0;
}
a{
    color: var(--link-color);
    text-decoration: none;
}
a:hover{
    color: var(--link-color);
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
.d-flex{
    display: flex;
    flex-wrap: wrap;
}
.flex-no-wrap{
    flex-wrap: nowrap;
}
.flex-basis{
    flex-basis: 100%;
}
.flex-center{
    justify-content: center;
}
.flex-start{
    justify-content: flex-start;
}
.flex-end{
    justify-content: flex-end;
}
.flex-middle{
    align-items: center;
}
.direction-column{
    flex-direction: column;
}
.space-between{
    justify-content: space-between;
}


.w-50{
    max-width: 50%;
}
.w-40{
    max-width: 40%;
}
.w-60{
    max-width: 60%;
}
.w-30{
    max-width: 30%;
}
.w-36{
    max-width: 36%;
}
.w-200{
    max-width: 94%;
}

.f-w-8{
    font-weight: var(--font-weight-800);
}
.f-w-4{
    font-weight: var(--font-weight-400);
}
.f-w-3{
    font-weight: var(--font-weight-300);
}

.f-s-40{
    font-size: var(--font-size-40);
}
.f-s-24{
    font-size: var(--font-size-24);
}
.f-s-20{
    font-size: var(--font-size-20);
}
.f-s-28{
    font-size: var(--font-size-28);
}

.button{
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 10px 20px;
    color: var(--link-color) !important;
    background: var(--button-color);
    transition: all .3s;
    cursor: pointer;
    font-size: var(--font-size-18);
}

.red-color{
    color: var(--red-color);
}
.white-color{
    color: var(--white-color);
}
.bg-black{
    background-color: black;
}

.p-t-40{
    padding-top: 40px;
}
.p-b-40{
    padding-bottom: 40px;
}
.p-t-20{
    padding-top: 20px;
}
.p-l-10{
    padding-left: 10px;
}
.p-r-10{
    padding-right: 10px;
}
.p-t-10{
    padding-top: 10px;
}
.p-y-40{
    padding: 0px 40px;
}
.p-y-20{
    padding: 0px 20px;
}
.p-x-20{
    padding: 20px 0px;
}

/* margins */
.m-l-25{
    margin-left: 25px;
}
.m-r-25{
    margin-right: 25px;
}
.m-t-20{
    margin-top: 20px;
}

.text-shadow{
    text-shadow: 1px 1px 2px #242323;
}
.container{
    max-width: 100%;
    margin: 0;
    padding-left:40px;
    padding-right: 40px;
}
@media (max-width: 600px){
    .container{
        padding-left: 3px;
        padding-right: 3px;
    }
}