/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*Main style sheet*/
:root {
    --lightgray: WhiteSmoke;
    --darkgray: Gainsboro;
}

html {
    background-image: url(../img/background/2x4brick2.gif), -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255,0,0,0)));
    background-image: url(../img/background/2x4brick2.gif), -o-linear-gradient(white, rgba(255,0,0,0));
    background-image: url(../img/background/2x4brick2.gif), linear-gradient(white, rgba(255,0,0,0));
    background-size: 45px 80px;
    background-blend-mode: multiply;
}
/*Collection colour*/
.red {
    background-color: rgba(255,0,0,.1);
}
/*History colour*/
.yellow {
    background-color: rgba(255,255,0,.1);
}
/*Shop colour*/
.blue {
    background-color: rgba(0,0,255,.1);
}
body {
    font-family: Arial, sans-serif;
	min-height: 100vh;
    width: 80vw;
    max-width: 1000px;
	margin: 0 auto;
	-webkit-box-shadow: -10px 0px 20px 5px rgba(0, 0, 0, 0.2), 10px 0px 20px 5px rgba(0, 0, 0, 0.2);
	        box-shadow: -10px 0px 20px 5px rgba(0, 0, 0, 0.2), 10px 0px 20px 5px rgba(0, 0, 0, 0.2);
}

.headermenu {
	background-color: var(--lightgray);
	-webkit-box-shadow: 0 50px 0px 0 rgba(0, 0, 0, 0.25);
	        box-shadow: 0 50px 0px 0 rgba(0, 0, 0, 0.25);
	/*border-radius: 0px 0px 25px 25px;*/
}

#trlogo {
	max-width: 270px;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
	margin-top: auto;
	margin-bottom: auto;
}

#trlogo a {
    font-size: 2em;
    font-weight: bold;
	text-decoration: none;
	color: black;
}

nav {
	
}

footer {
	background-color: var(--darkgray);
	padding: 5px;
	padding-left: 10px;
	margin-top: 10px;
	border-radius: 25px 25px 0px 0px;
	/*background-image: url(../img/other/bricksbackground.png);
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: 60vh;*/
}
main {
	 clear: left;
	 padding: 15px;
	 background-color: var(--lightgray);
	 border-radius: 25px;
	 margin-top: 10px;
	 min-height: 67vh;
	 -webkit-box-shadow: 0 50px 0px 0 rgba(0, 0, 0, 0.25);
	         box-shadow: 0 50px 0px 0 rgba(0, 0, 0, 0.25);
}
section {
    line-height: 1.6;
}
.articlesection {
    clear: both;
}
article {
    overflow: auto;
}
.articleimg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    float: right;
    clear: right;
    margin-right: 1vw;
    margin-left: 2vw;
    margin-bottom: 5px;
    max-width: 30vw;
    background-color: var(--darkgray);
}
.articleimg img {
    width: 100%;
}
.articleimg p {
    margin: 0;
    padding: 0px 5px 5px 5px;
}
.articleimgfull {
    width: 80vw;
    max-width: 900px;
    margin: auto;
    text-align: center;
    overflow: auto;
}
.articleimgfull img {
    width: 50%;
    max-width: 850px;
}
.articleimgfull p {
    margin: 0;
    padding: 0px 5px 5px 5px;
}
.funfact {
    background-color: lightpink;
    border-radius: 25px;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.funfact p {
    margin: 0;
}

/*Menu*/
.headermenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.ulmenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--lightgray);
  /*border-radius: 0px 0px 25px 0px;*/
}

.limenu {
  float: left;
  font-size: 130%;
  font-weight: bold;
  cursor: pointer;
  min-width: 80px;
}

.limenu a {
  display: block;
  color: black;
  text-align: center;
  text-decoration: none;
  height: 100%;
  padding: 30px 13px 30px 13px;
}

.limenu a:hover:not(.active) {
  background-color: var(--darkgray);
}

.active {
  background-color: var(--darkgray);
}

/*Menu small*/

.ulmenusmall {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--lightgray);
  border-style: solid none none none;
  -webkit-box-shadow: 0 50px 0px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 50px 0px 0 rgba(0, 0, 0, 0.25);
}

.limenusmall {
  float: left;
  font-size: 130%;
  font-weight: bold;
  max-width: 160px;
  min-width: 120px;
}

.limenusmall a {
  display: block;
  color: black;
  text-align: center;
  padding: 5px 15px;
  text-decoration: none;
  cursor: pointer;
}

