/* Site colours ---- MUST be a variable unless one-time use */

     :root {
        /* main palette */
        --color1: #1B1C24; 
            --color1b: #262833;
            --color1c: #686E8D;
        --color2: #DCDEE8; 
        --color3: #BDB2FF; 
            --color3b: #1800A3;
        --color4: #3090CE;
            --color4b: #5AA6D8; 

        /* fonts */
        --font1: Lato; /* actual main font */
        --font2: candara; /* subtitle */
        --font3: Muli; /* "mainfont" */
        --font4: "Concert One"; /* title */
        --font5: arial; /* backup */
        }

    /* GENERAL THINGS */

        body {

        background-color: var(--color1);

        /*background-color: #e4e3db;
        filter: invert(1) hue-rotate(180deg);  FOR LIGHT MODE */

        }

        html{
        scroll-behavior:smooth;
        }

        ::-webkit-scrollbar {  /* making cool scroll bar */
        width:1.5vh;
        }

        ::-webkit-scrollbar-thumb {
        background:linear-gradient(transparent, var(--color3));
        border-radius:6px;
        }

        ::-webkit-scrollbar-thumb:hover {
        background:linear-gradient(transparent, var(--color4));
        } 

        .mainfont, .mainfont a {
        font-family: var(--font3), var(--font5); 
        font-size: 2.3vh;
        color: var(--color3);
        }

        @media screen and (max-width: 500px) {

            .mainfont, .mainfont a {
            font-size: 3vw;
            }
            .jump {
            font-size: 2.5vw;
            }
            select {
            width: 10vw;
            height: 5vw;
            }
            #button {
            display: none;
            }

          } 

        .circle {
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        }

        #LePage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        }

    /* SUBPAGES */

        .return {
        height: 20vh;
        z-index: 1;
        position: relative;
        }

        .returnCont {
        z-index: 1;
        }

        .return:hover {
        filter: drop-shadow(5px 5px 5px var(--color2));
        }

        #contentWrapper {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center; 
        width: 100vh;
        margin: auto;
        position: relative;
        top: -20vh;
        z-index: 0;
        }

        #about {
        font-size: 8vh;
        margin: 1vh;
        }

        #subLogo {
        height:18vh;
        }

    /* HEADER */    

        .header {
        margin-top: 5vh;
        width: 75%;
        padding: 10vh;
        background: var(--color1b);
        text-align: center;
        border-radius: 15px 50px;
        }

        #sub {
        color: var(--color2);
        font-size: 3vw;
        font-family: var(--font2), var(--font5);
        }

        #title {
        color: var(--color4b);
        font-size: 6.9vw;
        font-family: var(--font4), var(--font5);
        letter-spacing: 0.69vw;
        }

    /* ABOVE TABLE */

        #bHeader {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 3vh;
        }

        #container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 5vh;
        }

        #shell {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 50;
        margin-left: 5vh;
        }

        .jump {
        position: relative;
        color: var(--color2);
        font-family: var(--font1), var(--font5);
        z-index: 51;
        }

        #ins, label {
        font-weight: bold;
        }

        select {
        font-family: var(--font3), var(--font5);
        }

        /* style the scroll bar */
        select::-webkit-scrollbar {
          width: 8px; /* set the width of the scroll bar */
        }

        select::-webkit-scrollbar-track {
          background-color: var(--color1); /* set the background color of the track */
        }

        select::-webkit-scrollbar-thumb {
          background-color: var(--color2); /* set the color of the thumb */
          border-radius: 10px; /* round the edges of the thumb */
        }

        select::-webkit-scrollbar-thumb:hover {
          background-color: var(--color3);
        }

        option, select {
        background-color: var(--color1b); 
        border: 0.5px solid var(--color2); 
        color: var(--color2);
        border-radius: 3px;
        cursor:pointer;
        }
        
        #button:active {
        box-shadow: 0px 0px 6px 6px var(--color3);
        border: 0.5px solid var(--color3);
        } 

        button {
        border-radius: 4px;
        margin-top: 2vh;
        cursor:pointer;
        background-color: var(--color1b);
        padding: 1vh;
        border: 0.5px solid var(--color2);
        border-radius: 3px;
        font-size: 2vh;
        font-family: var(--font1), var(--font5);
        color: var(--color2);
        }

    /* THE "TABLE" */

        #grid {
        display: grid;
        grid-template-columns: repeat(1);
        margin: 2vh;
      }
      
        .row {
        display: flex;
        flex-direction: row;
      }
      
        .cell {
        padding: 3vh;
        font-family: var(--font1), var(--font5);
        -webkit-box-shadow: inset 0px -1px 0px 1px var(--color4);
        box-shadow: inset 0px -1px 0px 1px var(--color4);
        background-color: var(--color1b);
        color: var(--color2);
        align-items: center;
        display: flex;
      }

        .cell a {
        text-decoration: none;
        font-family: var(--font1), var(--font5);
        font-weight: bold;
        }

        .cell a:hover {
        background-color: var(--color3b);
        }
        .cell a:link {
        color: var(--color3);
        }
        .cell a:visited {
        color: var(--color3);
        }

            
      .Hcell {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        font-family: var(--font1), var(--font5);
        font-weight: bold;
        padding: 3vh;
        font-size: 3vh;
        -webkit-box-shadow: inset 0px -1px 0px 1px var(--color4);
        box-shadow: inset 0px -1px 0px 1px var(--color4);
        background-color: var(--color4b);
      }

      #cool1 {
        border-radius: 40px 0px 0px 0px;
      }

      #cool2 {
        border-radius: 0px 40px 0px 0px;
      }

      .s {
        width: 15vw;
      }

      .d {
        width: 40vw;
      }

      .t {
        width: 14vw;
      }

      .hide-row {
        display: none;
        }
      
      .fade-in {
        animation: fadeIn 0.8s;
      }
      
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
        }

    /* THE BOTTOM */

        #jumpCenter {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        }

        #join {
        font-size:25px;
        }

        #more {
          margin: 3vh;
        }

        #more:active {
          box-shadow: 0px 0px 6px 6px var(--color3);
          border: 0.5px solid var(--color3);
          } 

        /* #discordIcon {
    	height:80px;
        }

        #discord {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 70%;
        } */

        #bottomThings {
        display: flex;
        justify-content: center;
        align-items: center;
        }

        #mainLogo {
        height: 15vw;
        display: flex;
        position: relative;
        margin: 5vh;
        -webkit-filter: drop-shadow(1px 1px 1px var(--color4b));
        filter: drop-shadow(1px 1px 1px var(--color4b));
        }

        .logo {
        margin: 5vh;
        -webkit-filter: drop-shadow(1px 1px 1px var(--color4b));
        filter: drop-shadow(1px 1px 1px var(--color4b));
        }

        #forms a {
    	font-size: 4vh;
    	position: relative;
        }

    	#theBottom {
    	display:table;
    	margin:0 auto;
      margin-top: 10vh;
        color: var(--color2);
        font-family: var(--font1), var(--font5);
    	}

        #theBottom a {
        color: var(--color2);
        }