/* Font and background for entire page. Default font color and background color. They should match colors for pic1 below */
body {
	font-family: 'Raleway', sans-serif;
	font-size: 15pt;
	background-color:   #C3B780;
	color:              #555930;
	transition: background-color 1s ease;
}

/* default SVG fill. Should match SVG color for pic1 below */
svg {
    fill:               #555930;
}

img {
    border-color:       #615133;
}

/* Panel class drives background, font, and SVG color change, via javascript. Justify and align properties center images */
.panel {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* Color schemes: ".color-*" class defines background color and font color. ".fill-*" class defines SVG fill, and should match corresponding font color. */

/* Colors for pic1 */
.color-pic1 {
    background-color:   #C3B780;
    color:              #555930;
}
.fill-pic1 {
    fill:               #555930;
    transition: fill 1s ease;
}
.border-color-pic1 {
    border-color:       #555930;
}

/* Colors for pic2 */
.color-pic2 {
  background-color:     #C69B95;
  color:                #7D3F4F;
}
.fill-pic2 {
    fill:               #7D3F4F;
    transition: fill 1s ease;
}
.border-color-pic2 {
    border-color:       #7D3F4F;
}

/* Colors for pic3 */
.color-pic3 {
  background-color:     #BC8F9E;
  color:                #6D3B56;
}
.fill-pic3 {
    fill:               #6D3B56;
    transition: fill 1s ease;
}
.border-color-pic3 {
    border-color:       #6D3B56;
}

/* Colors for pic4 */
.color-pic4 {
  background-color:     #E2B092;
  color:                #864F32;
}
.fill-pic4 {
    fill:               #864F32;
    transition: fill 1s ease;
}
.border-color-pic4 {
    border-color:       #864F32;
}

/* Colors for pic5 */
.color-pic5 {
  background-color:     #EFA87B;
  color:                #9A4B16;
}
.fill-pic5 {
    fill:               #9A4B16;
    transition: fill 1s ease;
}
.border-color-pic5 {
    border-color:       #9A4B16;
}

/* Colors for pic6 */
.color-pic6 {
  background-color:     #ABA169;
  color:                #5C5324;
}
.fill-pic6 {
    fill:               #5C5324;
    transition: fill 1s ease;
}
.border-color-pic6 {
    border-color:       #5C5324;
}

/* Colors for pic7 */
.color-pic7 {
  background-color:     #B28F7B;
  color:                #604334;
}
.fill-pic7 {
    fill:               #604334;
    transition: fill 1s ease;
}
.border-color-pic7 {
    border-color:       #604334;
}

/* Colors for pic8 */
.color-pic8 {
  background-color:     #D7A27E;
  color:                #7F4F31;
}
.fill-pic8 {
    fill:               #7F4F31;
    transition: fill 1s ease;
}
.border-color-pic8 {
    border-color:       #7F4F31;
}

/* Colors for pic9 */
.color-pic9 {
  background-color:     #97B3B4;
  color:                #3D656C;
}
.fill-pic9 {
    fill:               #3D656C;
    transition: fill 1s ease;
}

.border-color-pic9 {
    border-color:       #3D656C;
}

/* Colors for pic10 */
.color-pic10 {
  background-color:     #97B58C;
  color:                #3F5F35;
}
.fill-pic10 {
    fill:               #3F5F35;
    transition: fill 1s ease;
}
.border-color-pic10 {
    border-color:       #3F5F35;
}

/* Colors for pic11 */
.color-pic11 {
  background-color:     #8DBB81;
  color:                #446827;
}
.fill-pic11 {
    fill:               #446827;
    transition: fill 1s ease;
}
.border-color-pic11 {
    border-color:       #446827;
}

/* Colors for pic12 */
.color-pic12 {
  background-color:     #B8A484;
  color:                #704F33;
}
.fill-pic12 {
    fill:               #704F33;
    transition: fill 1s ease;
}
.border-color-pic12 {
    border-color:       #704F33;
}

/* Colors for games */
.color-picGM {
    background-color:   #B9A388;
    color:              #615133;
}
.fill-picGM {
    fill:               #615133;
    transition: fill 1s ease;
}

.border-color-picGM {
    border-color:       #615133;
}

/* Colors for fine art */
.color-picFA {
  background-color:     #40463a;
  color:                #b6b071;
}
.fill-picFA {
    fill:               #b6b071;
    transition: fill 1s ease;
}
.border-color-picFA {
    border-color:       #b6b071;
}

/* Colors for Sand Crab */
.color-picSC {
  background-color:     #E5D2C2;
  color:                #864F32;
}
.fill-picSC {
    fill:               #864F32;
    transition: fill 1s ease;
}
.border-color-picSC {
    border-color:       #864F32;
}

/* Colors for Wooden Knight */
.color-picWK {
  background-color:     #DFECDE;
  color:                #555930;
}
.fill-picWK {
    fill:               #555930;
    transition: fill 1s ease;
}
.border-color-picWK {
    border-color:       #555930;
}

/* space for additional color schemes */

/* Padding and border are included in the total width and height */
* {
  box-sizing: border-box;
}

/* Clearing flow after row */
.row::after {
	content: "";
	clear: both;
	display: table;
}

/* Global column properties */
[class*="col-"] {
  float: left;
  padding: 10px;
  ;
}

/* Columns for mobile */
    .left-container {width: 100%; float: left; padding-bottom: 0;}
    .right-container {width: 100%; float: left; padding-top: 0;}
    
    .col-logo {width: 100%;}
    .col-padder {display: none;}
    
    .col-menu {width: 100%; padding-top: 0px; padding-bottom: 0;}
    .col-menu-circle {width: 25%; padding: 2%;}
    
    .col-thumb {width: 16.66%; padding: 2px;}
    .col-thumb-games {width: 16.66%; padding: 2px;}
    .col-thumb-fineart {width: 16.66%; padding: 1%;}
    .col-thumb-spacer1 {width: 16.66%; padding: 2px;} /* Thumb spacers for Mars thumbnails on game page */
    .col-thumb-spacer2 {display: none;}
    
    .col-copyright-mobile {width: 100%; text-align: center; font-size: 10pt;}
    .col-copyright-desktop {display: none;}     /* Makes desktop copyright invisible when small browser */
    .col-copyright-special {width: 100%; font-size: 11pt;} /* For Transcendent copyright */
    
    .col-content {width: 100%;}
    .col-img {width: 100%;}
    .col-fineart-title {width: 100%; padding: 0px; padding-top: 1vh;}
    
    .col-desc {width: 50%; padding-top: 0; padding-bottom: 60px; text-align: left;}
    .col-links {width: 50%; padding-top: 0; padding-bottom: 60px; text-align: right;}
    
    html {scroll-behavior: smooth;}
    
    .fineart-desc {margin-left: 2%;}

/* Columns for tablet */
@media only screen and (min-width: 600px) {
    .col-logo {width: 60%;}
    .col-padder {display: block; width: 20%;}  /* Padder div makes logo and menu smaller when in intermediate window */
    
    .col-menu-circle {width: 15%; padding: 2%;}
        .kos-link {width: 450px; margin: auto;}
}

/* Columns for desktop */
@media only screen and (min-width: 900px) {
	.left-container {width: 20%; float: left; position:fixed}      /* Makes left container not scroll when right container is scrolled */
	.right-container {width: 80%; float: left; margin-left: 20%;}
	
	.col-logo {width: 100%;}
	.col-padder {display: none;}
	
	.col-menu-circle {width: 25%; padding: 2%;}
	
	.col-thumb {width: 33.33%; padding: 2%;}
	.col-thumb-games {width: 25%; padding: 1%;}
	.col-thumb-fineart {width: 20%; padding: 1%;}
	.col-thumb-spacer1 {display:none;}  /* Thumb spacers for Mars thumbnails on game page */
    .col-thumb-spacer2 {display: block; width: 25%; padding: 1%;}
	
	.col-copyright-mobile {display: none;}                  /* Makes mobile copyright invisible when large browser */
    .col-copyright-desktop {display: block; width: 100%; text-align: center; font-size: 10pt;}   /* Makes desktop copyright visible when large browser */
    .col-copyright-special {width: 15%;} /* For Transcendent copyright */
    
    .col-img {width: 75%; padding: 0px; padding-top: 1vh; min-height: 100vh;}
    .col-fineart-title {width: 75%; padding: 0px; padding-top: 1vh;}
    
    .col-desc {width: 25%; margin-top: 20%; padding-bottom: 30px; text-align: left;}
    .col-links {width: 25%; text-align: left;}
    
    .toplink {display: none;}
    
    html {scroll-behavior: auto;}
    
    .fineart-desc {margin-left: 10%;}
    .kos-link {position: fixed; bottom: 0; right: 10px; width: 300px;}
}

/* Images fit browser window */
img {
    max-width: 100%;
    max-height: 97vh;
    height: auto;
}

/* Makes links change opacity on mouseover */
a {
	-webkit-transition: opacity 0.3s;
  	-moz-transition: opacity 0.3s;
  	-ms-transition: opacity 0.3s;
  	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

a:hover {
	opacity: 0.5;
    	filter: alpha(opacity=50); /* For IE8 and earlier */
}

.active:hover {
    opacity: 1;
        filter: alpha(opacity=100); /* For IE8 and earlier */
}

/* Permalink and detail link style */
.desclink {
    font-size: 11pt;
    font-variant: small-caps;
    font-weight: bold;
    color: inherit;
    text-decoration: none;
}