html,
body {
  position: relative;
  /*font-family: 'Roboto', sans-serif;*/
  background-color: rgba(30, 30, 30, 1);
  color: white;
  text-shadow: 0 .05rem .2rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  background-image: url("../dist/img/whitenoise-180x180.png");
  font-family: 'Roboto', sans-serif !important;
  scrollbar-width: thin; /* Firefox scrollbar styling */
}

a:hover {
  color: #47a4dd;
}

a {
  color: #48baff;
}

p {
  color: #e1e3e3;
}

mark {
  background: rgba(255, 255, 255, .9);
  color: black;
  text-shadow: none;
  /*text-shadow: 0 .05rem .2rem rgba(0, 0, 0, .4);*/
  font-weight: 600;
  padding: .05em .2em;
  margin: .1em;
}

mark > a{
  color: #005c6e;
}

code {
  color: #0facd0 !important;
}

h1{
  text-shadow: 0 .05rem .3rem rgba(255, 255, 255, .45);
}

h2 {
  text-shadow: 0 .05rem .2rem rgba(255, 255, 255, .4);
}

/* DEBUG */
/** {*/
/*  border: red solid 1px; !important;*/
/*}*/

/* NAVBAR/HEADER */

.logo-avwon-clawed {
  height: 4rem;
  min-height: 45px;
  max-height: 10vh;
  transition: filter 200ms;
}

.logo-avwon-clawed:hover {
  -webkit-filter: drop-shadow( 0px 0px 3px rgba(255, 255, 255, .6));
  filter: drop-shadow( 0px 0px 3px rgba(255, 255, 255, .6));
}

.awn-nav-link {
  color: rgba(255, 255, 255, .5);
  padding: .1rem 0;
  background-color: transparent;
  border-bottom: .15rem solid transparent;
}

/*.awn-nav-link:hover,*/
/*.awn-nav-link:focus {*/
/*  color: rgba(255, 255, 255, .5);*/
/*  border-bottom-color: rgba(255, 255, 255, .25)!important;*/
/*}*/

.awn-nav-link:hover,
.awn-nav-link:focus {
  color: rgba(255, 255, 255, 1);
  border-bottom-color: rgba(255, 255, 255, .25)!important;
}

.awn-nav-link.active {
  color: #fff;
  border-bottom-color: #fff;
  text-shadow: 0 .05rem .2rem rgba(255, 255, 255, .4);
}

/* header opacity transition */
.masthead {
  max-width: 100%;
  opacity: 1;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;

  background: rgb(30,30,30);
  background: linear-gradient(180deg, rgba(30,30,30,1) 0%, rgba(30,30,30,0.6) 80%, rgba(30,30,30,0.4) 95%, rgba(30,30,30,0) 100%);
}

/* BUTTONS */

.awn-btn {
  color: white;
  text-decoration: none;
  font-weight: 500;
  border-radius: .4rem;
  padding:  .5rem 1rem .5rem 1rem;
  margin: .5rem;

  transition: box-shadow 200ms;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  text-align: center;

  background: rgb(60,60,60);
  /*background: linear-gradient(25deg, rgba(85,85,85,1) 0%, rgba(50,50,50,1) 100%);*/
}

p>.awn-btn {
  padding: 0rem .2rem;
  margin: 0;
  display: inline;
}

.awn-btn.awn-btn-light {
  color: #888888;
  background-color: rgb(40,40,40)
}

.awn-btn.awn-btn-light:hover {
  background: rgb(60,60,60);
}

.awn-btn:hover {
  color: white;
  /*box-shadow: 0 8px 6px -6px grey;*/
  /*box-shadow:  0 3px 7px rgba(200, 200, 200, .3);*/
  box-shadow:  0 1px 12px rgba(0, 0, 0, .7);
}

.awn-btn.orange-btn {
  background: rgb(204,128,58);
  /*background: linear-gradient(25deg, rgba(199,151,99,1) 0%, rgba(204,128,58,1) 100%);*/
}

.awn-btn.orange-btn:hover {
  box-shadow:  0 1px 12px rgba(204,128,58, .7);
  /*background: linear-gradient(25deg, rgba(199,151,99,1) 0%, rgba(204,128,58,1) 100%);*/
}

/* TODO not satisfied with the look of the white buton*/

.awn-btn.white-btn {
  color: rgb(40,40,40);
  background: rgb(255,255,255);
}

.awn-btn.white-btn:hover {
  color: rgb(40,40,40);
  background: rgb(255,255,255);
  box-shadow:  0 1px 12px rgba(230, 230, 230, .7);
}

