:root {
    --transWhite: 255, 255, 255;
    --green: #7ac643;
    --orange: #F4901E;
    --pink: #FF7BA9;
    --blue: #3FA6F2;
    --grey: #B0B0B0;
    --purple: #8b50c9;
    
    --whiteRGBValues: 255, 255, 255;
    --darkRGBValues: 51, 51, 51;

    --border: 2px;
    --radius: 10px;
    --maxWidth: 600px;
    --headerHeight: 100px;
    --footerHeight: 100px;
    --titleFont: "Teko", sans-serif;
    --titleSize: 2em;
    --titleLineHeight: 0.8em;
    --textFontSize: 16px;

    --zIndexLogo: 130;
    --zIndexModal: 120;
    --zIndexChapterHeader: 110;
    --zIndexHeader: 100;
    --zIndexPageTitle: 90;
    --zIndexGradient: 70;
    --zIndexContent: 60;
    --zIndexFooter: 100;

    --blankIconPos_White: 0% -300%;
    --unknownIconPos_White: -100% -300%;
    --blankIconPos_Dark: -200% -300%;
    --unknownIconPos_Dark: -300% -300%;

    --uiButtonsWhiteURL: url('../images/buttonIconsWhite.png');
    --uiButtonsDarkURL: url('../images/buttonIconsDark.png');
    --chapterButtonsWhiteURL: url('../images/chapterButtonsWhite.png');
    --chapterButtonsBlackURL: url('../images/chapterButtonsDark.png');
    
    --chapterColor1: var(--orange);
    --chapterColor2: var(--green);
    --chapterColor3: var(--blue);
    --chapterColor4: var(--pink);
    --chapterColor5: var(--grey);
    --mainRGBValues: var(--whiteRGBValues);
    --mainColor: rgb(var(--mainRGBValues));
    --iconsFilter: none;
    --unknownIconPos: var(--unknownIconPos_White);
    --blankIconPos: var(--blankIconPos_White);
    --uiButtonsURL: var(--uiButtonsWhiteURL);
    --chapterButtonsURL: var(--chapterButtonsWhiteURL);
}


/*
 * BODY
 */

html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--mainColor);
    font-size: var(--textFontSize);
    font-family: Arial, Helvetica, sans-serif;
    background: var(--pageBgColor);
}

body.homepage   { --pageBgColor: var(--chapterColor1); }
body.rulebook   { --pageBgColor: var(--chapterColor2); }
body.assistant  { --pageBgColor: var(--chapterColor3); }
body.settings   { --pageBgColor: var(--chapterColor4); }
body.report     { --pageBgColor: var(--chapterColor5); }
body.tutorial   { --pageBgColor: var(--chapterColor6); }

body.homepage   #mainLogo { height: 140px;  margin-top: 130px; }
body.rulebook   #mainLogo { height: 70px;   margin-top: 0px; }
body.assistant  #mainLogo { height: 70px;   margin-top: 0px; }
body.settings   #mainLogo { height: 140px;  margin-top: 130px; }
body.report     #mainLogo { height: 70px;   margin-top: 0px; }
body.tutorial   #mainLogo { height: 70px;   margin: 0px 70px 0px 0px; }

.chapterHeader.rulebook {
    padding-left: 10px;
}

body.homepage #mainLogo.small {
    height: 70px !important;
    margin-top: 0px !important; 
}

/*
 * HEADER
 */

header {
    z-index: var(--zIndexHeader);
    width: 100%;
    max-width: 600px;
    height: var(--headerHeight);
    margin: 0;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#mainLogo {
    z-index: var(--zIndexLogo);
    height: 70px;
    transition: all 0.5s;
}

#tagline {
    width: 280px;
    line-height: 1em;
    font-family: var(--titleFont);
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 30px;
    opacity: 0.8;
    text-transform: uppercase;
}

/*
 * FOOTER
 */

footer {
    z-index: var(--zIndexFooter);
    position: fixed;
    bottom: 0;
    width: 100%;
    height: var(--footerHeight);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-family: "Teko", sans-serif;
    font-size: 1em;
    text-align: center;
    color: var(--grey);
    background-color: var(--mainColor);
}

.copyrightText {
    width: 100%;
    height: min-content;
}


/*
 * CHAPTERS & PAGES
 */

#chapterWrapper {
    margin-bottom: 110px;
    width: 100%;
    height: 100%;
    max-width: var(--maxWidth);
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.chapterHeader {
    z-index: var(--zIndexChapterHeader);
    width: 100%;
    max-width: var(--maxWidth);
    height: var(--headerHeight);
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chapterHeader .btnSpacer {
    flex-grow: 1;
}

.chapterHeader .roundButton.alignLeft {
    margin: 0px 0px 0px 20px;
}

.chapterHeader .roundButton.alignRight {
    margin: 0px 20px 0px 0px;
}

.page {
    width: 100vw;
    max-width: var(--maxWidth);
    height: 100%;
    scroll-snap-align: start;
}

.pageOrganizer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
}

