@font-face {font-family: "FinalFrontier";
            src: local("fonts/FinalFrontier"), url(./fonts/FinalFrontier.ttf) format('truetype');}
@font-face {font-family: "FinalFrontierSS";
            src: local("fonts/FinalFrontierSS"), url(./fonts/FinalFrontierSS.ttf) format('truetype');}
  
* {box-sizing: border-box; margin: 0;}

/* Colours */
/* Prussian Blue: #0B3C5D */
/* Sky Blue:      #328CC1 */
/* Gold Leaf:     #D9B310 */
/* Ivory Black:   #1D2731 */

html {
  background-image: url(images/bg2.jpeg);
  background-size: 100vw;
  background-position: center;
  background-color: #0B3C5D;
  background-repeat: repeat-y;
  overflow: hidden;
  font-size: 100%;
}

body {margin: 0; box-sizing: border-box; font-size: 1em;}

h1 {font-family: "FinalFrontier";   font-size: 4em; font-weight: 100;}
h2 {font-family: "FinalFrontierSS"; font-size: 2em; font-weight: 100;}
h3 {font-family: "FinalFrontier";   font-size: 1.5em; color: #328CC1;}
h4 {font-family: "FinalFrontier";   font-size: 3em; width: 80%;}
h5 {font-family: "Roboto";          font-size: 1.5em; 
    padding: 48px 24px; width: 88%; text-align: justify; text-justify: inter-word; }

.header > h2#long-logo1 {font-size: 1em; display: block; cursor: pointer;}
.header > h3#long-logo2 {font-size: 3em; font-weight: 100; display: block; cursor: pointer;}
.short-logo {height: 56px; display: none;}
.long-form {display: block;}

.long-form a,
.dropdown-content a
             { font-size: 2em; font-family: "FinalFrontier";
               padding: 0 8px; }

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "footer";
  text-align: center;
  width: 100vw;
  height: 100vh;
}

.container > .header {
  grid-area: header; display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  padding: 8px 24px; }

.container > .footer {
  grid-area: footer;
}

.container > .main {
  grid-area: main; overflow: hidden auto; display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, auto);
  grid-template-areas: 
    "intro"
    "divider1"
    "section1"
    "divider2"
    "section2"
    "divider3"
    "section3";
  justify-content: center;
}

/* .container > .main::-webkit-scrollbar {display: none;} */

#large-grid { grid-area: intro; display: grid; grid-gap: 1vw; grid-template-rows: 5vw;
              grid-auto-rows: 9vw; grid-template-columns: 1fr repeat(6, 3fr) 1fr; }

#small-grid { grid-area: intro; display: none; grid-gap: 1vw; grid-template-rows: 10vw;
              grid-auto-rows: 18vw; grid-template-columns: 1fr repeat(3, 3fr) 1fr; }

#large-grid > div,
#small-grid > div { position: relative; background-color:#D9B310AA; outline-color:#D9B310;
                    outline-style: solid; outline-width: 1vw; border-radius: 10px;}

#large-grid > div.tags,
#small-grid > div.tags { margin: auto 0; display: flex; align-items: center;
                         justify-content: center; font-weight: bold; color: #1D2731; height: 100%; }

.code-text { text-align: justify; text-justify: inter-word; }

#large-grid > div.tags > p {font-size: 2vw;}
#small-grid > div.tags > p {font-size: 3.75vw;}

#row2-1{ text-align: right; }
#row2-1 > p { font-family: 'Rozha One', serif; position: relative; font-size: 5vw; margin: 0; }

#large-grid > #row2-1 > p:nth-child(1){margin-top: 5vw;}
#large-grid > #row2-1 > p:nth-child(2){margin-top: -1vw; font-size: 7.5vw;}
#small-grid > #row2-1-1 > p {margin-top: 5vw; font-size: 7.5vw;}

