@import "colors-zdzw.css";

:root {
  --background-color: var(--bg-color);
  --primary-color: var(--p-color);
  --secondary-color: var(--s-color);

  --mdc-theme-primary: var(--primary-color);
  --header_height: 64px;
  --body_height: calc(100vh - var(--header_height));
  --min_width: 1280px;
  --min_height: 720px;
}

body {
  margin: 0px;
  font-family: "Roboto";
  width: max(100vw, var(--min_width));
  height: max(100vh, var(--min_height));
}

header {
  z-index: 10;
  display: flex;
  flex-direction: row;
  max-width: 100%;
  height: var(--header_height);
  justify-content: space-between;
  align-items: center;
  background-color: white;
  opacity: 0.95;
  padding: 0px 56px 0px 32px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.logo {
  height: calc(var(--header_height) - 10px);
}

.link-a {
  text-decoration: none;
}

.main {
  width: 100%;
  height: var(--body_height);
  background-color: var(--background-color);
  overflow-y: auto;
}

.title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
  /* font-weight: 500; */
}

.components-row {
  margin: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.runtime-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 80px;
}

.runtime {
  display: flex;
  margin: 0px 6px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.runtime-description {
  height: 360px;
  padding: 20px 40px;
}

.runtime-image {
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.image {
  width: auto;
  height: 350px;
  object-fit: contain;
}

.column-div {
  flex-wrap: nowrap;
  align-items: stretch;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
}

.row-div {
  flex-wrap: nowrap;
  align-items: stretch;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
}

.flex-container > * {
  flex: 1 100%;
  margin: 6px;
}