@import "../header.css";
@import "../defaults.css";

#header-container {
  background: black;
}

a {
  text-decoration: none;
}

body {
  background: black;
}

video {
  position: fixed;
  top: -200px;
  left: 0;
  z-index: -1;
  min-width: 100vw;
  min-height: 100vh;
}

#content {
  padding-top: 160px;
  width: 100%;
  min-width: 900px;
  font-size: 20px;
}

#panels-wrapper {
  display: flex;
  background: none;
  padding: 0 8% 0 8%;
  margin-top: 70px;
  min-width: inherit;
  justify-content: space-between;
  align-content: space-between;
  flex-flow: column wrap;
  height: 633px;
}

.panel {
  width: 600px;
}

.who-are {
  height: 300px;
  order: 1;
}

.philosophy {
  order: 3;
}

.contact {
  order: 2;
}

.panel h1 {
  display: inline-block;
  color: var(--accent);
  background: black;
}

.panel p {
  margin-top: 10px;
  font-family: "Azeret Mono";
  background: black;
}

#contacts {
  background: black;
}

#contacts a,
#contacts p {
  font-family: "Azeret Mono";
  font-weight: bold;
}

@media (max-width: 1200px) {
  #content {
    background-size: cover;
    margin-top: unset;
    width: 100%;
    min-width: unset;
    font-size: 20px;
    width: 100%;
    font-size: smaller;
  }

  #panels-wrapper {
    display: block;
    width: 90%;
    margin: auto;
    background: none;
    padding: unset;
    min-width: inherit;
  }

  .panel {
    width: unset;
    min-width: unset;
    margin-right: unset;
    margin-bottom: 50px;
  }

  .panel p {
    background: black;
    margin-top: 10px;
  }
}