.page-container {
  min-height: 100vh;
  border-bottom: .1rem solid transparent;
  border-bottom-color: rgba(255, 255, 255, .25)!important;
}

.page-content {
  min-width: 0;
}

/* PARTICLE CANVAS */

#particle-canvas {
  position: absolute;
}

/* CANVAS TARGET */

#canvas-particle-target {
  /*Aspect ratio similar to particle image*/
  width: 100%;
  padding-bottom: 50%;
}

/* HEADER-ROW */

.header-row {
  margin-top: 5rem;
  margin-bottom: 2rem;
}

/* PAGINATION SIDEBAR */

.pagination-sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  padding-right: 1vw;

  /*Resource: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/*/
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-decoration: none;

  -webkit-transition: background 2s;
  -moz-transition: background 2s;
  -o-transition: background 2s;
  transition: background 2s;
}

.pagination-section:hover {
  background: rgb(30,30,30);
  background: linear-gradient(90deg, rgba(30,30,30,.1) 0%, rgba(30,30,30,0.7) 45%, rgba(30,30,30,0) 100%);
}

.pagination-section .pagination-description, .pagination-section .pagination-mark {
  -webkit-transition: opacity .5s, transform .5s, background-color .2s;
  -moz-transition: opacity .5s, transform .5s, background-color .2s;
  -o-transition: opacity .5s, transform .5s, background-color .2s;
  transition: opacity .5s, transform .5s, background-color .2s;
}

.pagination-section .pagination-description {
  opacity: 0;
  color: white;
  transform: translateX(-20px);
  margin-right: 2rem;
  text-shadow: 0 0 4px black;
  display: none;
}

.pagination-section:hover .pagination-description {
  opacity: 1;
  transform: translateX(0px);
  display: block;
}

.pagination-section .pagination-mark {
  width: 1.5rem;
  height: .6rem;
  border: 1px solid #808080;
  transform: skew(-30deg);
}

.pagination-section:hover .pagination-mark {
  background-color: white;
  border: 1px solid white;
}

.pagination-section.active .pagination-mark {
  background-color: white;
  /*border: 1px solid white;*/
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1700px) {
  .pagination-sidebar {
    padding-right: 5vw;
  }

  .pagination-section .pagination-description {
    opacity: .15;
    display: block;
  }

  .pagination-section.active .pagination-description {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* CARDS */

.project-card {
  position: relative;
  height: 500px;
  width: 350px;
  margin: 15px;
  padding: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.75), 0 0 3px rgba(123, 123, 123, 0.75); /* Copied this from resource, filter drop shadow has horrible performance on mobile */
  overflow: hidden; /* Prevents project-card-sheen from being shown past this elements own bounds */
  background: black center;
  background-size: cover;

  -webkit-transition: transform 400ms, box-shadow 400ms;
  -moz-transition: transform 400ms, box-shadow 400ms;
  -o-transition: transform 400ms, box-shadow 400ms;
  transition: transform 400ms, box-shadow 400ms;
  transition-timing-function: ease-in-out;
}

.project-card-sheen {
  opacity: .03;
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgb(255,255,255);
  background: linear-gradient(25deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.5) 52%, rgba(255,255,255,1) 55%, rgba(255,255,255,.4) 80%, rgba(255,255,255,.2) 100%);
  top: -35%;

  -webkit-transition: top 400ms, opacity 400ms;
  -moz-transition: top 400ms, opacity 400ms;
  -o-transition: top 400ms, opacity 400ms;
  transition: top 400ms, opacity 400ms;
  transition-timing-function: ease-in-out;
}

.project-card:hover .project-card-sheen {
  top: -20%;
  opacity: .1;
}

.project-card:hover {
  /*transform: perspective(500px) rotateX(5deg);*/
  -webkit-transform: perspective(400px) rotateX(3deg);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.75), 0 0 3px rgba(123, 123, 123, 0.75);
}

.status-date-bar {
  display: flex;
  margin-bottom: .5rem;
}

.status-date-item{
  color: rgb(80,80,80);
  margin-right: 1rem;
}

/* - Project actions */

.project-action-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

/* - Project tags */

