body{
  font-family: "Lucida Console", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif, monospace;
  font-size:25px;
  margin: 0px;
  padding: 0px;
}

.background{
    background-image: url("images/SensorBackground.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw; 
    height: 100vh;
}
#img1 img {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
#img1 {
    opacity:0.9;
}
#img2{
      margin-top: auto;
      margin-bottom: auto;
      margin-left: auto;
      margin-right: auto;
      display: block;
}
.button{
  display: inline-block;
  border-radius:2px;
  margin-left:50px;
  cursor:pointer;
  border:none;
  color:white;
  transition: all 0.5s;
  text-align:center;
  padding:10px;
  width:100px;
  margin: 5px;
  margin-top:10px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  background-color:transparent;
  border: 2px solid white
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: -1px;
  right: -25px;
  transition: 1s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 10px;
}

ul{
    margin-left: auto;
    margin-right:auto;
}
ul li {
  list-style: none
}
.inputs{
  width:70%;
  font-family: Arial, Helvetica, sans-serif;
  font-size:20px;
  border: none;
  background-color: transparent;
  color:white;
  border-bottom: 2px solid white;
}
input[type=text]:focus {
  border: transparent;
}
::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}
.grid-container {
    margin-top:30px;
    display: grid;
    position:sticky;
    top:0px;
    grid-template-columns: auto auto auto auto auto;
    padding: 15px;
    text-align:center;
    grid-gap:5px;
    color:black;
}
.grid-item1{
  grid-row-start:1;
  grid-row-end:5;
}
.grid-item2{
grid-column-start:2;
grid-column-end:5;
}
.grid-item3{
  grid-row-start:2;
  grid-column-start:2;
  grid-column-end:5;
}
.grid-item4{
  grid-column-start:2;
  grid-column-end:3;
  grid-row-start:3;
}
.grid-item5{
  grid-column-start:3;
  grid-row-start:3;
  grid-row-end:4;
}
.grid-item6{
  grid-column-start:4;
  grid-row-start:3;
  grid-column-end:5;
}
.grid-item7{
  grid-column-start:5;
  grid-row-start:1;
  grid-row-end:5;
}


#Auswahl{
  border:5px solid black;
  height:100vh;
  text-align:center;
  
}



#settings{
  border-radius: 50%;
  background-color: black;
  border: none;
  cursor: pointer;
  /*margin-left:3vh;*/
  margin-top:45vh;
  
}

#settings:hover{
  background-color:grey;
}

#gear{
color:white;
margin-top:4.5px;
margin-left:0.5px;
}
.vertical-center {
  min-height: 100%;  
  min-height: 100vh; 

  display: flex;
  align-items: center;
}
#Ansicht{
  border:5px solid black;
  height:100vh;

  text-align:center;
}

.blackborder{
  border:5px solid black;
}

.sensor{
  margin:20px;
  font-family: Arial, Helvetica, sans-serif;
  cursor:pointer;
  color:white;
}

#sensorname{
  font-family: Arial, Helvetica, sans-serif;
  height:20vh;
}

#sensortemp{
  font-family: Arial, Helvetica, sans-serif;
  height:20vh;
}

#sensorstat{
  font-family: Arial, Helvetica, sans-serif;
  height:54vh;
}
.sensorfull{
  margin:10px;
  color:white;

}
#stat{
  margin-top:50px;
  width:50vh;
}