.pageOrganizer .pageTitle {
    margin-top: var(--headerHeight);
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 40px;
}

.pageTitle text, .title {
    z-index: var(--zIndexPageTitle);
    text-align: center;
    font-family: var(--titleFont);
    font-size: var(--titleSize);
    line-height: var(--titleLineHeight);
    text-transform: uppercase;;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

.title {
    height: 40px;
}

.pageContent {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    overflow: hidden;
}

.pageContent.noHeader {
    margin-top: 100px;
}

.pageContent.noHeaderNoTitle {
    margin-top: 140px;
}

.pageContent.noTitle {
    margin-top: 40px;
}

.pageContent.centerH {
    align-items: center;
}

.pageContent.centerV {
    justify-content: center;
}

.scrollableBlock {
    margin: 0px 10px 0px 20px;
    padding-top: 25px;
    padding-right: 10px;
    padding-bottom: 40px;
    overflow-y: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    margin: 30px;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--transWhite), 0.3);
    border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--transWhite), 0.5);
}

.gradientMask {
    z-index: var(--zIndexGradient);
    background: linear-gradient(var(--pageBgColor) 0px, transparent 25px, transparent 93%, var(--pageBgColor) 98%);
    position: absolute;
    margin-left: -20px;
    margin-top: -25px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pageSlider {
    width: fit-content;
    height: 100%;
    display: flex;
}


/*
 * SCROLL DOWN ARROWS
 */

.scrollArrowsArea {
    z-index: var(--zIndexFooter);
    position: absolute;
    width: 100%;
    max-width: var(--maxWidth);
    height: 50px;
}

.scrollArrowsArea.bottom {
    bottom: 120px;
}

.scrollArrowsArea.top {
    top: 92px;
}

.scrollArrows {
    z-index: var(--zIndexFooter);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding-left: 12px;
    padding-top: 12px;
    position: absolute;
}

.scrollArrows.swipeUp {
    right: 20px;
    transform: rotate(180deg);
    background-color: var(--pageBgColor);
    box-shadow: 0 0 10px 10px var(--pageBgColor);
}

.scrollArrows.swipeRight {
    left: 20px;
    transform: rotate(270deg);
}

.scrollArrows.swipeLeft {
    right: 20px;
    transform: rotate(90deg);
}

.m_scroll_arrows
{
    display: block;
    transform: rotate(45deg);
    border-right: 2px solid var(--mainColor);
    border-bottom: 2px solid var(--mainColor);
    margin: 0 0 0 4px;
    width: 14px;
    height: 14px;
}

.one, .two, .three {
    animation: mouse-scroll 1s infinite;
    margin-top: -8px;
}

.two { animation-delay: .2s; }
.three { animation-delay: .3s; }

@keyframes mouse-scroll {
  0%   { opacity: 1; }
  50%  { opacity: .5; }
  100% { opacity: 0; }
}


/*
 * MODAL
 */

.modal {
    display: none;
    position: fixed;
    z-index: var(--zIndexModal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.modal h1 {
    text-shadow: none;
    padding-bottom: 10px;
}

.modal-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    overflow-y: scroll;
}

.modal-body {
    background-color: var(--mainColor);
    color: var(--grey);
    padding: 20px 20px 10px 20px;
    text-align: center;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.modal-footer {
    display: flex;
    justify-content: center;
    padding: 0px 10px;
    background-color: var(--pageBgColor);
    border: none;
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    color: var(--mainColor);
}

.modal-footer .textButton {
    width: 50%;
}
  
.modal-content {
    background-color: var(--mainColor);
    padding: 0px;
    border: none;
    border-radius: var(--radius);
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
}

#pointsInput {
    width: 100px;
    height: 30px;
    font-size: 1.4em;
    text-align: center;
    padding: 0;
    margin-top: 10px;
}


/*
 * SETTINGS
 */

#themePicker {
    width: 280px;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
}

#themePicker span {
    flex-grow: 1;
    text-align: center;
}


/*
 * REPORT FORM
 */

#reportIntro {
    margin-inline: 20px;
}

#reportWrapper {
    width: 100%;
    height: 100%;
}

.reportForm {
    height: 95%;
    margin: 20px;
    font-family: var(--titleFont);
    line-height: 16px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}

.reportForm .formRow {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.reportForm .buttonsRow {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

.reportForm .buttonsRow button {
    flex: 1 1 0;
    margin-top: 20px;
    margin-inline: 0;
}

.reportForm .buttonsRow button:nth-child(1) { margin-right: 5px; }
.reportForm .buttonsRow button:nth-child(2) { margin-left: 5px; }

.reportForm .formRow div {
    flex-grow: 1;
}

.reportForm input[type=text] {
    height: 20px;
    margin-left: 6px;
    padding: 4px;
    border: 1px solid var(--mainColor);
    border-radius: 5px;
    flex-grow: 1;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.reportForm textarea {
    height: 20px;
    flex: 1 1 0;
    padding: 4px;
    border: 1px solid var(--mainColor);
    border-radius: 5px;
    resize: none;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}