* {
  font-family: Arial;
  box-sizing: border-box;
  font-weight: bold;
}

body {
  background-image: url("../img/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height:98vh;
}
  
.header {
  width: 100%;
  float: left;
}

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

.col_section {
  width: 100%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.col_name {
  width: 100%;
  float: left;
  padding: 15px;
  border: 1px solid lime;
}

.col_position {
  width: 40%;
  float: left;
  padding: 15px;
  border: 1px solid black;
}

.col_time {
  width: 40%;
  float: left;
  padding: 15px;
  border: 1px solid lightblue;
  text-align: right;
}

.col_difference {
  width: 20%;
  float: left;
  padding: 15px;
  border: 1px solid purple;
  text-align: right;
}

.section_selector {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 80px;
  font-size: 2em;
  text-align: center;
  align-items: center;
  margin-bottom: 20px;
  box-sizing: border-box;
  resize: none;
  background-color: transparent;
  border-style: none;
}

p {
  margin: 0px;
}

img {
  max-width:100%;
  height:auto;
}

.detail_one, .detail_two {
  width: 100%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}

h1 {
  text-align: center;
}

a:link {
  color: black;
  text-decoration: none;
}

/*Speziell für groessere Bildschirme*/
@media only screen and (min-width: 700px) {
  .section_selector {
    font-size: 4em;
  }

  .col_name {
    width: 50%;
  }

  .col_position {
    width: 20%;
  }

  .col_time {
    width: 20%;
  }

  .col_difference {
    width: 10%;
  }

  .detail_one {
    width: 33%;
  }

  .detail_two {
    width: 66%;
  }

  h1 {
    font-size: 3em;
  }
}

@media only screen and (min-width: 1080px) {
  [class*="col_"] {
    font-size: 1.5em;
  }
}