.limenusmall a:hover:not(.active) {
  background-color: var(--darkgray);
}

.limenusmall img {
    height: 100%;
    float: right;
}

.active {
  background-color: var(--darkgray);
}

/* Shop styling */

.mainshop {
	padding-top: 10px;
	height: 100%;
}
#shopcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: 100%;
}

#shoppinginformation {
    display: inline-block;
}

.column {
	display: inline-block;
	position: relative;
	max-width: 300px;
	width: 22vw;
	margin: 10px;
	border-radius: 20px;
	background-color: white;
	-webkit-box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
	        box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.column img {
	width: 100%;
	border-radius: 20px 20px 0px 0px;
}

.itemtext {
    max-height: 110px;
    overflow: auto;
}

.shopiteminfo {
	padding-left: 10px;
	padding-right: 10px;
}

.shopiteminfo h3{
	margin-bottom: 0;
}

.shopiteminfo p{
	padding-top: 0 !important;
}

.itemcategories {
	padding-top: 0 !important;
    margin-bottom: 0;
}

.itemcategories p{
	display: inline-block;
	margin-right: 10px;
	background-color: var(--lightgray);
	margin-bottom: 0;
	font-weight: bold;
	cursor: pointer;
	border-radius: 5px;
	padding: 2px;
}

.itemcategories p:hover{
	background-color: var(--darkgray);
}

.psold {
    position: absolute;
    text-align: center;
    top: 8vw;
    font-size: 250%;
    background: rgba(0, 128, 0, 0.3);
    width: 100%;
    margin: 0;
}

/* popup */

#divpopup{
position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 50%;
	max-width: 600px;
  z-index: 1;
}

#divpopup img {
	max-width: 100%;
}

.buttonclose {
	position: fixed;
	z-index: 2;
	right: 1%;
	width: 30px;
	height: 30px;
}
@-webkit-keyframes cartalertshow {
  0% {opacity: 0; width: 30%;}
  60% {opacity: 1; width: 100%;}
  100% {opacity: 0; width: 30%;}
}
@keyframes cartalertshow {
  0% {opacity: 0; width: 30%;}
  60% {opacity: 1; width: 100%;}
  100% {opacity: 0; width: 30%;}
}
#cartalert {
    left: 0;
    display: none;
    background-color: #00cc66;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
    -webkit-animation-name: cartalertshow;
            animation-name: cartalertshow;
    -webkit-animation-duration: 3.1s;
            animation-duration: 3.1s;
    overflow: visible;
}
#cartalert h3 {
    padding-left: 20px;
}
@-webkit-keyframes makesgreen {
    50% {background-color: #00cc66;}
  100% {background-color: white;}
}
@keyframes makesgreen {
    50% {background-color: #00cc66;}
  100% {background-color: white;}
}
.makegreen {
    -webkit-animation-name: makesgreen;
            animation-name: makesgreen;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
}
#shoppingcartsymbol {
    cursor: pointer;
    background-color: white;
    max-width: 100px;
    max-height: 100px;
    width: 20vw;
    height: 20vw;
    position: fixed;
    bottom: 5px;
    right: 5px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 2px solid black;
    -webkit-box-shadow: -5px 0px 10px 5px rgba(0, 0, 0, 0.1), 5px 0px 10px 5px rgba(0, 0, 0, 0.1);
            box-shadow: -5px 0px 10px 5px rgba(0, 0, 0, 0.1), 5px 0px 10px 5px rgba(0, 0, 0, 0.1);
}
#shoppingcartsymbol:hover {
    background-color: var(--darkgray);
}
#shoppingcartsymbol img {
    width: 75%;
}
.sharelink {
    float: right;
}
.sharelinkarticle {
    
}
.buttonbuy {
    margin-left: 5px;
    cursor: pointer;
}

/* Dropdown menu */

.dropdown-content {
  display: none;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: absolute;
  background-color: var(--lightgray);
  min-width: 120px;
  max-width: 1000px;
  width: 80vw;
  overflow: auto;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.dropdown-content a:hover {
    background-color: var(--darkgray);
}
@-webkit-keyframes showing {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes showing {
  from {opacity: 0;}
  to {opacity: 1;}
}
.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation-name: showing;
            animation-name: showing;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
}

.showshop {
    -webkit-animation-name: showing;
            animation-name: showing;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
}

#shoppingcart {
	background-color: white;
	-webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 50%;
	max-height: 90%;
	max-width: 600px;
	z-index: 2;
	padding: 10px;
	display: none;
}

