/* #region */


/* #endregion*/
/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
    user-select: none;      /* No text is selectable unless explicitly defining it on the html element. */
    -webkit-user-select: none; /* Specific for Safari */
    pointer-events: none;   /* No elements, e.g. input text fields or the canvas are clickable, unless explicitly defining it on the html element. */
    color: white;
}
*:focus {
    outline: none; /* Remove default focus outline. Without this: when pressing a numpad button, then it gets marked no matter what key is pressed afterwards. */
}

@font-face {
    font-family: 'Schoolbell';
    src: url('fonts/Schoolbell-Regular.ttf') format('truetype');
}

input, textarea, body, button { font-family: 'Schoolbell', cursive; }
h1 {
    text-align: center;
    font-size: 60px;
    color: rgb(255, 0, 255);
}
h2 {
    white-space: nowrap; /* Prevents the header from making text wrap in the transition on a smart phone*/
    font-size: 40px;
    color: rgb(255, 0, 255);
}
h3 {
    text-align: center;
    font-size: 24px;
    color: rgb(255, 0, 255);
}
h4 {
    text-align: center;
    font-size: 20px;
    color: rgb(255, 0, 255);
}

.pSansSerif{
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 300;
}
#h1HovedregningID{
    display: flex; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 30px;

    /* font-family: sans-serif; */
    line-height: 1.6;
    font-size: 30px;
    color: rgba(255,255,255);
    white-space: pre-line;
    text-shadow: 0 0 20px rgba(255,255,255);
    font-weight: 350; 
    transition: opacity 2s ease;
}

.window { /*REMEMBER to user showHideWindow() function when changing the display property. It controls display and opacity.*/
    position: fixed;
    z-index: 5;
    opacity: 0; /* This makes it possible to fade in/out. */
    scale: 0;
    display: none; /* Windows should also be set to display: none in index.html in order to avoid FOUC (Flash of Unstyled Content). */
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    /*background-color: rgb(46, 46, 46);*/
    border-radius: 30px;
    pointer-events: all; /* So that the user doesn't accidentially click on something behind the confirmation window. */
    /*border: solid rgba(255, 255, 255, 0.5) 1px;/**/
    box-shadow: inset 0 0 20px 1px rgba(255, 255, 255, 0.5);
    transition: 0.5s ease;
    font-size: 20px;
    max-width: 1000px;
    /* Background properties*/
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;       /* Prevents the image from repeating */

}


.readableText, .readableText * { /* The * means that sub elements are also affected. */
    font-family: sans-serif;
    line-height: 1.6;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    white-space: pre-line;
    letter-spacing: 0.3px;
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
    font-weight: 350;
}


.textRowBullet1{
    display: flex;
    flex-direction: row;
    padding-left: 5px;
}
.textRowBullet2{
    display: flex;
    flex-direction: row;
    padding-left: 30px;
}
.bullet{
    display: flex;
    flex-direction: row;
    padding-right: 10px;
}
/*****************************************************************************************************************/
/**************************************      General page setup    ***********************************************/
/*****************************************************************************************************************/
/* The body is the main container. It consists of:
    o  the header, which is the top menu.
    o  the page, which is the page content, defined by which page button is pressed in the top menu
    o  the footer which contains the copyright info.
    o  NOTE: Putting a scrollbar on the body (the root element) makes the browser make an ugly scrollbar. */
body {
    display: flex;
    flex-direction: column;
    align-items: center;            /* Center horizontally. */
    /*min-height: 100vh;              /* 100vh should work better than 100%. If content takes more space, then body will adapt. */
    height: 100vh;
    width: 100%;                    /* 100% works perfect. 100vw will cause a horizontal scroll bar to appear. */
    justify-content: flex-start;    /* Place elements top down. */
    touch-action: manipulation;     /* Removes zoom when double tapping on a smartphone. */
    overflow-x: hidden; 

}

