Twine CSS

gistfile1.txt

/* My Harelowe Game Styles */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,600');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,700');

html, tw-story {
  background-color: #F2F2F2;
  color: #242424;
}

tw-sidebar {
    display: none;
}

.gamestage {
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}

tw-story {
  font: 1.2em/1.2 Roboto Mono, monospace;
  font-weight: 200;
  padding: 0 0;
}

tw-link, 
tw-link:hover,
.enchantment-link,
.enchantment-link:hover,
.visited,
.visited:hover {
  font-weight: 200;
  transition: none;
  color: #242424;
  text-decoration: underline;
}

.time {
  background-color: #FFDC00;
  border-radius: 100%;
  padding: 5px 11px;
}

h1 {
  font-size: 2em;
  line-height: 1.2em;
}

h2 {
  font-size: 1.7em;
  line-height: 1.2em;
}

h3 {
  font-size: 1.5em;
  line-height: 1.2em;
}

h1,
h2,
h3 {
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
}

img {
  width: 100%;
  /* object-fit: cover; */
  /* height: 50vh; */
}

li {
  padding: 10px 0;
}

hr {
  border: 1px solid;
  color: #D8D8D8;
}

/* VIDEO EMBED */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin-bottom: 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.sd {
	padding-bottom: 75%;
}

.sq {
	padding-bottom: 100%;
}

.vt {
	padding-bottom: 178%;
}

/* Portrait */
@media only screen 
  and (orientation: portrait) { 
	img {
	  /* height: 30vh; */
	}
}

/* Landscape */
@media only screen 
  and (orientation: landscape) { 
	.gamestage {
	  max-width: 800px;
	}
}

@media (prefers-color-scheme: dark){
  html, tw-story {
	background-color: #242424;
	color: #F2F2F2;
  }
  tw-link, 
  tw-link:hover,
  .enchantment-link,
  .enchantment-link:hover,
  .visited,
  .visited:hover {
	color: #F2F2F2;
  }
  hr {
	color: #3A3A3A;
  }
  .time {
	color: #242424;
  }
}