@import url('reset.css');

/* roboto-100 - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('fonts/roboto-v49-latin_latin-ext-100.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v49-latin_latin-ext-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600 - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/roboto-v49-latin_latin-ext-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900 - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/roboto-v49-latin_latin-ext-900.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html,
body {
    background: #d9deff;
    font-family: 'Roboto', sans-serif;
}

:root {
    --mainwidth: 1000px;
    --spacing: 20px;
}

.maincontainer {
    max-width: var(--mainwidth);
    margin: var(--spacing) auto;
}

@media all and (max-width: 1020px) {
    .maincontainer {
        margin: var(--spacing);
    }
}

.spacing-h {
    height: var(--spacing);
}


.mt-05 {
    margin-top: calc(var(--spacing)*0.5);
}

.mt-1 {
    margin-top: var(--spacing);
}


.mt-2 {
    margin-top: calc(var(--spacing)*2);
}

nav {
    display: flex;
    background: linear-gradient(to right,
            rgba(56, 109, 223, 0.8),
            rgba(96, 133, 212, 0.8));
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    align-items: center;
    border: 2px solid rgba(138, 170, 240, 0.8);
}

nav .ioxsoft-logo {
    margin-right: 20px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 1px;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-left: 20px;
}

nav a {
    list-style-type: none;
    text-decoration: none;
}

nav,
nav a {
    color: white;
}

main {
    margin: 0 var(--spacing);
}

.in-dev {
    font-size: 12px;
    font-weight: 100;
}

img.responsive,
video.responsive {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

pre {
    white-space: pre-wrap;
    padding-left: var(--spacing);
    border-left: 2px solid rgb(158, 158, 158);
    /* border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    padding: var(--spacing);
    border-radius: var(--spacing); */
}