.scrollY{
    pointer-events: all;
    overflow-y: scroll; 
    scrollbar-width: none; 
    /*scrollbar-color: rgba(255,255,255,0.3) transparent; /*First color is thumb color, second is track color*/
}

header {
    display: none; /* Header should also be set to display: none in index.html in order to avoid FOUC (Flash of Unstyled Content). */
    opacity: 0;
    justify-content: flex-end;      /* This positions the right menu (page menu) to the right. Notice that the rest of children elements are position: absolute (center menu and username). */
    width: 100%;                    /* Width is full screen. Height is not defined and will adjust to the children elements. This is importnat for the mobile menu. */
    padding: 0px 10px 0px 0px;     /* Upper right lower left. */
    transition: opacity 0.5s ease;
    min-height: 50px;
}

.page {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;            /* Center horizontally. */
    width: 100%;
    flex: 1;                        /* Makes sure the page takes up the space available in height, so that the footer is in the botton.*/
    overflow-x: hidden;
    
    /* Settings for initial state. */      
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.customFooter{
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 0;
    width: 100%;
    padding: 0px;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
}

footer, footer * {
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    margin-top: 0px;
    font-size: 12px;
}
footer a {
    color: #4CAF50;
    text-decoration: none;
    pointer-events: all;
}


.backgroundContainer {
    display: flex;
    position: fixed;
    height: 100%;
    width: 100%;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;       /* Prevents the image from repeating */
    z-index: -1;                        /* Ensure the pseudo-element is behind the content */
}

#blackOutID{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 4;
    transition: opacity 0.5s ease;
}

/*****************************************************************************************************************/
/**************************************      HEADER  content          ***************************************************/
/*****************************************************************************************************************/
.rightMenuContainer{
    display: flex;
    flex-direction: column;
}

.menuButtonsContainer{
    display: flex;
    flex-direction: column;
    direction: rtl;
    transition: height 0.5s , opacity 0.5s;
    overflow: hidden;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0px 20px 0px 20px;
    border-radius: 20px;
    width: 230px;
}



.username {
    position: absolute;  
    display: flex;  
    height: 40px;
    left: 10px;
    justify-content: flex-start;
    align-items: center;
    font-size: 30px;
}
.rainbowText{
    background: linear-gradient(90deg, rgb(156, 55, 55), rgb(162, 119, 40), rgb(45, 138, 45), rgb(57, 85, 187), rgb(114, 38, 169), rgb(142, 49, 142));
    background-size: 100%;
    -webkit-background-clip: text;/* Fixes issue seen on samsung phone, chrome browser. */
    background-clip: text;
    color: transparent;
}
.glowText{
    /*font-family: 'Schoolbell', cursive;*/
    line-height: 1.6;
    font-size: 30px;
    color: rgba(255,255,255);
    white-space: pre-line;
    text-shadow: 0 0 20px rgba(255,255,255);
    font-weight: 350; 
    transition: opacity 2s ease;

}
/*****************************************************************************************************************/
/************************************      Algorithm menu  and colorwheel           ***************************************************/
/*****************************************************************************************************************/
#buttonThemeID {
    display: flex;
    position: absolute;
    top: 5px;
    right: 80px;
    width: 40px;
    height: 40px;
    padding: 0px 0px 0px 0px;
    justify-content: center;
    transition: all 0.4s ease;
    /*visibility: hidden;   This is set in index.html in order to avoid FOUT (Flash of Unstyled Text). */
}
#buttonThemeID:hover {
    rotate: 20deg;
}

.colorWheel {
    width: 35px;
    height: 35px;
    background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);/**/
    border-radius: 50%; 
}

#buttonFullScreenID {
    position: absolute;
    top: 5px;
    right: 180px;
    height: 40px;
    width: 40px;
    justify-content: center;
    transition: 0.5s ease;
}
#buttonFullScreenID:hover {
    transform: scale(1.1);
}

#algorithmMenuID{
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 50px;
    height: 50px;
    transition: 0.5s ease;
    overflow: visible;
    border-radius: 175px; /* Corresponds to 50% when menu is closed and 175px when open.*/
    z-index: 10;
    transform: translate(50%, -50%); /*Places the origo in the center of the element.*/
    right: 150px;
    top: 25px;
    opacity: 0;
}

