@import 'components.css';
@import 'header.css';
@import 'hero-section.css';
@import 'features-section.css';
@import 'pricing-section.css';
@import 'contact-section.css';
@import 'store.css';
@import 'movies.css';
@import 'movie.css';

*,
*:before,
*:after {

    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    line-height: 30px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: #242830;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: "IBM Plex Sans", sans-serif;
    color: #8A94A7;
    font-size: 1.3rem;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    clear: both;
    color: #fff;
    font-weight: 600;
}

h1,
.h1 {
    font-size: 44px;
    line-height: 54px;
    letter-spacing: 0px;
}

main {
    flex: 1 0 auto;
    overflow: hidden;
}

/* General Styling */
section {
    position: relative;
}

/* Common style for pseudo-elements */
section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

/* Double Diagonal line */
.ss-style-doublediagonal {
    z-index: 1;
    padding-top: 6em;
    background: #2072a7;
    color: #fff;
}

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.ss-style-doublediagonal::before {
    height: 50%;
    background: #116094;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 3% 0;
    transform-origin: 3% 0;
}

.hidden {
    display: none;
}