/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&&family=Rubik&family=Bungee&family=Nova+Cut&family=Noto+Serif&family=Roboto+Slab:wght@100..900&display=swap" rel="stylesheet');

body, input { font-family: 'Rubik', arial, sans-serif; line-height: 1.3; }
ul li, p, em { font-size: 16px; font-style: normal; letter-spacing: -0.01em; }

/* layout */
html,body {
  margin: 0;
  padding: 0; 
  text-align: center;
  background-color: #fff;
  font-family: 'Rubik', arial, sans-serif; 
  line-height: 1.3;
  font-weight: 400;
}

header, main, menu, nav, section {
    display: block;
}



/* ---- LINKS ---- */

a { color: #006699;}
a:visited { color: #333399; }
a:hover { color: #000; }

a#back {
  padding-left: 23px;
  text-transform: uppercase;
}

a#back:hover { text-decoration: underline;}

a#back, a#back:visited {
  text-decoration: none;
}

a#back.black {
    background: url(arrow-back-black.png) no-repeat center left;
    color: #000;
}

a#back.black:visited {
    color: #000;
}

a#back.white {
    background: url(arrow-back-white.png) no-repeat center left;
    color: #fff;
}

a#back.white:visited {
    color: #fff;
}



/* ---- NAV ---- */
#navigation {
  margin: 0;
  width: 100%;
  z-index: 100;
  float: left;
  padding: 0;
  width: 100%;
  background-color: black;
  text-align: center;
}

#navigation ul {
	margin: 0 0 0 10%;	
	padding: 0;
	float: left;
}

#navigation li {
	list-style: none;
	float: left;
	margin: 0;
	text-align: center;
	font-family: 'Rubik', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 0;
}

#navigation a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	line-height: 3em;
	height: 50px;
	text-align: center;
  padding: 0 30px;
	}


#navigation li.here {
  color: #000;
  background-color: #fff;
  padding: 0 30px;
  display: block;
  line-height: 3em;
  height: 50px;
  text-transform: uppercase;
  border: 0;
  }

#navigation a:hover {
	background-color: #666;
  text-decoration: underline;
}

/*--- BG IMAGES: INDEXES--- */

a.noImage {
  border: 1px dotted #000;
}

a.noImage:hover {
  border: 1px solid #000;
}

/* ---- BREADCRUMBS ---- */
#breadcrumbs {
  margin: 0;
  width: 100%;
  float: left;
  padding: 0;
  width: 100%;
}


#breadcrumbs ul {
  margin: 0 0 0 10%;  
  padding: 0;
}

#breadcrumbs li {
  list-style: none;  
  float: left;
  margin: 0  0 0 10px;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 0;
  padding: 0 0 0 30px;
  background: url(arrow-forward-black.png) no-repeat top left;
}

#breadcrumbs.white li {
  background: url(arrow-forward-white.png) no-repeat top left;
}

#breadcrumbs a {
  text-decoration: none;
  text-transform: uppercase;
 
  }

#breadcrumbs li:first-child {
  background: none;  
    margin: 0;
    padding: 0;

}

#breadcrumbs li.here {
  color: #000;
  background-color: #fff;
  padding: 0 30px;
  display: block;
  line-height: 3em;
  height: 50px;
  text-transform: uppercase;
  border: 0;
  }

#breadcrumbs a:hover {
  text-decoration: underline;
}

/* ---- diggy-friends ---- */

a#diggy-friends {
  background-image: url(../games/diggy-friends/i/heroBackground-index.png);
  background-position: right;
  background-size: cover;
}

/* ---- street-photography ---- */

a#street-photography {
  background-image: url(../games/street-photography/i/heroBackground-index.png);
  background-position: right;
  background-size: cover;
}

/* ---- li-lo ---- */

a#li-lo {
  background-image: url(../games/li-lo/i/heroBackground-index.jpg);
  background-position: right;
  background-size: cover;
}

/* ---- the-lives-of-others ---- */

