/*
	CORE STYLE
*/

html{
	background: #000;
	color: #eee;
}
html,body{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size:1em;
  min-height: 100vh;
  margin: 0;
  padding-top: 1px;
  margin-top: -1px;
}
body {
  display: flex;
  flex-direction: column;
}
a {
  color: inherit;
  text-decoration: none; /* no underline */
}
p {
  font-size: 1.25em;
}
p a, blockquote a, ul a, ol a {
  color: rgb(153 198 255);
}
p a:hover, blockquote a:hover, ul a:hover, ol a:hover {
  font-weight: bold;
}
h1,h2,h3,h4,h5,h6{
	margin: 0;
}
h1{
	font-weight:300;
  font-size: 3em;
}
h2{
	font-weight:300;
  font-size: 2.5em;
}
h3{
  font-size: 2em;
}
hr {
  border: none;
  border-bottom: white solid 1px;
  margin: 0;
}
blockquote {
  position: relative;
}
blockquote::before, blockquote::after {
  content: '';
  display: block;
  position: absolute;
  background: #777;
}
blockquote::before {
  left: -1.5em;
  top: -0.5em;
  bottom: -0.5em;
  width: 4px;
}
blockquote::after {
  left: -1.5em;
  top: 100%;
  top: calc(100% + 0.5em);
  right: 0;
  height: 1px;
}

/*
	CLASS TOOLS
*/

.dim{
	opacity: 0.75;
}
.hidden{
	display: none !important;
}
.text-center {
  text-align: center;
}
.text-skinny {
  font-weight: 300;
}
.flex-row, .flex-col {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.show-small, .show-med {
  display: none;
}
.x-scroller {
  display: block;
  overflow-x: auto;
  margin-bottom: 1em;
}
.x-scroller > div {
  width: fit-content;
  margin: 0;
}
.y-scroller {
  display: block;
  overflow-y: auto;
  overflow-y: overlay; /* TODO: replace with scrollbar-gutter when it's ready */
}
.y-scroller > div {
  height: fit-content;
}

/*
	MENU ITEMS
*/
.btn{
	display: inline-block;
  font-size: 1.25em;
	padding: 0.5em;
	cursor: pointer;
  border: white solid 1px;
  border-radius: 0.5em;
  background: none;
	box-shadow: inset 0 0 0 1.1em rgba(255,255,255,0);
	transition: box-shadow 250ms;
}
.btn:hover{
	box-shadow: inset 0 0 0 1.1em rgba(255,255,255,0.25);
}
.hero .btn{
  color: #fff;
  border-color: #fff;
	box-shadow: inset 0 0 0 1.1em rgba(255,255,255,0);
}
.hero .btn:hover{
	box-shadow: inset 0 0 0 1.1em rgba(255,255,255,0.25);
}
.hero h2 .btn {
  position: relative;
  top: -0.5em;
  font-size: 1rem;
  margin: 0;
  padding: 0.3em;
}
.spacer {
  display: inline-block;
  margin: 0 0.5em 0 0.5em;
  border-left: 1px solid #fff;
  border-top: 1px
  solid #fff;
}

/*
  FORMS
*/
input:not(.btn), textarea {
  max-width: 100%;
  background: none;
  color: white;
  border: none;
  border-bottom: white solid 1px;
  margin-bottom: 16px;
  line-height: 1;
}
input::placeholder, textarea::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
input:not(.btn):hover, textarea:hover {
  background: rgba(255, 255, 255, 0.1);
}
input:not(.btn):focus-visible, textarea:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  border-bottom: white solid 4px;
  margin-bottom: 13px;
}
input[type=color], input[type=file] {
  display: inline-block;
}
input[type=file] {
  max-width: 30em;
}
input[type=checkbox], input[type=radio] {
  height: 1em;
}

.hero input:not(.btn), .hero textarea {
  color: #fff;
  border-bottom-color: #fff;
}
.hero input::placeholder, .hero textarea::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.hero input:not(.btn):hover, .hero textarea:hover {
  background: rgba(255, 255, 255, 0.1);
}
.hero input:not(.btn):focus-visible, .hero textarea:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  border-bottom-color: #fff;
}

/*
	COLOURS
*/

.c-grey-bg{
	background:#8c9198;
}
.c-grey{
	color:#8c9198;
}
.c-mild-bg{
	background:#7295cd;
}
.c-mild{
	color:#7295cd;
}
.c-blue-bg{
	background:rgb(0,162,232);
}
.c-blue{
	color:rgb(0,162,232);
}
.c-purple-bg{
	background:rgb(163,73,164);
}
.c-purple{
	color:rgb(163,73,164);
}
.c-octocat-bg{
	background: #6e5494;
}
.c-octocat{
	color: #6e5494;
}
.c-blurple-bg{
	background: #7289da;
}
.c-blurple{
	color: #7289da;
}
.c-gmail-bg{
	background: #ea4335;
}
.c-gmail{
	color: #ea4335;
}

