html, body {
    background-color: #18191A;
    overflow-x: hidden;
    }
    
    
.header-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background-color: #18191A;
  z-index: 99;
  border: solid;
  border-width: 0 0 1px 0;
  border-color: #3A3B3C;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-bar img {
  height: 75%;
  display: block;
  max-height: 100%;
  max-width: 100%;
}

.header-bar p {
text-align:center;
color:#B0B3B8;
font-weight:bold;
font-size:1.5em;
margin-top:10px;
font-family: 'Space Grotesk', sans-serif;
}

.home-page-qanda {
position:absolute;
width:100%;
margin-top:60px;
}

.home-page-qanda h1 {
text-align: center;
color:#E4E6EB;
font-size:1.4em;
}

.menu-bar {
    position:fixed;
    bottom:0px;
    left:0px;
    height:10%;
    width:100%;
    background-color: #242526;
    border:solid;
    border-width:1px 0px 0px 0px;
    border-color: #3A3B3C;
    z-index:999;
    text-align:center;
}

.menu-bar {
  display: flex;
  justify-content: space-between;
}

.menu-button {
    margin-left:5%;
  margin-right: 5%;
}

.menu-bar i{
position:relative;
top:0%;
transform:translate(0%,-50%);
font-size:1.9em;
display:inline-block;
}

.menu-bar button{
color:#B0B3B8;
padding: 0;
border: none;
background:none;
margin-top:2%;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.menu-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.menu-button span {
  margin-top: -7px;
}


.page-tools {
    position:absolute;
    background-color:#18191A;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    z-index:5;
    color:white;
    display: none;
}

.page-tools-buttons-container p {
position:absolute;
width:100%;
text-align:center;
top:10.5%;
font-size:1.5em;
  font-family: 'Space Grotesk', sans-serif;
  font-weight:bold;
}

.page-tools-buttons {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, 0%);
  color: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px;
  justify-items: center;
}

.page-tools-buttons .button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-tools-buttons button {
  background: none;
  border: solid 0px;
  border-radius: 10%;
  padding: 10px;
  color: white;
  font-size: 2em;
  width: 70px;
  height: 70px;
  background-color: #3A3B3C;
}

.page-tools-buttons span {
  margin-top: 5px;
  font-size: 0.8em;
  text-align:center;
  font-family: 'Space Grotesk', sans-serif;

}




.page-calculator {
    position:absolute;
    background-color:#18191A;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    z-index:5;
    color:white;
    display: none;
}

.page-calculator p {
text-align: center;
font-family: 'Space Grotesk', sans-serif;
margin-bottom:0px;
}

.calculator-form {
    position: absolute;
    left:50%;
    top:40%;
    transform:translate(-50%,-50%);
    }

.calculator-form-header {
font-size:1.5em
}

    .calculator-input {
  padding: 10px;
  border: 1px solid #24252C;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s ease;
  background-color: #3A3B3C;
  color: #E4E6EB;
}

.calculator-input:focus {
  border-color: #B0B3B8;
}

.calculator-button {
  padding: 10px 20px;
  background-color: #B0B3B8;
  color: #18191A;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width:100%;
}

.calculator-button:hover {
  background-color: #E4E6EB;
}

.calculator-button:focus {
  outline: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.calculator-result {
text-align:center;
}






.page-converter {
  position: absolute;
  background-color: #18191A;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 5;
  color: white;
  display: none;
}

.converter-form {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.converter-form p {
  
}

.converter-form-header {
  font-size: 1.5em;
  text-align: center;
}

.converter-input {
  padding: 10px;
  border: 0px solid #24252C;
  border-radius: 5px;
  font-size: 30px;
  outline: none;
  transition: border-color 0.3s ease;
  background-color: #3A3B3C;
  color: #E4E6EB;
  width:40px;
  height:40px;
  text-align: center;
}

.converter-input:focus {
  border-color: #B0B3B8;
}

.converter-button {
  padding: 10px 20px;
  background-color: #B0B3B8;
  color: #18191A;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
}

.converter-button:hover {
  background-color: #E4E6EB;
}

.converter-button:focus {
  outline: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.converter-result {
  text-align: center;
}

.page-converter p {
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 0px;
}

.converter-input-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.converter-input-container input {
  width: 45%;
}

.converter-input-container span {
  margin: 0 5px;
}



.page-more-info {
   position:absolute;
   background-color:#18191A;
   height:100%;
   width:100%;
   top:0px;
   left:0px;
   z-index:5;
   color:white;
   display: none;
}



.page-fixtures{

}