/* Allgemein */

body {
  height: 100%;
  font-family: 'Roboto Condensed', sans-serif;
  background-image: url(pics/background4.png);
  background-size: cover;
  background-repeat: no-repeat;
  scroll-behavior: smooth;
  background-color: #13191b;
  margin: 0;
  padding: 0;
}



/* Auswahlfarbe */

::selection {
  background-color: #90a4ae;
  color: rgb(0, 0, 0);
}

::-moz-selection {
  background-color: #90a4ae;
  color: rgb(0, 0, 0);
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 12px;  
}

::-webkit-scrollbar-track {
  background: #13191b;
}

::-webkit-scrollbar-thumb {
  background: #90a4ae;
}

/* Schriftart initialisieren */

@font-face {
  font-family: 'Jefferies';
  src: url('fonts/Jefferies.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Haupt-Container */

.main-container {
  display: block;
}

/* Sektions-Container */

#container {
  position: absolute;
  left: 50%;
  transform: translate(-50%)
}

/* Hauptüberschrift */

h1 {
  font-style: normal;
  text-align: center;
  font-size: 60px;
  color: #ffffff;
  margin-top: 20px;
  margin-bottom: 0px;
  font-family: "Jefferies", sans-serif;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}

.versionlink {
  display: block;
  font-family: "Roboto Condensed", sans-serif !important;
  text-align: left;
  margin-bottom: 20px;
  margin-left: 35px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.versionlink:visited {
  text-decoration: none;
  color: #ffffff;
}

/* Sektionen */

.section {
  width: 433px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  font-size: 24px;
  font-family: "Roboto Condensed", sans-serif !important;
  font-weight: 400 !important;
  color: #cfd8dc;
}

.section_content {
  color: #90a4ae;
  border: 1px #90a4ae solid;
  padding: 10px 30px;
  line-height: 33px;
  background: #13191b;
}

#alert_gamemode {
  display: none;
  text-align: right;
  margin-top: -32px;
  font-size: 15px;
}

#alert_nations {
  display: none;
  text-align: right;
  margin-top: -32px;
  font-size: 15px;
}

#alert_vehicletypes {
  display: none;
  text-align: right;
  margin-top: -32px;
  font-size: 15px;
}

/* Überschrift der Sektionen */

h2 {
  position: absolute;
  margin-top: -20px;
  text-align: center;
  color: #90a4ae;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 35px;
  text-shadow: 0px 0px 20px rgba(19, 25, 27, 1);  
}

#gamemodeh2 {
  margin-left: 200px;
}

#nationsh2 {
  margin-left: 262px;
}

#vehicletypesh2 {
  margin-left: 172px;
}

@keyframes blink {
  0% { color: #cfd8dc; }
  50% { text-shadow: 0px 0px 15px rgb(226, 105, 103); }
  50% { color: rgba(226, 105, 103,1); }
  100% { color: #cfd8dc; }
}

.blinking {
  animation: blink 0.5s infinite;
}

/* Inhalt der Filter */

.cbtext {
  margin-left: 35px;
  margin-top: -9px;
  font-size: 24px;
  font-family: "Roboto Condensed", sans-serif !important;
  font-weight: 400 !important;
  color: #90a4ae;
}

/* Custom Checkbox */

.c input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  display: flex;
}

.c {
  position: absolute;
  margin-top: 8px;
  cursor: pointer;
  font-size: 8px;
  width: 2em;
  height: 2em;
  user-select: none;
  border: 1px solid #90a4ae;
  display: flex;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.checkmark:after {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  background-color: #90a4ae;
  width: 50%;
  height: 50%;
  transform: scale(0);
  transition: .2s ease;
}

.c input:checked ~ .checkmark:after {
  transform: scale(1);
}

/* Randomize!-Button */

#randomize-button {
  display: flex;
  margin-top: 12px;
  align-items: center;
  background-color: rgba(229,57,53,.7);
  font-family: "Roboto", sans-serif;
  color: rgb(255, 255, 255);
  border-color: #fb504d;
  border-width: 2px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 24px;
  min-height: 50px;
  width: 433px;
  justify-content: center;
  transition: all .3s ease;
}

#randomize-button:hover {
  background-color: #e53935;
  box-shadow: 0px 0px 12px 0px #e53935;
}

#randomize-button::selection {
  background-color: #e53935;
  color: rgb(255, 255, 255);
}

/* Ergebnisse */

#result_container {
  display: flex;
  background: #13191b;
  width: 433px;
  margin-top: 23px;
  border: 1px #90a4ae solid;
  margin-bottom: 30px;
}

#result {
  margin-left: 90px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 24px;
  font-family: "Roboto Condensed", sans-serif !important;
  font-weight: 400 !important;
  color: #cfd8dc;
  color: #90a4ae;
  padding: 10px 30px;
  line-height: 33px;
}

.gamemodeicon{
  width: 20px;
  height: 20px;
  background-image: url('pics/gamemodeicon.png');
  background-size: cover;
  display: inline-block;
}

.nationicon{
  width: 20px;
  height: 20px;
  background-image: url('pics/nationicon.png');
  background-size: cover;
  display: inline-block;
}

.vehicletypeicon{
  width: 20px;
  height: 20px;
  background-image: url('pics/tankicon.png');
  background-size: cover;
  display: inline-block;
}

/* Radar-Effekt */

#loader {
  margin-top: 18px;
  position: absolute;
  margin-left: 20px;
  width: 80px;
  height: 80px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 25px 25px 75px rgba(0,0,0,0.55);
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#loader::before {
  content: '';
  position: absolute;
  inset: 30px;
  background: transparent;
  border: 2px dashed#444;
  border-radius: 50%;
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
  z-index: 1;
}

#loader::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px dashed#444;
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
  z-index: 1;
  
}

#animationelement {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  background: transparent;
  transform-origin: top left;
  animation: none;
  border-top: 2px dashed #fff;
  z-index: 2;
  transform: rotate(-90deg);
}

#animationelement::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #90a4ae;
  transform-origin: top left;
  transform: rotate(-60deg);
  filter: blur(30px) drop-shadow(20px 20px 20px #90a4ae);
}

@keyframes radaranimation {
  0% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(270deg);
  }
}