@font-face {
    font-family: 'filson soft bold';
    src: url('./fonts/FilsonSoft-Bold.otf') format('opentype'); /* OTF Format */
    font-weight: normal;
    font-style: normal;
  }

:root {
    --primary-color-rgb: 0, 139, 210; /* #008bd2 */
    --secondary-color-rgb: 234, 82, 151; /* #ea5297 */
    --tertiary-color-rgb: 175, 202, 11; /* #afca0b */
    --warning-color-rgb: 190, 22, 34; /* #be1622  */
    --white-color-rgb: 255, 255, 255; /* #ffffff */
    --whitegrey-color-rgb: 230, 230, 230; /* #e6e6e6 */
    --lightgrey-color-rgb: 205, 205, 205; /* #cdcdcd */
    --grey-color-rgb: 120, 120, 120; /* #787878 */
    --darkgrey-color-rgb: 80, 80, 80; /* #505050 */
    --black-color-rgb: 0, 0, 0; /* #000000 */
    --backdrop-color-rgb: 0, 0, 0; /* #000000 */

    --primary-color: rgb(var(--primary-color-rgb));
    --secondary-color: rgb(var(--secondary-color-rgb));
    --tertiary-color: rgb(var(--tertiary-color-rgb));
    --warning-color: rgb(var(--warning-color-rgb));
    --white-color: rgb(var(--white-color-rgb));
    --whitegrey-color: rgb(var(--whitegrey-color-rgb));
    --lightgrey-color: rgb(var(--lightgrey-color-rgb));
    --grey-color: rgb(var(--grey-color-rgb));
    --darkgrey-color: rgb(var(--darkgrey-color-rgb));
    --black-color: rgb(var(--black-color-rgb));

    --primary-text-color: var(--white-color);
    --secondary-text-color: var(--white-color);
    --tertiary-text-color: var(--black-color);
    --warning-text-color: var(--white-color);
    --white-text-color: var(--black-color);
    --whitegrey-text-color: var(--black-color);
    --lightgrey-text-color: var(--black-color);
    --grey-text-color: var(--white-color);
    --darkgrey-text-color: rgb(var(--darkgrey-color-rgb));
    --black-text-color: var(--white-color);

    --white-background-color: rgb(var(--white-color-rgb));
    --main-background-color: rgba(var(--lightgrey-color-rgb), .5);
    --backdrop-color: rgba(var(--backdrop-color-rgb), .3);
    
    --main-hover-color: var(--lightgrey-color);
    --main-hover-text: var(--lightgrey-text-color);
}


body {
    font-size: 18px;
    line-height: 1.5;
    
    height: 100vh;
    overflow: scroll;
    overflow-x: hidden;
}

body,
.error-text,
.forceNotoSans {
    font-family: "Noto Sans", "Open Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6, button:not(.forceNotoSans), .forceFilsonSoft {
    font-family: "filson soft bold";
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 22px;
}

body h1 {
    font-size: 44px;
}

p {
    max-width: 75ch;
}

.error-text {
    color: var(--warning-color);
    font-style: italic;
}

.error-text::before {
    content: "*"
}

#app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main,
header,
.custom-max-width {
    max-width: 1080px;
}

main,
.header,
#TheHeaderComponent,
#TheLoginHeaderComponent {
    transition: all .7s ease-in-out;
}

*::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--grey-color);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--tertiary-color);
    border-radius: 20px;
    border: 3px solid var(--grey-color);
}

nav .link-label {
	display: none;
}

@media only screen and (min-width: 720px) {
	nav .link-label {
		display: inline;
	}

    .mobile-only {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {

    main,
    .header,
    #TheHeaderComponent,
    #TheLoginHeaderComponent {
        padding: 0 5%;
    }
}

@media only screen and (min-width: 966px) {

    main,
    .header,
    #TheHeaderComponent,
    #TheLoginHeaderComponent {
        padding: 0 10%;
    }
}

@media only screen and (min-width: 1208px) {

    main,
    .header,
    #TheHeaderComponent,
    #TheLoginHeaderComponent {
        padding: 0;
    }
}