#noclickback {
	position:fixed;
    padding:0;
    margin:0;
	display: none;
    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.6);
	pointer-events: auto;
	z-index: 1;
}

#shoppinghelp {
    height: 50vh;
	display: none;
	margin-top: 0;
	overflow: auto;
}

#cartitems {
	height: 50vh;
	overflow: auto;
}

.cartitem {
	display: inline-block;
	margin-bottom: 5px;
	border-bottom: 1px solid black;
	padding-bottom: 5px;
	width: 100%;
}

.cartitem h4{
	margin-top: 0px;
}

.cartitemimg {
	float: left;
	max-width: 100px;
	max-height:100px;
	padding-right: 20px;
}

#btnorder {
	margin-top: 10px;
}
#orderform {
	background-color: white;
	-webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
	z-index: 3;
	padding: 10px;
	display: none;
}

/* History section */

.historysection {
    max-width: 100%;
    width: 80vw;
}

#historymain {
    display: inline-block;
}

.flexgallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.flexgallery a{
    width: 25vw;
    max-width: 300px;
}
.flexgallery img {
    width: 25vw;
    max-width: 300px;
}
.flexgalleryimg {
    display: block;
    width: 100%;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    -o-transition: transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}
.flexgalleryimg:hover {
    opacity: 0.75;
    
}
.flexgallery a:hover {
    z-index: 2;
}

/* Quiz */
#quiz {
    margin: auto;
}

#quizcontainer {
    margin: auto;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--darkgray);
    border-radius: 20px;
    -webkit-box-shadow: -5px 0px 10px 5px rgba(0, 0, 0, 0.2) inset, 5px 0px 10px 5px rgba(0, 0, 0, 0.2) inset;
            box-shadow: -5px 0px 10px 5px rgba(0, 0, 0, 0.2) inset, 5px 0px 10px 5px rgba(0, 0, 0, 0.2) inset;
}
#quizoptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.quizoption {
    width: 35vw;
    max-width: 450px;
    min-height: 50px;
    background-color: var(--lightgray);
    border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
    margin: 2px;
}
.quizoption:hover {
    background-color: var(--darkgray);
}
#quizquestion {
    max-width: 80%;
    margin: auto;
}
#quiznext {
    min-height: 40px;
}
#quizpicture {
    display: none;
    width: 30%;
    margin: auto;
}
#quizimgextra {
    max-width: 75%;
}
@-webkit-keyframes blinkred {
  50% {background-color: lightPink;}
  100% {background-color: var(--darkgray);}
}
@keyframes blinkred {
  50% {background-color: lightPink;}
  100% {background-color: var(--darkgray);}
}
.wrong {
    -webkit-animation-name: blinkred;
            animation-name: blinkred;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
}
@-webkit-keyframes blinkgreen {
  50% {background-color: lightGreen;}
  100% {background-color: var(--darkgray);}
}
@keyframes blinkgreen {
  50% {background-color: lightGreen;}
  100% {background-color: var(--darkgray);}
}
.right {
    -webkit-animation-name: blinkgreen;
            animation-name: blinkgreen;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
}

/* Minesweeper Game */
#minetable {
	width: 100%;
	height: 100%
}

td {
	width: 10%;
	text-align: center;
	min-width: 25px;
	min-height: 25px;
	color: whitesmoke;
	-webkit-box-shadow: -2px -2px 5px 2px rgba(0, 0, 0, 0.2) inset, 2px 2px 5px 2px rgba(0, 0, 0, 0.2) inset;
	        box-shadow: -2px -2px 5px 2px rgba(0, 0, 0, 0.2) inset, 2px 2px 5px 2px rgba(0, 0, 0, 0.2) inset;
}

td:hover {
	cursor: pointer;
}

tr {
	height: 10%;
}