#large-grid > div.colspan2, #small-grid > div.colspan2 { grid-column-end: span 2; }
#large-grid > div.colspan3, #small-grid > div.colspan3 { grid-column-end: span 3; }

#large-grid > div.rowspan2, #small-grid > div.rowspan2 { grid-row-end: span 2; }

#section1 { grid-area: section1; 
            display: flex; flex-flow: row wrap; padding: 24px;
            align-items: center; justify-content: center;} 
#section1 > div { width: 24vw; min-width: 200px; height: 12vw; min-height: 120px;
                  margin: 8px; display: flex; align-items: center;
                  justify-content: center; }

#section2 { grid-area: section2; background-color: #dea327;
            display: flex; flex-flow: row wrap; padding: 24px;
            align-items: top; justify-content: space-around; }
#section2 > div { width: 40vw; min-width: 325px; height: 40vh; min-height: 221px;
                  display: flex; align-items: center;
                  justify-content: center; }
figure > img { width: 40vw; min-width: 325px; margin: 8px; border-radius: 8px; }

.links { display: flex; flex-direction: row; height: 20vh;
         justify-content: space-around; align-items: center; }

#section3 { grid-area: section3; background-color: #0B3C5D; height: 70vh;
            display: flex; flex-flow: row wrap;}
#section3 > div {min-width: 150px; min-height: 150px;}

.flex-align-sec { height: 70vh; display: flex; align-items: center; justify-content: center; }
    
#divider1 { grid-area: divider1; }
#divider2 { grid-area: divider2; }
#divider3 { grid-area: divider3; }