a#the-lives-of-others {
  background-image: url(../games/the-lives-of-others/i/heroBackground-index.gif);
  background-position: right;
  background-size: cover;

}

/* ---- hedgepop ---- */

a#hedgepop {
  background-image: url(../games/hedgepop/i/heroBackground-index.jpg);
  background-position: right;
  background-size: cover;

}

/* ---- drive ---- */

a#drive {
  background-image: url(../games/drive/i/heroBackground-index.jpg);
  background-position: right;
  background-size: cover;

}

/* ---- photo ---- */

a#cyberpunk {
  background: #fff url('../images/cyberpunk/i/homeBackground.jpg') no-repeat right;
  background-position: center;
}

a#primekamin {
  background: #fff url('../images/primekamin/i/homeBackground.jpg') no-repeat right;
  background-position: center;
}

a#fire-in-the-sky {
  background: #fff url('../images/fire-in-the-sky/i/homeBackground.jpg') no-repeat right;
  background-position: center;
}

a#wow-glitches {
  background: #fff url('../images/wow-glitches/i/homeBackground.png') no-repeat right;
  background-position: center;
}

a#cathode-dreams {
  background: #fff url('../images/cathode-dreams/i/homeBackground.jpg') no-repeat right;
  background-position: center;
}


/* --------- INNER PAGES --------- */

#heroImage {
  background-position: right;
  background-size: cover;
  height: 350px;
  position: relative;
  left: 0%;
  overflow: hidden;
  text-align: left;
  margin: 0 0 20px 0;
  float: left;
  width: 100%;
}


.display-container {
  position: relative;
  left: 0%;
  overflow: hidden;
  min-height: 100%;
  height: 100%;
  text-align: left;
  padding: 20px 10%;
}

.leftColumn {
  float: left;
  width: 49%;
  margin-right: 1%;
  margin-top: .5em;
}

.rightColumn {
  float: right;
  width: 49%;
  margin-left: 1%;
  margin-top: .5em;

}

.leftColumn p, .rightColumn p {
  font-family:'Rubik', sans-serif; 
  color: #333; 
  font-size: 1.1em; 
  line-height: 1.6em;
  padding: 0 .5% 0 .5%; 
  max-width: 700px;
  margin: 0;
}

.leftColumn img, .rightColumn img {
  width: 100%;
  max-width: 100%;
}

.sectionText { 
  font-family:'Rubik', sans-serif; 
  color: #fff; 
  font-size: 1.2em; 
  line-height: 1.6em;
  margin: 0 0 20px 0; 
  max-width: 700px;
}

.sectionText.blackFont { color: #000; }

.thumbnail img {
	width: 100px;
	height: 100px;
}

/* --- FOOTER --- */

#footer {
  border-top: 1px solid #000;
}

#footer ul {
  list-style: none;
  margin: 2% 0;
  padding: 0;
}

 #footer li {
  font-size: .8em;
  line-height: 1.8em;
}


.notes {
	font-size: .9em;
}

/* --- MEDIA QUERIES --- */
/* https://blog.logrocket.com/css-breakpoints-responsive-design/ */
@media only screen and (max-width: 640px) {
  	
#navigation li.here {
  padding: 0;
  }


  	#heroImage { 
  		height: 180px; 
  	}
  	
    #navigation a {
      padding: 0;
    }

  	#navigation ul {
  		padding: 0; 
      margin: 0;
      width: 100%;
  	}
	
	#heroTitle { 
		margin-top: 0; 
	}
	
	.display-container { 
		padding: 10px; 
    margin: 25px 0; 
	}
	
	.leftColumn {
  float: left;
  width: 100%;
  margin-right: 0;
}

.rightColumn {
  float: left;
  width: 100%;
  margin-left: 0;
}
}
@media only screen and (min-width: 768px) {

}
@media only screen and (min-width: 1024px) {

.display-container {
  padding: 20px 10%;
}
}
@media only screen and (min-width: 1280px) {
.display-container {
  padding: 20px 10%;
}
}