.bomb {
	background-color: red;
	border: red;
	-webkit-animation-name: blow;
	        animation-name: blow;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
.bomb:hover {
	cursor: default;
}
@-webkit-keyframes blow {
  0%  {background-color: whitesmoke;}
  40%   {background-color: red;}
  70%   {background-color: whitesmoke;}
  100%   {background-color: red;}
}
@keyframes blow {
  0%  {background-color: whitesmoke;}
  40%   {background-color: red;}
  70%   {background-color: whitesmoke;}
  100%   {background-color: red;}
}
.blown {
	cursor: default;
	background-color: red;
	border: red;
}

.zero {
	background-color: blue;
	border: blue;
	color: blue;
}
.zero:hover {
	cursor: default;
}

.one {
	background-color: green;
	border: Green;
}
.one:hover {
	cursor: default;
}

.two {
	background-color: SlateBlue;
	border: SlateBlue;
}
.two:hover {
	cursor: default;
}

.three {
	background-color: darkcyan;
	border: darkcyan;
}
.three:hover {
	cursor: default;
}

.four {
	background-color: orange;
	border: lightgray;
}
.four:hover {
	cursor: default;
}

.more {
	background-color: violet;
	border: violet;
}
.more:hover {
	cursor: default;
}

.secret {
	background-color: whitesmoke;
}
.secret:hover {
	background-color: gainsboro;
	color: gainsboro;
}
.flagged {
	background-color: red;
	color: red;
}
#divmine {
	width: 30vw;
	height: 30vw;
	min-width: 300px;
	min-height: 300px;
}

@media (max-width: 860px) {
nav {
    width: 100vw;
}

body {
    margin-left: 0vw;
    margin-right: 0vw;
    width: 100%;
}
main {
    margin: 10px;
    margin-left: 4vw;
    margin-right: 4vw;
    /*box-shadow: -5px 4px 20px 0 rgba(0, 0, 0, 0.2), 5px 5px 20px 0 rgba(0, 0, 0, 0.19);*/
    -webkit-box-shadow: -4px -4px 4px 0 rgba(0, 0, 0, 0.2) inset, 4px 4px 4px 0 rgba(0, 0, 0, 0.2) inset;
            box-shadow: -4px -4px 4px 0 rgba(0, 0, 0, 0.2) inset, 4px 4px 4px 0 rgba(0, 0, 0, 0.2) inset;
}
    
footer {
    border-radius: 0;
}
.column {
	width: 38vw;
}
.headermenu {
	border-radius: 0px;
	-webkit-box-shadow: 0 0 0 0;
	        box-shadow: 0 0 0 0;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.ulmenu {
	border-radius: 0px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.limenu {
    width: 25%;
    min-width: 75px;
    
}

.limenu a {
  padding: 30px 3px;
}
#trlogo {
    width: 100vw;
}
#trlogo {
    margin: 0;
	max-width: 100vw;
	max-height: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

.ulmenusmall {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-shadow: 0 0 0 0;
            box-shadow: 0 0 0 0;
}
.limenusmall {
  min-width: 120px;
}
.limenusmall a {
    padding: 5px 5px;
}
.dropdown-content {
    width: 100%;
}

.psold {
    top: 16vw;
    font-size: 200%;
}
#shoptitle {
    text-align: center;
}
#shopcontainer {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.flexgallery a{
    width: 40vw;
}
.flexgallery img{
    width: 40vw;
}

.quizoption {
    width: 75vw;
    max-width: 100vw;
}

#quizpicture {
    width: 50%;
}

.articleimg {
    margin-right: 0vw;
    margin-left: 2vw;
    max-width: 40vw;
}
.articleimgfull img {
    width: 60%;
}

.historysection {
    width: 100%;
}

}

@media (max-width: 575px) {
#trlogo {
	float: none;
	text-align: center;
	margin: auto;
}
header {
	background-color: transparent;
}
.column {
	max-width: 100%;
	width: 80vw;
}
#divpopup{
    width: 80%;
	max-width: 600px;

}
#shoppingcart {
	width: 75%;
}

.limenu {
    width: auto;
    min-width: 0px;
}

.limenu a {
  padding: 10px 5px;
}
.limenusmall {
  min-width: 60px;
  max-width: 150px;
  width: auto;
}
.limenusmall a {
    padding: 5px 10px;
}

.psold {
    top: 30vw;
    font-size: 250%;
}
.flexgallery a{
    width: 75vw;
}
.flexgallery img{
    width: 75vw;
}
.articleimg {
    margin: 0;
    float: none;
    max-width: 80vw;
    width: auto;
    -ms-flex-line-pack: center;
        align-content: center;
}
.articleimg img {
    max-width: 80vw;
    width: auto;
}
.articleimg p {
    max-width: 80vw;
}
.articleimgfull img {
    width: 100%;
}

#quiz {
    width: 80vw;
}

#quizpicture {
    width: 60%;
}
}