#playButton {

  width: 50vw;
  height: auto;
  position: absolute;
  bottom: 10vh;
  left: 25vw;
  background-color: slategrey;
  border: 0.2em solid black;
  text-align: center;
  color: #000;
  border-radius: 100px;
  
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  -o-user-select:      none;
  user-select:         none;

}

#logoWrapper
{
  position:absolute;
  z-index:35;
  margin-left:20px !important;
  margin-top:20px !important;
}

.logoImg{
  height:55%;
  margin-top:20%;
}

#nextbutton:active {

  background-color: steelblue;
  color: #000;

}

h2 {

  font-size: 1.3em;
  text-align: center;
  font-family: monospace;

}

#logo
{

  position:absolute;
  width:40px;
  z-index:200;
  margin:10px;

}

.icon-bar {
  width: 100%; /* Full-width */
  background-color: rgba(255, 255, 255, 0); /* Dark-grey background */
  overflow: auto; /* Overflow due to float */
  z-index:5;
  bottom:10px;
  position:absolute;
}

.icon-bar a {
  float: left; /* Float links side by side */
  font-family: 'Rubik', sans-serif;
  text-align: center; /* Center-align text */
  width: 95vw; /* Equal width (5 icons with 20% width each = 100%) */
  padding-top: 2vw; /* Some top and bottom padding */
  padding-bottom: 2vw; /* Some top and bottom padding */
  padding-left: 1vw; /* Some top and bottom padding */
  padding-right: 1vw; /* Some top and bottom padding */
  margin: 2vw;
  transition: all 0.2s ease; /* Add transition for hover effects */
  color: #10337e; /*  text color */
  background-color: rgba(255, 255, 255, 0.781);
  border-radius: 100px;
  font-size: 18px; /* Increased font size */
  z-index:6;
}


.icon-bar a:hover {
  background-color: rgb(255, 255, 255);
}


.active {
  background-color: rgb(255, 255, 255); 
}

#align-image {
  display:none;
  position:absolute;
  top:10%;
  width:100%;
  z-index:15;
}

.instructionsImage
{
    width:100%;
    opacity: 1;
}

#gui {
  display:none;
}


.ctaWrapper{
  position: absolute;
  text-align: center;
  z-index: 100;
  bottom: 5%;
  right:5%;
}
/* 
.css-button-rounded {
  z-index:16;
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  white-space: nowrap;
  background: #ebebeb;
  color: #023c5b;
  text-align: center;
  text-decoration: none;
  height:10%;
  border-radius: 50px;
  padding-top:10px;
  padding-bottom:10px;
  padding-right:15px;
  padding-left:15px;
  bottom:10px;
  -webkit-tap-highlight-color: transparent;
}

.css-button-rounded:hover {
  background: #6b859e;
  -webkit-tap-highlight-color: transparent;
}
.css-button-rounded:active {
  background: rgb(134, 162, 189);
  /* box-shadow: 1px 1px 1px rgb(255, 255, 255); */
  /* -webkit-tap-highlight-color: transparent;
} */