/* ============================================= */
/* Global Styles                                 */
/* ============================================= */

body {
   background-image: url('');
   background-color: #fffafa;
   background-color: f5f5f5;
   background-color: snow;
   background-color: whitesmoke;
   background-color: white;
   color: blue;
   font-family: calibri;
}

*    {box-sizing: border-box}
html {scroll-behavior: smooth;}

h1 {font-size: 160%;}
h2 {font-size: 140%;}
h3 {font-size: 120%;}
h4 {font-size: 90%; }

/* ============================================= */
/* Main Header and Menu Bar                      */
/* ============================================= */

.topheader01 {
   display:block;
   background-color: rgba(255,255,255,1);
   width:100%;
   height:120px;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index:2;
}

.logobox01 {
   display: block;
   position: fixed;
   top: 0px;
   left: 10%;
   z-index:2;
}

.logobox02 {
   display:block;
   background-image: linear-gradient(to right, 
      rgba(0,0,255,1), rgba(255,255,255,0) );
   width:14%;
   height:120px;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index:2;
}
.logobox03 {
   display:block;
   background-image: linear-gradient(to right, 
      rgba(255,255,255,0), rgba(0,0,255,1) );
   width: 86%;
   height:120px;
   position: fixed;
   top: 0px;
   right: 0px;
   z-index:2;
}

/* ============================================= */

.topheader02 {
   display:block;
   background-color: rgba(0,0,255,1);
   width:100%;
   height:100px;
   position: fixed;
   top: 120px;
   left: 0px;
   z-index:2;
}
.topheader02 h1{
   text-align: center;
   color: white;
   font-size: 140%;
}

.topblock {
   display:block;
   background-color: grey;
   width:90%;
   height:212px;
   postion: relative;
   top: 0px;
   left: 0px;
}

/* ============================================= */

.menubar {
  background-color: lightgrey;
  width: 100%;
  height: 44px;
  margin: 10;
  padding: 10;
  overflow: hidden;
  list-style-type: none;
}

li a.menubox {
  display: block;
  background-color: inherit;
  float: left;
  xborder: 1px solid black;
  xmargin-top: 0px;
  xmargin-right:0px;
  padding: 10px;
  color: blue;
  font-weight: bold;
  font-size: 120%;
  text-align: center;
  text-decoration: none;
}

li a.menubox:hover {
  background-color: yellow;
  color: black;
  font-weight: bold;
  transition: 1s;
}

/* ============================================= */
/* Progress Bar                                  */
/* ============================================= */

.progress-container {
  width: 100%;
  height: 8px;
  background: grey;
}

/* The progress bar (scroll indicator) */

.progress-bar {
  height: 8px;
  xbackground: #4caf50;
  background: yellow;
  width: 0%;
}

/* Test colours

#a100 {background: yellow;}
#a101, #a102, #a103, #a104, #a105 {background: red;}

*/

/* ============================================= */
/* Grid Styles                                   */
/* ============================================= */

.boxmain {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: minmax(36px,auto);
    grid-gap:1em;
    justify-items:stretch;    
    align-items:stretch;
    overflow:hidden;       
}

.boxmain > div {
    background:#bbbbbb;
    padding:10px;
    color: blue;
}
.boxmain > div:nth-child(odd) {
    background:#0000cc;
    color: white;
}
 
.box01 {
    border:2px solid #333;
    color: blue;
    overflow: auto;
}

.box01-fixed {
    grid-column:3;
    grid-row:3;
    height: 200px;
    xalign-self:stretch;
    border:2px solid #333;
    color: red;
    overflow: auto;
}

.box02-stick {
    height: 350px;
    align-self:stretch;
    border:2px solid #333;
    color: red;
    overflow: auto;
}

.box03-wide {
    grid-column: span 2;
    border:2px solid #333;
    color: blue;
    overflow: auto;
}

.box04-nest {
    display:grid;
    border:2px solid black;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(100px,auto);
    grid-gap:1em;
    justify-items:stretch;    
    align-items:stretch;
    overflow:hidden;  
}
.box04-nest div {
    border:4px solid yellow;
    margin: 2px;
    padding: 4px;
    color: blue;
    text-align: center;
    overflow: auto;
}

/* ============================================= */
/* Grid Styles - 600 768 922 1200                */
/* ============================================= */

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

.boxmain {
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(36px,auto);
    grid-gap:1em;
    justify-items:stretch;    
    align-items:stretch;
    overflow:hidden;       
}

.box01-fixed {
    grid-column:1;
    grid-row:3;
    height: 200px;
    xalign-self:stretch;
    border:2px solid #333;
    color: red;
    overflow: auto;
}

.box03-wide {
    grid-column: span 1;
    border:2px solid #333;
    color: blue;
    overflow: auto;
}

}

/* ============================================= */
/* Main Styles                                   */
/* ============================================= */

blockquote {
   xbackground-color: blue;
   border: 6px solid yellow;
   margin: 20px;
   padding: 20px;
   xcolor: white;
   font-family: courier;
   font-size: 100%;

   xposition: relative;
   xtop:0px;
   }

section {
   xbackground-color: #ddeeff;
   padding: 20px;
}

/* ============================================= */

div.listbox {
   background-color: black;
   padding: 12px;
   color: red;
   xtext-align: center;
   font-size: 18px;
   }

/* ============================================= */

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

a:link {
  color: red; 
  background-color: transparent; 
  text-decoration: none;
}

a:visited {
  color: purple;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: blue;
  background-color: lightgrey;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

/* ============================================= */
/* Custom ID and Class Styles                    */
/* ============================================= */

#textlink {
   background-color: white;
   padding: 4px;
   margin: 10px;
   }

#imagelink {
   background-color: blue;
   padding: 10px;
   }

#topbutton {
   color: yellow;
   background-color: black;
   padding: 6px;
   }

.textbackcolor {
   background-color: lightgrey;
   color: blue;
   padding: 4px;
   margin: 10px;
   }

/* ============================================= */
/* Bottom                                        */
/* ============================================= */

#bottomfooter {
   display:block;
   background-color: rgb(100,100,150,0.6);
   width:100%;
   height:100px;
   top: 0;1   left: 0;
   z-index:2;
   content:"Copyright © 2021 Quaternionstar";
}
#bottomfooter p {
   text-align:center;
}

/* ============================================= */