#algorithmMenuContentID{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    transition: 0.5s ease;
    opacity: 0;
}

#algorithmMenuBackgroundID{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 175px; /* Corresponds to 50% when menu is closed and 175px when open.*/
    transition: 0.5s ease;
    /* Background properties*/
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;       /* Prevents the image from repeating */
}

.algorithmContent{
    position: absolute;
    top: 270px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease;
    opacity: 0;
}

.difficultySliderLabel{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 8px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    line-height: 10px;
}

.algorithmIcon{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    cursor: pointer;
    pointer-events: all;
    transition: 0.3s ease;
    /* transform: scale is set in script.js */
    /*top and left are set in script.js*/
    width: 40px;
    top: 170px;
    
}

.startButton{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(0, 255, 0, 0.7);
    font-size: 24px;
    transition: 0.3s ease;
}
.startButton:hover{
    transform: scale(1.1);
}
/*****************************************************************************************************************/
/************************************      Trophies            ***************************************************/
/*****************************************************************************************************************/
.trophies{ 
    /*position: relative;*/
    display: flex;
    align-items: flex-start;    /* Vertically */
    justify-content: flex-start; /* Horizontally */
    gap: 5px;
    flex-wrap: wrap;
    width: 100%;                /* Width is the full screen. Height is adapting to content*/
}

.nextTrophy{ /*The div containing the greyed trophy*/
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: fit-content;
    height: 100%;
}
.nTrophiesSmartPhone {
    background: none;
    color: white;
    background-color: red;
    font-weight: bold;
    text-align: center;
    width: 20px;
    border: none;
    font-size: 10px;
}
#eventMessageID{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    direction: ltr; /* This is to make sure the welcome message is displayed from left to right. Probably because the trophy header is rtl. */
    font-size: 30px; /* Changed in resizeControl function */
    transition: all 1s ease;
    transform: translateY(-10px);
    opacity: 0;
    z-index: 3.5;
}


/*****************************************************************************************************************/
/************************************      COLLUMNS            ***************************************************/
/*****************************************************************************************************************/

.columnContainer {
    transition: 0.4s ease;
    display: flex;
    justify-content: space-between;
    height: 100%;
    min-height: 300px;
    padding: 0px 5px 0px 5px;  /* Upper right lower left. */
    width: 100%;
    max-width: 1200px;
}
.column1 {
    transition: 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 30px;
    /*Width is set in resizeControl function */
}
.column2 {
    transition: 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 500px;
    /*Width is set in resizeControl function*/
}
.column3 {
    transition: 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 200px;
    /*Width is set in resizeControl function*/
}
.panel{
    width: 100%;
}
.panelHeader {
    transform-origin: center left; /* Ensure rotation respects the div */
    width: 300px;
    text-align: center;
    pointer-events: all;
    transition: transform 0.2s ease;
}

/*****************************************************************************************************************/
/***************************************      CHAPTERS    ******************************************************/
/*****************************************************************************************************************/
.chaptersPanel{
    background: none;/*rgb(21, 68, 255);*/
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap:10px;
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
    height: 100%;
}
#chaptersHeaderID{
    /*color: rgb(255, 89, 70);*/
    color: rgb(255, 0, 0);
}
.modeLabel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}
.modeText{
    font-size: 3px;
    margin: 0px;
    color: white;
}

.chapterPanelContent{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap:0px;
}