.project-tag-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.project-tag-button {
  color: grey;
  text-decoration: none;
  background-color: rgba(40, 40, 40, 1);
  border-radius: .4rem;
  padding:  .1rem .5rem .1rem .5rem;
  margin: .2rem;
  transition: color 300ms;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.project-tag-button:hover {
  color: white;
}

.project-tag-button.active {
  color: white;
  font-weight: 600;
  /*border: white;*/
  /*border-width: 1px;*/
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.video-card{
  height: 100%;
  width: 100%;
}

@media only screen
and (max-width : 1300px) {
  .page-container{
    padding-left: 5%;
    padding-right: 5%;
  }

  .project-action-bar {
    justify-content: center;
  }

  .project-tag-section {
    justify-content: center;
  }
}

/* outer percentage container */
.percentage-line-outer {
  height: .8rem;
  width: 100%;
  margin-bottom: 1rem;
  border-width: .5px;
  border-color: white;
  /*border-color: rgb(30, 30, 30);*/
  /*border-style: solid;*/
  border-right: 1px white solid;
  border-left: 1px white solid;
  /*outline: 1px solid white;*/
  overflow: hidden;
  background: rgba(255,255,255,.1);
}

/* inner white line */
.percentage-line-inner {
  position: relative;
  display: flex;
  background: rgb(255,255,255);
  background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 90%);
  /*width: 100%;*/
  height: 100%;
}

.percentage-text {
  position: absolute;
  font-size: smaller;
  color: black;
  margin-top: auto;
  margin-bottom: auto;
  transform: translateY(-50%) translateX(-20%);
  right: 0;
  top: 50%;
}

.dual-column {
  /*display: flex;*/
  column-count: 2;
  flex-flow: column;
}

.column-item{
  break-inside: avoid;
}

@media only screen
and (max-width : 1300px) {
  .dual-column{
    column-count: 1;
  }
}

.border-left {

}

.skills-item-container {
  flex-flow: row wrap;
}

.skills-item {
  margin-bottom: 1.5rem;
  flex-flow: row nowrap;
  /*justify-content: center;*/
}

.skills-image {
  /*flex-shrink: 1;*/
  width: auto;
  max-height: 100%;
  min-width: 5%;
}

.skills-context {
  padding-right: 5%;
  padding-left: 5%;
  border-left-style: solid;
  border-color: white;
  border-width: 1px;
}

.skills-context>span {
}

@media only screen
and (max-width : 800px) {
  /* Uncomment for a stacked solution */

  /*.skills-item {*/
  /*  flex-direction: column;*/
  /*}*/

  /*.skills-context {*/
  /*  margin-top: 1rem;*/
  /*  padding-top: 1rem;*/
  /*  border-left-style: none;*/
  /*  border-top-style: solid;*/
  /*}*/
}

/* IMAGE GALLERY */

.img-gallery-container {
  max-width: 100%;
  height: auto;
}

.img-gallery-container > .viewer {
  max-width: 100%;
  position: relative;
  background: rgba(0,0,0,.6);
  width: max-content;
  margin: auto;
}

.img-gallery-container > .viewer > .viewer-media {
  max-height: 100%;
  max-width: 100%;
  height: auto;
}

.img-gallery-container > .thumbnail-list {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  white-space: nowrap;
  padding: 0 10px;
  scrollbar-width: thin; /* Firefox scrollbar styling */
}

.img-gallery-container > .thumbnail-list > .thumbnail-img {
  height: 100px;
  max-height: 100px;
  display: inline-block;
  margin: 8px 0;
  opacity: .6;
}

.img-gallery-container > .thumbnail-list > .thumbnail-img.active {
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.75), 0 0 3px rgba(255, 255, 255, 0.75);
  opacity: 1;
}

.img-gallery-container > .thumbnail-list > .thumbnail-img:hover:not(.active) {
  cursor: pointer;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.75), 0 0 3px rgba(123, 123, 123, 0.75);
  opacity: 1;
}

.img-gallery-container > .viewer > .viewer-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  height: 100%;
  z-index: 2;
  border-width: 0;
  opacity: 0;
  transition: opacity 300ms;
  outline: none;
}

.img-gallery-container > .viewer > .viewer-btn:hover {
  opacity: 1;
}

.img-gallery-container > .viewer > .viewer-btn:disabled {
  visibility: hidden;
}

.img-gallery-container > .viewer > .viewer-btn.prev {
  background: linear-gradient(90deg, rgba(30,30,30,.8) 0%, rgba(30,30,30,0) 70%);
  left: 0;
}

.img-gallery-container > .viewer > .viewer-btn.next {
  background: linear-gradient(270deg, rgba(30,30,30,.8) 0%, rgba(30,30,30,0) 70%);
  right: 0;
}

.img-gallery-container > .viewer > .viewer-description-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: max-content;
  z-index: 3;
  background: rgba(0,0,0,.6);
}

.img-gallery-container > .viewer > .viewer-description-container > .viewer-description {
  margin: auto;
}

/* SCROLL BAR */
/* width/height */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0,0,0,.2);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.v-container {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background: black;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.75), 0 0 3px rgba(255, 255, 255, 0.75);
}

.v-container > iframe {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}