/*
  CUSTOM SCROLLBAR
*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/*
  CONTENT
*/
.main{
  display: flex;
  flex-direction: column;
	position: relative;
  width: calc(100vw - 1em);
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  max-width: 96em;
  align-self: center;
  background: rgb(15, 15, 15);
  margin: 1em 1em 0.8em 1em;
  border-radius: 1em;
  overflow: hidden;
}

nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: rgb(112, 146, 190) linear-gradient(90deg, rgb(0, 68, 97), rgb(88, 38, 88));
  /* border-bottom: white solid 1px; */
}
nav > .nav-item {
  font-size: 1.25rem;
  padding: 0.75rem;
  margin: 0.2rem;
}
nav > .nav-item:link {
  background: rgba(255, 255, 255, 0);
  border-radius: 0.8rem;
  transition: background 0.25s ease;
}
nav > .nav-item:link:hover {
  background:rgba(255, 255, 255, 0.25);
}
nav > .nav-item.active {
  font-weight: bold;
}

.pfp {
  border-radius: 1em;
  width: 12em;
  height: auto;
  margin-bottom: 1em;
}

article, section, aside {
  display: flex;
  flex-direction: column;
  padding: 1em;
}

.hero {
  color: #fff;
  background:rgb(112, 146, 190) linear-gradient(90deg, rgb(0, 68, 97), rgb(88, 38, 88));
}

.login-status {
  position: relative;
}
.login-status a[href="edit/"] {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0.5em 0;
  font-size: 1.25rem;
}

.carousel {
  display: flex;
  flex-direction: row;
  border-radius: 0.9em;
  gap: 1em;
  margin-bottom: 1em;
}
.carousel-grid {
  flex-wrap: wrap;
}
.carousel > * {
  position: relative;
  display: flex;
  place-content: center;
  height: 14em;
  min-height: 10em;
  max-height: 15em;
  max-width: min(28em, 85vw);
  min-width: 10em;
  background: black;
  border-radius: 1em;
  overflow: hidden;
}
.carousel.carousel-grid > * {
  flex-grow: 1;
}
.carousel.carousel-grid > .project-mini {
  max-width: 15em;
  height: auto;
}
.carousel.carousel-grid > .article-mini {
  flex-basis: 24em;
  max-width: 31em;
}
.carousel img {
  width: auto;
  scale: 1;
  opacity: 1;
  transition: scale 500ms, opacity 500ms;
}
.carousel-btn {
  padding-bottom: 3.8em;
}
.carousel-btn .label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.8em;
  color: #fff;
  background: black;
  transition: background ease 0.25s;
}
.carousel-btn:hover > .label {
  background: #4b4b4b;
}
.carousel > a:hover img {
  scale: 1.25;
  opacity: 0.75;
}

.credits {
  margin-bottom: 0.8em;
}

.post > .post-header {
  margin: -1em;
  margin-bottom: 1em;
  padding: 1em;
  border-bottom: white solid 1px;
}
.post > .post-header > img {
  width: calc(100% + 2em);
  height: auto;
  max-height: 40em;
  object-fit: cover;
  object-position: center;
  margin: -1em;
  margin-top: 1em;
  margin-bottom: -1.25em;
}
.post > .post-content img {
  max-width: 100%;
  height: auto;
}

/*
  MEDIA QUERIES
*/

@media screen and (max-width: 64em) {
  .main {
    margin: 1em 0.5em 0.8em 0.5em;
  }
  .hide-med {
    display: none;
  }
  .show-med {
    display: unset;
  }
}

@media screen and (max-width: 48em) {
  nav, .flex-row {
    justify-content: center;
  }
  .hide-small {
    display: none;
  }
  .show-small {
    display: unset;
  }
}

@media (prefers-color-scheme: light) {
  html {
    background: #ddd;
    color: #000;
  }
  .main {
    background: #fff;
  }
  nav {
    color: #fff;
  }
  hr {
    border-bottom-color: #000;
  }
  .post > .post-header {
    border-bottom-color: #000;
  }
  p a, blockquote a, ul a, ol a {
    color: rgb(58, 78, 105);
  }
  
  .btn{
    border-color: #000;
    box-shadow: inset 0 0 0 1.1em rgba(0,0,0,0);
  }
  .btn:hover{
    box-shadow: inset 0 0 0 1.1em rgba(0,0,0,0.25);
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
  }
}