.chapterContainer{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;  /* The three flex-xx properties somehow adapts the height so that it fills the available space without extending beyond the height of the parent containers. */
    flex-shrink: 1;
    flex-basis: 0;
    min-height: 0;
    pointer-events: all;
    overflow-x: visible;/* Allow child elements to be visible outside the container in x direction. Relevant for the thumbs */
    overflow-y: scroll;
    scrollbar-width: none;
    padding: 5px 12px 5px 2px;
}
.chapterRow {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    padding-right: 15px;
}
.breakLine{
    display: flex;
    justify-content: space-between; /* This is necessary to make the scale appear in the correct position */
    align-items: center;
    width: 100%;
    height: 1px;
    position: relative; /* Add this to position the thumb relative to the container */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.6), inset 0 0 1px rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
    margin-top: 2px;

}
.done {
    display: flex;
    position: absolute;
    width: 40px;
    left: 13px;
    top: 30%;
    transform: translateY(-50%) ;
}

#eyeID{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: transparent;
    position: fixed; /* Has to be fixed in order to use getBoundingClientRect on it. */
    overflow: hidden;
    animation: pulseShadow 2s infinite alternate ease-in-out;
    transition: 0.2s ease;
    visibility: hidden;
    transform: translate(-50%, -4px);
    z-index: 2;
}
@keyframes pulseShadow {
    /* 0% {
        box-shadow: 0 0 7px rgb(255, 46, 238), inset 0 0 7px rgba(255, 44, 251, 0.737);
    }
    100% {
        box-shadow: 0 0 7px rgb(255, 46, 238), inset 0 0 15px rgba(255, 44, 251, 0.9);
    } */
    0%   {box-shadow: inset 0 0 10px  rgba(95, 46, 255, 0.9);}
    100% {box-shadow: inset 0 0 13px rgba(195, 44, 255, 0.9);}
}
/*****************************************************************************************************************/
/*******************************************      SOLVE    *******************************************************/
/*****************************************************************************************************************/
.solvePanel{
    background: none; /*rgba(198, 205, 255, 0.35);*/
    display: flex;
    height: 200px;
    flex-direction: column;
    gap: 10px;  /* Vertical gap*/
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
}
#solveHeaderID{
    color: rgb(0, 227, 0)
}
.solvePanelContent{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
}

#playgroundID{
    position: relative;
    display: flex;
    flex-direction: column;
    top: -20px; /* Move in order to use as much space as possible. */
    justify-content: flex-start;
    align-items: center;
    width: 350px;
    height: 190px;
    background-color: none;
    text-align: center;
    font-size: 40px;
}

.solvetext{
    text-align: center;
    font-size: 40px;
    background: none;
    color: #fff;
    width: 200px;
    border: none;
}


#percentBoxID {/*Width and height is set in script.js*/
    display: none; /*Hide initially. the percent calculation function will set display: flex;*/
    flex-direction: column;
    flex-wrap: wrap;
    width: 200px;
    height: 100px;
    background-color: black;
    border-radius: 10px;
    border: solid white 5px;
}
.box{ /*Also used for percent box*/
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid black 2px;
    border-radius: 5px;
}
#celebrateBoxID {
    position: relative;
    top: -50px;
    display: none; /*Hide initially. the percent calculation function will set display: flex;*/
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 350px;
    height: 160px;
    gap: 10px;
}
#celebrateTextID{
    font-size: 50px;
}

.bigTrophy{
    display: flex;
    position: absolute;
    height: 200px;
    transition: all 1.5s ease;
    /*transform: translate(-50%, -50%); */
    z-index: 3;
}


/*****************************************************************************************************************/
/*******************************************      ANSWER    ******************************************************/
/*****************************************************************************************************************/
.answerPanel{
    background: none;/*rgba(203, 252, 255, 0.35);*/
    display: flex;
    flex-direction: column;
    gap: 10px;  /* Vertical gap*/
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
}
#answerHeaderID{
    color: rgb(255, 234, 0);
}
.answerPanelContent{
    display: flex;
    position: relative; /* this is necessary in order to use position on children divs. */
    flex-direction: column;
    width: 100%;
    gap:0px;
    align-items: center; /* Horizontally*/
    justify-content:center; /* Vertically */
    white-space: nowrap; /* Prevents the header from making text wrap in the transition on a smart phone*/
    font-size: 40px;
}
.answertext{
    display: flex;
    text-align: left;
    font-size: 40px;
    width: 135px; /*130px = room for 6 digits with fontSize 40px.*/
    background: none;/*rgba(86, 114, 255, 0.48);*/
    color:#fff;
    border: none;
    height: 50px;
    line-height: 40px;
    padding: 1px 2px;
}
.trueOrFalse{
    display: flex;
    position: absolute;
    right: -10px;
    top: -20px;
    height: 60px;
    font-size: 60px;
}

