* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img,
.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

html {
	font-size: 62.5%;
}

:root {
    /* Light Steel */
    --color-text: #f8f9fa;
    --color-text-dark: #212529;
    --color-text-secondary: #dee2e6;
    --color-text-tertiary: #adb5bd;

    --color-accent: #1588d9;
    --color-accent-light: rgb(58, 172, 253);
    --color-accent-dark: rgb(3, 92, 156);

    --color-warning: #ffba08;
    --color-warning-light: #fffc5c;
    --color-warning-dark: #ca8300;

    --color-danger: #d00000;
    --color-danger-light: #fc4b34;
    --color-danger-dark: #5a0c0c;

    --color-shape: #495057;
    --color-bg-dark: #212529;
    --color-bg-light: #dee2e6;
    --color-header-bg: #121314;
    --color-footer-bg: #121314;
    --color-mobile-nav-overlay: #1213147a;

}

body {
	font-family: "Funnel Sans", sans-serif;
	font-optical-sizing: auto;
	position: relative;
	/* making the footer stay on the bottom */
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: flex-start;
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    overflow-x: hidden;
}

.desktop-only {
    display: unset;
}

.mobile-only {
    display: none;
}

.no-btn {
    border:none;
    background-image:none;
    background-color:transparent;
    box-shadow: none;
}

/* HEADER */
.masthead {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 2rem 8rem;
	background-color: var(--color-header-bg);
	color: var(--color-text);

	font-size: 1.8rem;
	z-index: 9999;
}

.masthead-absolute {
    position: absolute;
}

.masthead-nav {
	display: flex;
	gap: 3rem;
}

.masthead-link,
.masthead-link:link,
.masthead-link:visited {
	color: var(--color-text);
	text-decoration: none;
	transition: all 200ms;
}
.masthead-link:hover,
.masthead-link:active {
	color: var(--color-accent);
}

/* MOBILE NAV */

.mobile-nav {
    padding: 4rem 8rem;
    font-size: 2.8rem;
    margin: auto;
    border: none;
    box-shadow: none;
    background-color: var(--color-header-bg);
    color: var(--color-text);
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.mobile-nav::backdrop {
    background-color: var(--color-mobile-nav-overlay);
}

.mobile-nav .masthead-link::before {
    content: "\21AA "; /* Arrow */
    color: var(--color-accent);
}

.mobile-nav[open] {
    display: flex;
}


/* FOOTER */
.footer {
	display: flex;
	margin-top: auto;
	align-items: center;
	justify-content: space-between;
	gap: 2.4rem;
	padding: 2rem 8rem;
	background-color: var(--color-footer-bg);
	color: var(--color-text-tertiary);

	font-size: 1.4rem;
}

.footer-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4rem;
}

.footer-link:link,
.footer-link:visited {
	color: var(--color-text-tertiary);
	text-decoration: none;
	transition: all 200ms;
}
.footer-link:hover,
.footer-link:active {
	color: var(--color-text);
}

.footer-icon {
	width: 3rem;
	height: 3rem;
}

/* 404 */
.e404-container {
    flex: 1;
	display: grid;
	width: 100%;
    height: 100%;
	grid-template-columns: 1fr 3fr;
    gap: 10rem;
	padding: 10rem 10rem;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.e404-left {
	font-size: 25rem;
}

.e404-right {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: flex-start;
	justify-content: center;
	font-size: 2rem;

    h2 {
        font-size: 5.4rem;
    }

    a:link,
    a:visited {
        color: var(--color-accent-dark);
        text-decoration: none;
        transition: all 200ms;
    }
    a:hover,
    a:active {
        color: var(--color-accent-light);
    }
}