/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: "Meiryo";
  src: url("assets/meiryo.ttf");
}

@font-face {
  font-family: "Eurostar";
  src: url("assets/eurostarregularextended.ttf");
}

* {
  padding: 0 0 0 0;  
  margin: 0 0 0 0;
}

:root {
  --color-theme-high: #3b67d2;
  --color-theme-base: #1f275d;
  --color-text-base: #bfc2c9;
  --color-text-high: #afb0b3;
}

html, body {
  font-family: "Meiryo";
  min-height: 100%;
  display: grid;
  margin: 0px;
}

.window {
  box-shadow: inset 0 0 0.5vh 0.5vh var(--color-theme-high);
  padding: 20px;
  flex: 1;
  background: 
    radial-gradient(
      circle 25vw at 15% -5%,
      color-mix(var(--color-theme-high), transparent 30%) 10%,
      transparent 130%
    ),
    radial-gradient(
      circle 50vh at 75% 100%,
      color-mix(var(--color-theme-high), transparent 75%),
      transparent
    ),
    radial-gradient(
      circle 50vh at 0% 100%,
      color-mix(var(--color-theme-high), transparent 75%),
      transparent
    ),
    linear-gradient(var(--color-theme-base))
  ; 
}

.window h1 {
  margin: 0;
  padding: 0;
  font-size: 2em;
  color: var(--color-text-high);
  font-weight: 500;
  border-bottom: 0.05em solid var(--color-theme-high);
}

.window h2 {
  height: 1.3em;
  font-size: 1.1em;
  color: var(--color-text-high);
  font-weight: 500;
  border-bottom: 0.05em solid var(--color-theme-high);
}

.window h2 img {
  position: relative;
  padding-right: 0.15em;
  padding-left: 0.1em;
  vertical-align: baseline;
  height: 1.5em;
}

.window_content {
  display: flex;
  flex: 1;
  width: 100%;
  flex-direction: row;
}

.window_section {
  margin-left: 2em;
  display: flex;
  flex-direction: column;
  width: fit-content;
  vertical-align: bottom;
  justify-content: flex-start;
}

.window_content :first-child {
  margin-left: 0;
}

.window_section > * {
    
  display: flex;
  
  }

.job_category {
  list-style: none;
  margin-top: 10px;
  display: flex;
  vertical-align: top;
  padding-right: 1em;
  
  font-family: "Eurostar";
  font-weight: 700;
}

.locked { opacity: 0.5; }

.job_category h2 {  
  margin-bottom: .5em;
}
  
.job_category li {
  margin-left: 0.75em;
  float: left;  
  color: var(--color-text-base);
  text-align: center;
  width: 30px;
}
  
.job_category img {
  width: 32px;
}