#answerFractionID{
    position: absolute;  
    display: none; /* Set to flex in JS*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: -25px;
    width: 200px;
    height: 80px;
}
.fractionField{
    width: 90%; 
    height: 40%;  
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); /* Also set in JS. */
    margin-top: 2px;
    border-radius: 8px;
    font-size: 30px;
    text-align: center;
}
.fractionLine{
    width: 100%; 
    height:2px; 
    background:rgba(255, 255, 255, 1); 
    margin-top:2px
}

.numpad{
    display: flex; /* Set to flex in JS*/
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;  /*This somehow removes the space between the button rows*/
    width: 100%;
    min-height: 50px;
    aspect-ratio: 1;
    margin-top: -10px;
}

.secondaryNumpad{
    display: flex; /* Set to flex in JS*/
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;  /*This somehow removes the space between the button rows*/

    height: 300px;
    width: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


/*****************************************************************************************************************/
/*******************************************      Help    ********************************************************/
/*****************************************************************************************************************/
.helpPanel{
    background: none; /*rgba(255, 197, 245, 0.35);*/
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 20px;  /* Vertical gap*/
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */  
}
.helpPanelContent{
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    gap: 30px;
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
    /*white-space: nowrap; /* Prevents the header from making text wrap in the transition on a smart phone*/
}

#helpHeaderID{
    color:rgb(0, 102, 255);
}

#tipID{ /* This is the tip text box. It can contain both text and html code. */
    position: relative; /* Makes it possible to place elements absolutely within it. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: none;
    color: white;
    font-size: 20px;
    line-height: 1.5;
    resize: none; /*So that it is not possible to drag the text box larger or smaller*/
    word-wrap: break-word; /* Ensure words wrap properly */
    overflow-wrap: break-word; /* Ensure words wrap properly */
}
/*****************************************************************************************************************/
/**************************************      buttons            ***************************************************/
/*****************************************************************************************************************/
button {
    display: flex;
    justify-content: left;
    align-items: center;
    color: white;
    border: none;/*1px solid transparent;*/
    padding: 0px 15px 0px 15px;
    height: 40px;
    border-radius: 20px;
    background: none; /* Using background-color is not enough */
    cursor: pointer;  /* Arrow changes to a hand when hovering over the button */
    font-size: 20px;
    transition: background-color 0.2s;
    pointer-events: all; /* Makes the button pressable */
    white-space: nowrap; /* Forces the text to not wrap to the next line */
    direction: ltr;
    

}

#buttonMenuID {
    flex-direction: column;
    width: 50px;
    height: 50px;
    justify-content:space-between;
    padding: 10px 0px 10px 0px;
    border-radius: 0;
}

#buttonMenuID span {
    width: 30px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
}


.chapterButton{
    width: 160px;
    height: 50px;
    border-radius: 25px;
    white-space: pre-wrap; /* Allows line breaks from <br> tags */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
    cursor: default;
}
.buttonClickable{
    border: solid 1px rgba(255, 255, 255, 0.2);
    pointer-events: all;
    cursor: pointer;
}

.buttonActive{
    /*box-shadow: 0 0 4px rgba(255, 255, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.6);*/
    box-shadow: 0 0 0px rgba(255, 255, 255, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.6);
}


.numpadButton {  /* Note that the button element itself has css code */
    display: flex;
    justify-content: center;
    width: 66px;
    height: 66px; /* 66px + 2*2px = 70px. So 70px is the total width and height of the button. */
    border-radius: 33px;
    transition: transform 0.2s; /* Used for scaling animation. */
    margin: 2px;
}

