Bits-Net/test.css

* {
  box-sizing: border-box;
}
:root{
--coin: #e2b025; 
--bit-click: rgb(238, 194, 99);
--bit-hover: #ffffffb9;
--bit: #dadadab9;
--background: #121212;
--background-main: #333333;
--background-menu: #292929;
--border-idlee: #4C4C4C;
--font: #a0cbff;
--font-small: #585858;
--head: #00497f;
--icons: #000000;
--icon-back: #ffffffb9;

}
body{
  max-width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top:  0px;
  margin-bottom: 0px;
  background-color: var(--background-main );

}
.row::after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 15px;
}

html {
font-family: "Lucida Sans", sans-serif;
background-color: var(--background);
height: 100%;
-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}

.header {
user-select: none;
background-color: var(--head );
max-height: 4.4em;
height: 3.1em;
}
.icon-head{
  max-width: 2em; 
  margin-top: 5px;
  margin-left: 15px;
  float: left;
  fill: var(--icons );
}
.icon-head-right{
max-width: 2em; 
fill: var(--coin );
vertical-align: -27px;
}
.number{
text-align: center;
font-size: 2em;
margin-left: auto;
margin-right: auto;
vertical-align: -23px;
color: aliceblue;
font-size: 200%;
}
.icon-bit{
display: unset;
border-radius: 100px;
box-sizing: none;
border: none;
text-align: center;
color: inherit;
background: none;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-left: 13px;
margin-right: 13px;
margin-top: 10%;
}

.icon-bit:after {
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
#icon-bit-main{
box-sizing: none;
}
/* Button 1 */
.btn-1 {
  fill: var(--bit );
}

.btn-1:hover {
  fill: var(--bit-hover );
}

.btn-1:active {
  fill: var(--bit-click );
  top: 2px;
}

.btn-1:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 3;
  font-size: 140%;
  width: 60px;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: var(--background-menu );
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
background-color: var(--background-menu );
}

.aside {
background-color: var(--background-menu );
font-size: 14px;
}
#menu-desc{
display: none;
}
#menu-mobi{
display: flex ;
flex-direction: column;
height: unset;
}

.footer {
user-select: none;
background-color: var(--background-menu );
text-align: center;
font-size: 18px;
}
.Fabrik {
color: var(--font );
border: solid 1px;
user-select: none;
text-align: center;
font-size: 1.125rem;
font-family: "Source Sans Pro", sans-serif;
display: block;
text-decoration: none ;
cursor: pointer;
}
.Fabrik:hover {

  color: rgb(138, 138, 138);
  transition: 0.3s;
  cursor: pointer;
}

.top {
  border: solid 1px;
  user-select: none;
  text-align: center;
  color: var(--font );
  font-size: 1.3rem;
  font-family: "Source Sans Pro", sans-serif;
  display: block;
  text-decoration: none ;
  border-color: var(--border-idlee);
}
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 30%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 95%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
body{width: 100%;}


}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 30%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 70%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
body{width: 80%;}
.icon-bit{max-width: 800px;}
#menu-desc{display: unset;}
.icon-bit{
  margin-left: unset;
  margin-right: unset;
}
#menu-mobi{
  display: none ;
}

}
@media only screen and (min-width: 900px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 30%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 70%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
body{width: 60%;}
.icon-bit{max-width: 800px;}
#menu-desc{display: unset;}
.icon-bit{
  margin-left: unset;
  margin-right: unset;
}
#menu-mobi{
  display: none ;
}
}
.short_text{
color: var(--font-small);
font-size: 0.8em;
}

.text-center{
text-align: center !important;
}

.mobil-nav{
background-color: var(--background-menu) ;
margin-left: auto;
margin-right: auto;
text-align: center;
user-select: none;

position: fixed;
bottom: 0px;
width: 100%;
max-height: 30%;
}
.mobil-navsub{
background-color: var(--background-menu) ;
user-select: none;
}

.icon-nav1{
max-width: 25%;
margin-bottom: 5%;
padding: 3%;
user-select: none;
background-color: var(--icon-back);
border-radius: 8px;
}
.icon-nav2{
max-width: 25%;
margin-bottom: 5%;
margin-left: 3%;
margin-right: 3%;
padding: 3%;
user-select: none;
background-color: var(--icon-back);
border-radius: 8px;
}
.icon-nav3{
max-width: 25%;
padding: 3%;
user-select: none;
margin-bottom: 5%;
background-color: var(--icon-back);
border-radius: 8px;
}
.nav-bottom{
bottom: 10px;
}
.text-nav{
background-color: var(--head);
font-size: 20px;

}
#wrench{
background-color: crimson;
border-radius: 10px;
flex-grow: 2;
margin: 5px;
display: none;

}
#bag{
  background-color: crimson;
  border-radius: 10px;
  flex-grow: 2;
  margin: 5px;
  display: none;
  
}
#arrow{
  background-color: crimson;
  border-radius: 10px;
  flex-grow: 2;
  margin: 5px;
  display: none;
  
}