.flex-align-div {height: 20vh; display: flex; align-items: center; justify-content: center;
                 border-top: 1px solid #1D2731; border-bottom: 1px solid black; z-index: 100;}
  
.zoom { padding: 0; transition: transform 0.12s; /* Animation */
        width: auto; margin: 0 auto; border-radius: 15px; color: #F5F5F5; }

.zoom:hover { transform: scale(1.5); z-index: 10; }

a { text-decoration: none; }

button { background-color: #2052ad; padding: 0; border: none; background: none; cursor: pointer; }

/* --------------------------------------- Info Flip --------------------------------------- */

.scene { perspective: 600px; } /* width: 200px; height: 260px; margin: 40px 0; */

.card { position: relative; width: 100%; height: 100%; cursor: pointer;
        transform-style: preserve-3d; transform-origin: center right; transition: transform 1s;}

.card.is-flipped { transform: translateX(-100%) rotateY(-180deg);}

.card__face { position: absolute; width: 100%; height: 100%;
              text-align: center; backface-visibility: hidden; border-radius: 25px;
              box-shadow: 5px 5px 10px #1D2731;}

.card__face--front { background: #A71313; font-size: 1.5em; justify-content: center; align-items: center;
                     display: grid;}

.card__face--back  { background: #A71313; font-size: 1em; transform: rotateY(180deg);
                     text-align: justify; text-justify: inter-word;
                     padding: 8px; justify-content: center; align-items: center; display: grid;}
/* -------------------------------------------------------------------------------- */

/* --------------------------- Drop Menu in Mobile Mode --------------------------- */
.dropbtn { border: none; cursor: pointer; margin-right: 16px; }

.dropdown { position: relative; display: none; }

.dropdown-content { display: none; position: absolute; right: 0; min-width: 160px; 
                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 2000;}

.dropdown-content a { color: #1D2731; padding: 12px 16px; text-decoration: none; display: block; }

.dropdown:hover .dropdown-content { display: block; }
/* -------------------------------------------------------------------------------- */

/* ----------------------------- Return To Top Button ----------------------------- */
#myBtn { display: none; position: fixed; bottom: 24px; right: 8px; z-index: 100; 
         background-color: #D9B310; color: #1D2731; font-weight: 400;
         cursor: pointer; box-shadow: 2px 5px #1D2731;
         padding: 8px 16px; border-radius: 8px; font-size: 1.125em; }

#myBtn:hover  { background-color: #D9B310BB; }
#myBtn:active { background-color: #D9B31088; box-shadow: 1px 1px #1D2731;
                transform: translateY(4px); }
/* -------------------------------------------------------------------------------- */

/* ---------------------------- Dark/Light Mode Button ---------------------------- */
.mode-button { position: fixed; bottom: 24px; left: 8px; z-index: 100;
               background-color: #2052ad; color: #F5F5F5; font-weight: 400;
               cursor: pointer; box-shadow: 2px 5px #1D2731;
               padding: 8px 16px; border-radius: 8px; font-size: 1.125em; }
.mode-button:hover  { background-color: #2052adBB; }
.mode-button:active { background-color: #2052ad88; box-shadow: 1px 1px #000;
                      transform: translateY(4px); }
/* -------------------------------------------------------------------------------- */

/* ----------------------------------- Lightbox ----------------------------------- */
.row > .column {padding: 0 8px;}

.row:after {content: ""; display: table; clear: both;}

.column {float: left; max-width: 25%;}

/* The Modal (background) */
.modal { display: none; position: fixed; z-index: 120;
  padding-top: 25px; left: 0; top: 0; width: 100%; height: 100%;
  overflow: auto; background-color: #1D2731EE;
}

/* Modal Content */
.modal-content {position: relative; background-color: #F5F5F5;
  margin: auto; padding: 0; width: 90%; max-width: 1200px;}

/* The Close Button */
.close { color: #F5F5F5; position: absolute; top: 10px; right: 25px;
  font-size: 35px; font-weight: bold; z-index: 100;}

.close:hover, .close:focus {color: #999; text-decoration: none; cursor: pointer;}

.mySlides {text-align: center; display: none; background-color: #1D2731;}
.mySlides > img {max-width: 100%; max-height: 30em; width: auto; height: auto;}

.column > img {max-width: 100%; max-height: 100%; width: auto; height: auto;}

.cursor {cursor: pointer;}

/* Next & previous buttons */
.prev, .next { cursor: pointer; position: absolute;
  top: 50%; width: auto; padding: 16px; margin-top: -50px;
  color: #F5F5F5; font-weight: bold; font-size: 20px;
  transition: 0.6s ease; border-radius: 0 3px 3px 0;
  user-select: none; -webkit-user-select: none;}

/* Position the "next button" to the right */
.next { right: 0; border-radius: 3px 0 0 3px;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {background-color: #1D2731cc;}

/* Number text (1/3 etc) */
.numbertext { color: #f5f5f5; font-size: 12px;
  padding: 8px 12px; position: absolute; top: 0;}

img { margin-bottom: -4px;}

.caption-container { text-align: center;
  font-size: 2em; background-color: #1D2731;
  padding: 4px 16px; color: #F5F5F5;}

.demo {opacity: 0.6;}

.active, .demo:hover {opacity: 1;}

img.hover-shadow {transition: 0.3s; box-shadow: 5px 5px 10px #1D2731;}

.hover-shadow:hover {box-shadow: 0 4px 8px 0 #1D273133, 0 6px 20px 0 #1D273130;
                     transform: scale(1.05)}

#thumbnails { display: flex; flex-flow: row wrap; background-color: #1D2731; align-items: center; justify-content: center;}

/* ---------------------------------------------------------------------------------*/

/* -------------------------- Dark Mode Switch -------------------------------------*/
#fixed-button {
    position: fixed;
    bottom: 30px; right: 30px; width: 100px;
    z-index: 99;
}
/* ---------------------------------------------------------------------------------*/

/* On screens that are between 425px and 850px */
@media screen and (min-width: 426px) and (max-width: 850px) {
  h4 {font-size: 2.5em;}
  h2 {font-size: 1.5em;}
  h3 {font-size: 1em;}

  .long-form a { font-size: 1.5em; }
  
}

/* On screens that are between 425px and 600pxs */
@media screen and (min-width: 426px) and (max-width: 600px) {
  .dropdown {display: inline-block;}
  .long-form {display: none;}

  #large-grid {display: none;}
  #small-grid {display: grid;}
  #row2-1{text-align: center;}

  .column > img {max-height: 100px; width: auto;}
}

/* On screens that are 425px or less */
@media screen and (min-width: 0) and (max-width: 425px) {
  h1 {font-size: 3em;}
  h4 {font-size: 2em;}
  h5 {font-size: 1.25em; width: 96%; padding: 8px;}

  #long-logo1 { display: none; }
  #long-logo2 { display: none; }
  #short-logo { display: block; }

  #large-grid {display: none;}
  #small-grid {display: grid;}
  #small-grid > div {border-radius: 0;}
  #row2-1{text-align: center;}

  .dropdown {display: inline-block;}
  .long-form {display: none;}

  #section1 > div {width: 80vw; min-width: 200px; height: 12vw; min-height: 140px;}

  .column > img {max-height: 50px; width: auto;}
  .mySlides > img {max-height: 30vh; width: auto;}
        
}

/* ------------------------------- Changes for Larger Screens ----------------------------------------------------- */

@media screen and (min-width: 1096px) and (min-height: 680px)  { body { font-size: 1.125rem;} }
@media screen and (min-width: 1224px) and (min-height: 856px)  { body { font-size: 1.250rem;} }
@media screen and (min-width: 1344px) and (min-height: 944px)  { body { font-size: 1.375rem;} }
@media screen and (min-width: 1464px) and (min-height: 1024px) { body { font-size: 1.500rem;} }
@media screen and (min-width: 1584px) and (min-height: 1112px) { body { font-size: 1.625rem;} }
@media screen and (min-width: 1704px) and (min-height: 1194px) { body { font-size: 1.750rem;} }
@media screen and (min-width: 1824px) and (min-height: 1280px) { body { font-size: 1.875rem;} }
@media screen and (min-width: 1944px) and (min-height: 1368px) { body { font-size: 2.000rem;} }
@media screen and (min-width: 2064px) and (min-height: 1448px) { body { font-size: 2.125rem;} }
@media screen and (min-width: 2184px) and (min-height: 1536px) { body { font-size: 2.250rem;} }
@media screen and (min-width: 2304px) and (min-height: 1616px) { body { font-size: 2.375rem;} }
@media screen and (min-width: 2424px) and (min-height: 1704px) { body { font-size: 2.500rem;} }
@media screen and (min-width: 2544px) and (min-height: 1784px) { body { font-size: 2.625rem;} }
@media screen and (min-width: 2664px) and (min-height: 1872px) { body { font-size: 2.750rem;} }
@media screen and (min-width: 2784px) and (min-height: 1952px) { body { font-size: 2.875rem;} }
@media screen and (min-width: 2904px) and (min-height: 2040px) { body { font-size: 3.000rem;} }
@media screen and (min-width: 3024px) and (min-height: 2128px) { body { font-size: 3.125rem;} }
@media screen and (min-width: 3144px) and (min-height: 2208px) { body { font-size: 3.250rem;} }
@media screen and (min-width: 3264px) and (min-height: 2296px) { body { font-size: 3.375rem;} }
@media screen and (min-width: 3384px) and (min-height: 2376px) { body { font-size: 3.500rem;} }
@media screen and (min-width: 3504px) and (min-height: 2464px) { body { font-size: 3.625rem;} }
@media screen and (min-width: 3624px) and (min-height: 2544px) { body { font-size: 3.750rem;} }
@media screen and (min-width: 3744px) and (min-height: 2632px) { body { font-size: 3.875rem;} }
@media screen and (min-width: 3864px) and (min-height: 2712px) { body { font-size: 4.000rem;} }