.buttonAdminLogIn{
    background-color: rgba(34, 53, 255, 0.5);
}
.buttonUserLogIn{
    background-color: rgba(9, 255, 0, 0.5);
}
/*****************************************************************************************************************/
/***********            SLIDERS         **************************************************************************/
/*****************************************************************************************************************/
.sliderContainer{
    display: flex;
    justify-content: space-between; /* This is necessary to make the scale appear in the correct position */
    align-items: center;
    width: 100px;
    height: 1px;
    position: relative; /* Add this to position the thumb relative to the container */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.6), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
.sliderContainer span{
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 0; /* This is necessary to make the scale appear in the correct position */
    transition: all 0.1s;
    text-align: center;
}
.thumbContainer {
    display: flex; 
    align-items: center;    
    position: absolute; 
    justify-content: center;
    width: 0;
    height: 0;
    background-color: red;
}
.thumb {
    border-radius: 50%;
    box-shadow: 0 0 0px rgba(255, 255, 255, 0.8), inset 0 0 12px rgba(255, 255, 255, 0.8);
    position: absolute; /* Add this to position the thumb absolutely within the container */
    pointer-events: all;
    z-index: 1;
}                            
/*****************************************************************************************************************/
/**************************************      Themes            ***************************************************/
/*****************************************************************************************************************/
.themetest { /* white */
    /* Background properties*/
    background-image: 'none';
    background-color: rgb(0, 0, 0);
}

