/* 
 * resources/css/mmq.css
 */

/*  */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;600;700&display=swap');

/*  */
@import url('./reset.css');
@import url('./components/footer.css');
@import url('./components/form.css');
@import url('./components/frame.css');
@import url('./components/header.css');


/*  */
:root {

    /*  */
    --white: rgb(255, 255, 255);
    --grey-light: rgb(206, 214, 224);
    --grey: rgb(116, 125, 140);
    --grey-dark: rgb(87, 96, 111);
    --black: rgb(10, 11, 11);

    /*  */
    --primary: rgb(52, 31, 151);
    --primary-transparent: rgba(176, 146, 234, 0.4);

    /*  */
    --fonts-fancy: 'Schibsted Grotesk', sans-serif;
}

/*  */
html {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 13px;
}
body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--black);
}
h1, h2, h3 {
    font-family: var(--fonts-fancy);
    font-weight: 600;
    line-height: 1.2;
}
h1 {
    font-size: 2;
}
h2 {
    font-size: 1.5rem;
}
p {
    line-height: 1.2;
}

/*  */
div#container {
    position: relative;
    width: 400px;
    height: 650px;
    background: var(--white);
    border-radius: 3px;
}
main {
    height: 100%;
}
form {
    height: 100%;
}

/*  */
::selection {
    background: var(--primary-transparent);
}
label::selection {
    background: transparent;
}