/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:sans-serif}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:initial}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:initial}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sup{top:-.5em}sub{bottom:-.25em}img{border:0}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:initial;height:0}code,kbd,pre,samp{font-family:inherit}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:initial}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* CCDet specific style */

:root {
  --max-width: 1100px;
  --body-margin: max(1rem, calc((100vw - var(--max-width)) / 2));
  --margin: 8rem;
  --line-decoration-color: #555;
  --line-decoration: .5px solid var(--line-decoration-color);
  --accent-color: #eee;
  --secondary-color: #f0d;
  --tertiary-color: #0f3;
  --member-color: #f84;
  --resource-color: #2f9;
  --underline-color: #f0d;
  --underline-color-2: #fff1;
}

* {
  box-sizing: border-box;
}

html {
  background-color: #222;
  color: white;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #999;
}

code, pre {
  font-family: monospace;
}

.accent {
  color: var(--accent-color);
}

.forum {
  color: var(--secondary-color);
}

.hidden {
  display: none !important;
}

a,
a:active {
  color: inherit;
  text-decoration-color: var(--underline-color);
  text-decoration-line: underline;
  /*text-decoration-style: dotted;*/
  text-decoration-thickness: .5pt;
  transition: text-decoration-thickness .4s, text-decoration-color 2s;
}

nav {
  margin: 0 auto;
  max-width: var(--max-width);
}

nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
}

nav > ul > li {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  perspective: 200px;
}

nav > ul > li > a,
nav > ul > li > a:hover {
  text-decoration: none;
  display: block;
  padding: 1rem;
  position: relative;
  border-left: var(--line-decoration);
}

nav > ul > li::before {
  content: "";
  position: absolute;
  display: block;
  background-color: #111;
  width: 100%;
  height: 100%;
  transition: all .4s;
  transform: rotate3d(1, 1, 0, 90deg);
}

.hero {
  background-image: url('/img/ccdet_header.webp');
  background-size: cover;
  background-position: left center;
  width: 100vw;
  height: 25vh;
  position: relative;
  padding: 0 var(--body-margin);
}

.hero a {
  display: block;
  position: absolute;
  height: 50%;
  bottom: -2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.hero a img {
  height: 100%;
}

main {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

footer {
  background-color: #111;
  color: #555;
  font-size: .618em;
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-width);
  margin: var(--body-margin) auto 0;
  padding: 1rem;
  flex-grow: 1;
  border-left: var(--line-decoration);
}

hr {
   border: none;
   border-top: var(--line-decoration);
}

div.home-cards {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
}

div.home-cards ul {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

div.home-cards ul > li + li {
  margin-top: 1rem;
}

div.home-cards > * {
  flex-grow: 1;
  border-top: var(--line-decoration);
  padding: 1rem;
}

div.home-cards h1,
div.home-cards h2,
div.home-cards h3 {
  margin-top: 0;
}

div.home-cards h3 {
  color: #eee;
}

div.page-title h1,
div.page-title h2,
div.page-title h3 {
  color: var(--accent-color);
  margin: 1rem 0;

}

div.page-title {
  margin: 4rem 0;
}

dt {
  padding: 1rem 0 0;
  margin-top: 1rem;
  border-top: var(--line-decoration);
  color: var(--accent-color);
}

dd {
  padding: 0 0 0 1rem;
  margin: 0;
}

dd::before {
  content: '➜';
  margin-right: .5rem;
}

div.section-item {
  display: flex;
}

div.section-item + div.section-item {
  margin-top: 1rem;
}

div.section-item::before {
  content: '➜';
  margin-right: .5rem;
  color: var(--accent-color);
}


div.section-item > h3 {
  margin: 0;
}

div.section-item > h3 > a {
  display: inline-block;
}

/* resource & member styling */

div.card {
  box-sizing: border-box;
  margin-top: 1rem;
  padding: 1rem;
  border-bottom: var(--line-decoration);
  background-color: #282828;
  /*background-color: #8883;*/
  cursor: pointer;
  position: relative;
}

div.card > div.description {
  margin-top: 1rem;
}

div.card h3 {
  margin: 0;
  color: var(--accent-color);
}

div.tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
}

a.label {
  display: inline-block;
  font-size: .618rem;
  /*font-size-adjust: .5;*/
  line-height: 1rem;
  font-weight: bold;
  background-color: var(--accent-color);
  color: #111;
  border-radius: .125rem;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0 1px 1px 0;
  transition: all .2s;
  box-shadow: 0 0 0rem #0000;
}

a.label svg {
  display: block;
}

a.label.forum,
a.label.tag {
  padding: .25rem 1rem .125rem;
}

a.label.website {
  padding: .5rem;
}

a.label.forum {
  background-color: var(--secondary-color);
  float: right;
}

a.label::before {
  opacity: .5;
}

a.label.tag::before {
  content: "#";
}

a.label.type {
  pointer-events: none;
  float: right;
  /*padding: .25rem;*/
}

.member {
  color: var(--member-color);
}

.resource {
  color: var(--resource-color);
}

@media (hover: hover) {

  nav > ul > li:hover::before {
    transform: rotate3d(1, 0, 0, 0deg);
  }

  div.card:hover a,
  a:hover {
    text-decoration-thickness: 1rem;
    text-decoration-color: var(--underline-color-2);
  }

  a.label:hover {
    transform: scale(1.125);
    box-shadow: 0 0 .1rem #000f;
  }
}

@media (max-aspect-ratio: 1/1) {
  :root {
    --margin: 1rem;
  }
  div.home-cards {
    flex-direction: column;
  }
  nav > ul {
    flex-direction: column;
  }
  nav {
    writing-mode: sideways-lr;
    /*text-orientation: mixed;*/
  }
}