.theme1 { /* BLACK */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(0, 0, 0, 0.766);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme2 { /* BLUE */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(0, 115, 160, 0.766);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme3 { /* RED */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(160, 0, 0, 0.766);
    filter: brightness(180%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme4 { /* GREEN */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(107, 157, 0, 0.766);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}

.theme5 { /* PURPLE */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(120, 0, 160, 0.766);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}

.theme6 { /* YELLOW */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(159, 148, 0, 0.809);    

    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}

.theme7 { /* TURQUOISE */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(0, 160, 147, 0.766);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme8 { /* PINK */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(160, 0, 152, 0.766);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme9 { /* COPPER */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(160, 88, 0, 0.766);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme10 { /* GOLD */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    /* background-color: rgba(160, 136, 0, 0.766); */
    background-color: rgba(169, 147, 1, 0.809);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}

.theme11 { /* RAINBOW */
    /* Background properties*/
    background-image: 
        /*linear-gradient(0deg,blue,purple,red, gold, gold),/**/
        linear-gradient(0deg,rgb(255, 0, 0),rgb(207, 207, 0),rgb(207, 207, 0),green,blue),
        url('images/background1.jpg');
    background-color: rgb(143, 142, 142);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}

.screenSize {
    color: white;
    background: none;
    border: none;
    text-align: center;
}

/*****************************************************************************************************************/
/**************************************      Kom godt igang    ***************************************************/
/*****************************************************************************************************************/
.komGodtIgangContent{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    padding: 5px 0px 0px 0px; /*upper right lower left*/
}
.tablinks {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 120px;
    height: 50px;
    font-size: 18px;
    border-radius: 20px 20px 0px 0px;
    pointer-events: all;
}

.tabContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    border-radius: 20px;
    padding: 20px;
    max-width: 1200px;
}
/*****************************************************************************************************************/
/**************************************      Om                ***************************************************/
/*****************************************************************************************************************/
.aboutContent{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    padding: 5px 0px 0px 0px; /*upper right lower left*/
}
/*****************************************************************************************************************/
/**************************************      Forms: Create user, Log in and Admin page             ***************/
/*****************************************************************************************************************/
.formContainer{
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: flex-start; 
    gap: 30px;
    width: 350px;
    border-radius: 20px;
    padding: 10px; /*upper and lower cannot be included because of height transition*/
    /* Height can be individually set. */
}
.formRow{
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}
.formName{
    width: 180px;
    padding-left: 10px;
    font-size: 16px;
}
.formInput{
    font-family: sans-serif;
    font-size: 16px;
    width: 300px;
    height: 40px;
    border-radius: 20px;
    padding: 0px 10px 0px 10px;
    pointer-events: all;
    outline: none; /* Remove default focus outline */
    border: none;
    background-color: inherit;
    background-color: rgba(255, 255, 255, 0.2);
}

.formButton{ /* Additions to basis class: button */
    font-family: sans-serif;
    font-size: 20px;
    border: solid 1px rgba(255, 255, 255, 0.4);
    justify-content: center;   
}
.formThreeDotsButton{ /* Used for header and in JS created userlist */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: solid 1px rgba(255, 255, 255, 0.4);
}
.formDot{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: white;
}
#modifyUserWindowID{ /* addition to basis class: formContainer */
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 1s;
    height: 0px; /* height is set by JS under function: openModifyUserWindow*/
    padding-top: 0;
    padding-bottom: 0;
}
.packageInfoWindow{
    align-items: flex-start;
}

#modifyUserWrapperID{
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s;
    height: 0px; /* height is set by JS under function: openModifyUserWindow*/
}

#newUserNameID{
    width: 160px;
}
#newUserNameID::placeholder{
    color: rgba(255, 255, 255, 0.765);
}
#newUserPinID{
    width: 80px;
}
#newUserPinID::placeholder{
    color: rgba(255, 255, 255, 0.765);
}
/*****************************************************************************************************************/
/**************************************      Keyboard codes    ***************************************************/
/*****************************************************************************************************************/
/* Close button style */
.close-btn {
    display: block;
    text-align: right;
    cursor: pointer;
    font-size: 30px;
    margin-bottom: 10px;
    color: white;
    pointer-events: all;
    position: absolute;
    right: 22px;
    top: 15px;
}
/*****************************************************************************************************************/
/**************************************      Chapters    ***************************************************/
/*****************************************************************************************************************/
#chaptersContainer{
    font-family: 'Courier New', Courier, monospace; 
    width: 100%; 
    height: 100%; 
    
    text-align: left; 
    /*pointer-events: all;
    overflow-y: auto; 
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.5) transparent;*/
}
/*****************************************************************************************************************/
/**************************************      Cannons    ***************************************************/
/*****************************************************************************************************************/
#glitterCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through */
}
#cannonAreaID { /* Defines the area where the cannons operate. */
    position: absolute;
    bottom: 30px;
    height: 300px; /* Height not important.*/
    width: 100%;
    overflow: clip; /* This is necessary to prevent the cannons from overflowing the container. */
}
.cannonAssembly {
    display: flex;
    position: absolute;
    height: 50px; /* Adjusted in JS: 30px in slim mode.  Used to define the size of the cannon bowl and wheel. The wheel height adapts to this, and the width adapts the wheel width. Maybe it can be made nicer :).*/
    bottom: 30px; /* Make room for cannon rekyl */
    /*left: -150px; /* This is determined in the HTML code, depending on it it is a L og R cannon*/
    transition: 4s linear;
    align-items: center;
}
.cannonWheel {
    display: block;
    position: relative; /*When makin relative, the wheel takes up space in the div and determines its size*/
    height: 100%;
    z-index: 2;
    left: 0%;
    transform-origin: 50% 50%; /* For wheel rotation. Places position and rotation point in the center of the wheel*/
    transition: 4s linear;
}
.cannonBowlContainer {
    display: flex;
    position: absolute;
    width: 200%;
    transform-origin: 25% 50%; /* For aiming. Places position and rotation point in the center of the wheel*/
    transition: 0.2s; 
    transform: rotate(-0deg); /* Places bowl of center vertically. -20% for degrees -90 to 90, and +20% for degrees 90-235. */
}
.cannonBowl {
    display: block; /* The cannonAssembly will now fit its height to this img height.*/
    position: relative;
    width: 100%;
    z-index: 1;
    transform: translate(-10%,-20%); /* Transition is set in JS.*/
}