/*
Theme colors: https://coolors.co/330036-38182f-2f394d-56666b-eee1b3
*/
:root {
--charcoal: #2F394D;
--stormcloud: #56666B;
--wheat: #EEE1B3;
--darkpurple: #38182F;
}

li {
  padding: 10px;
}

/* header */
.header {
  height: 600px;
  width: 100%;
  margin-bottom: 40px;
  color: #38182F;
  background-color: #fff;
  opacity: 0.9;
  position: relative;
  text-align: center;
  top: 20%;
  box-shadow: 0px 5px 20px black;
}
.headertext{
  position: absolute;
  top: 150px;
  left: 0px;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: white;
  opacity: 0.95;
  box-shadow: 0px 5px 20px black;
}
.headertext h1{
  font-size: 5em;
}
.headerbg {
  position: inherit;
  top: 0px;
  height: 100%;
  /*width: 100%;*/
  background-image: url('./../../img/gameData.png');
}

/* scroll to top button */
#scrollToTopButton {
  display: none;
  width:40px;
  height:40px;
  border-radius: 25px;
  background-color: steelblue;
  position: fixed;
  bottom: 25px;
  right: 25px;
  box-shadow: 0px 5px 20px black;
}

#scrollToTopButton:hover {
  background-color: #91b6d4;
}

#current_datasets {
  box-shadow: 0px -5px 20px black;
  margin-top: 50px;
}

.snippet {
  display: none;
  padding: 15px;
  width: 50%;
  /*max-width: 600px;*/
  margin: 0 auto;
  margin-top: 15px;
  overflow: scroll;
  background-color: white;
  text-align: left;
  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

.dataset > div {
  margin: 15px;
}


.dataExampleButton {
  background-color: steelblue;
  color: white;
  -moz-box-shadow:     0 1px 2px #000000;
  -webkit-box-shadow:  0 1px 2px #000000;
  box-shadow:          0 1px 2px #000000;
}

.dataExampleButton:hover  {
  color: white;
  -moz-box-shadow:     0 0px 0px #000000;
  -webkit-box-shadow:  0 0px 0px #000000;
  box-shadow:          0 0px 0px #000000;
}
.dataExampleButton:active {
  color: white;
}
.dataExampleButton:focus {
  color: white;
}


.center-icon {
  position: relative;
  color: #fff;
  left: 33%;
  top: 20%;
}

/* centered columns styles */
.centered {
    text-align:center;
}
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}
.col-fixed {
    /* custom width */
    width:320px;
}
.col-min {
    /* custom min width */
    min-width:320px;
}
.col-max {
    /* custom max width */
    max-width:320px;
}

/* visual styles */
body {
    padding-bottom:40px;
}
h1 {
    margin:20px 0px 20px 0px;
    text-align:center;
}
[class*="col-"] {
    padding-top:10px;
    padding-bottom:15px;
    vertical-align: top;
    font-size:16px;
}
[class*="col-"]:before {
    display:block;position:relative;
    margin-bottom:8px;
    font-family:sans-serif;
    font-size:16px;
    letter-spacing:1px;
    text-align:left;
}
.item {
    width:100%;
    height:100%;
    /*border-bottom-color: #EEE1B3;*/
    padding:16px 8px 16px;
    background:#f4f4f4;
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .5);
    background:-webkit-gradient(linear, left top, left bottom,color-stop(80%, #f4f4f4), color-stop(100%, lightgrey));
    background:-moz-linear-gradient(top, #f4f4f4 80%, lightgrey 100%);
    background:-ms-linear-gradient(top, #f4f4f4 80%, lightgrey 100%);
}

p.lead {
  font-size: 40px;
}

/* content styles */
.item {
	display:table;
}
.content {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
  line-height:180%;
}
.content:before {
    font-family:sans-serif;
    font-size:16px;
    letter-spacing:1px;
    /*color:#56666B;*/
}


/* centering styles for jsbin */
html,
body {
  width:100%;
  height:100%;
  background-color: #fff;
  color: #38182F;
  overflow-x: hidden;
}
html {
    display:table;
}
body {
    /* display:table-cell; */
    vertical-align:middle;
}