html{
  scroll-behavior: smooth;
}

body{
  font-family:  'Barlow','Roboto','Source Sans Pro','Open Sans','Lato',Helvetica, Arial, sans-serif;
  font-size:100%;
  /*margin:0;
  padding:0;*/
  background: rgb(0,8,34);
  background: linear-gradient(90deg, rgba(0,8,34,1) 10%, rgba(0,0,0,1) 50%, rgba(0,8,34,1) 90%);
  overflow-x: hidden; 
}



.headerdiv{
  overflow: hidden;
  position:relative;
  background-color:rgba(0, 110, 255, 0.247);
  padding: 1.3rem 0;
  margin-bottom: 1.3rem;
  margin-top: 0.6rem;
  margin-left: 0.0rem;
  margin-right: 0.0rem;
  border-width:1px;
  border-style:solid;
  border-color:rgb(0, 153, 255);
  box-shadow: 0 2px 5px 0 rgb(0, 153, 255, 0.26),0 2px 10px 0 rgb(0, 153, 255, 0.22);  
}

.homebutton{
    float:left;
    margin-left:10px;
  }

  .homebutton:hover {
    background-color: rgba(0, 110, 255, 0.247); /* Add a dark-grey background on hover */
    
  }

img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding:1.2rem 10px;
    max-width:80vw;
}

.title{
  float:left;
  color: rgb(174, 216, 255);
  text-shadow: 0 0 0.6rem rgb(174, 216, 255, 0.5);
  padding:1.2rem 0;
  margin-left:10px;
  /*font: 400 15px/1.8 sans-serif;*/
  /*font-family: 'Electrolize', sans-serif;*/
  font-size:1.9rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.search-container {
  float: right;
  padding: 1.2rem 0;
  font-size:1rem;
}

.search-container input[type=text] {
  padding: 0.4rem;
  margin-top: 0;
  margin-left: 0;
  font-size: 1em;
  border: none;
  color:rgb(174, 216, 255);
  background: rgba(0, 110, 255, 0.347);
}

.search-container input[type=text]:focus, textarea:focus{
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}


.button-container{
  float: right;
}


.search-container button {
  padding: 0.4rem 0.6rem;
  margin-top: 0;
  margin-right: 1rem;
  background: rgba(0, 110, 255, 0.347);
  font-size: 1em;
  border: none;
  cursor: pointer;
  color:rgb(174, 216, 255);
}


.search-container button:hover {
  background:  rgb(174, 216, 255);
  color:rgba(0, 110, 255, 1.0);
}
  

 
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /*html { font-size: 1.5rem}*/
  
  .search-container, .search-container input[type=text], .button-container, .button-container button{
    float: none;
    display: block;
    width:100%;
    text-align:center;
  }
  /*
  .title{
    font-size:3rem;
  }

  .search-container{
    font-size:2rem;
  }
  */
  .button-container button, .search-container input[type=text]{
    border: 1px solid #000;
  }
  
  
}



.csl-entry{
  padding:1.3rem;
  font-size:1.2rem;
  line-height: 1.5;
  background-color: rgba(0, 110, 255, 0.147);
  color:rgb(174, 216, 255);    
}

.csl-entry:nth-child(even){
  background-color: rgba(0, 110, 255, 0.247);
}

.csl-bib-body{
  margin:auto;
  max-width:90ch;
}



.csl-left-margin{
  float:left;
  margin-right:1.3rem;
  font-weight:bold;
}

.csl-right-inline{
  margin-left: 3rem;  
}

.csl-right-inline b{
  color:white;
}

.csl-right-inline i{
  color:rgb(255, 253, 115);
}

.doi{
    margin-left:3rem;
}

.doi a{
  color:springgreen;
}



.credit {
    color: #9E9E9E;
    font-size: 0.6rem;
    margin-bottom: 0.6rem;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 1.6rem; /* Place the button at the bottom of the page */
  right: 2rem; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: 1px dashed rgb(174, 216, 255); /* Remove borders */
  outline: none; /* Remove outline */
  background-color:rgba(0, 110, 255, 0.147); /* Set a background color */
  color:rgb(174, 216, 255); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 1rem; /* Some padding */
  font-size: 1rem; /* Increase font size */
  /*box-shadow: 0 2px 5px 0 rgb(0, 153, 255, 0.26),0 2px 10px 0 rgb(0, 153, 255, 0.22);  */
}

#myBtn:hover {
  background-color: rgba(0, 110, 255, 0.247); /* Add a dark-grey background on hover */
  border: 1px solid rgb(174, 216, 255); /* Remove borders */
  box-shadow: 0 2px 5px 0 rgb(0, 153, 255, 0.26),0 2px 10px 0 rgb(0, 153, 255, 0.22);  
}


#canvas {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: -1;
}


.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  top:-2px;
  margin-left:10px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #555;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: rgb(174, 216, 255);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: rgb(0, 153, 255, 0.26);
}

input:focus + .slider {
  box-shadow: 0 0 1px rgb(0, 153, 255, 0.26);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}
/*
.__dimensions_badge_embed__{
    display:block;
}*/

#badgeControl{
    display:flex;
    justify-content: right;
    color: rgb(174, 216, 255);
}

.doi span{
  padding-top:0.5rem;
  float:right;
}