sf-static/portfolio/public/stylesheets/style.css

html{
  background:#222222;
}

h1,h2,h3,h4,h5,h6,p{
  color:white;
}

h1{
  font-family: 'DietDidot';
}

img.title{
  height:96.7px;
  opacity: .5;
  filter: hue-rotate(90deg);
}

img.hidden{
  height:0;
  width:0;
}

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

ul{
  padding:0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom:100px;
}

li{
  padding:0;
  list-style-type: none;
  margin-right:20px;
  margin-bottom:20px;
  /* width:200px;
  height:200px; */
}
p.breadcrumbs{
  display: flex;
  align-items: center;
}

p.breadcrumbs a.home {
  transition: all .5s;
  height:30px;
  width:30px;
  opacity: .5;
  background-image:url('/images/house.svg');
  background-size:100%;
}

p.breadcrumbs a.home:hover {
  opacity: 1;
  background-image:url('/images/arrow.svg');
  transform: rotate(-450deg);
}

p.breadcrumbs a {
  color: #00B7FF;
  display: inline-block;
}

p.breadcrumbs a:hover {
  color: #E65C00;
}

p.breadcrumbs span{
  display: flex;
  align-items: center;
}

p.breadcrumbs span::after{
  content:'\00a0\00a0\00a0>\00a0\00a0\00a0'
}

p.breadcrumbs span:last-child::after{
  content:''
}

p.breadcrumbs span:last-child a:not(.home){
  color: white;
  padding:3px 5px;
  border-radius: 20px;
  border:1px solid white;
  text-decoration: none;
  cursor: default;
}

p.breadcrumbs span:last-child a.home {
  visibility: hidden;
}

a.image{
  position: relative;
  text-decoration: none;
}

a.directory{
  transition: .2s all;
  border-radius:10px;
  background: linear-gradient(135deg, #444, #333);
  padding:15px 25px;
  color:black !important;
  text-decoration: none;
  display: block;
}

a.directory:hover{
  transform: scale(1.05);
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.6));
  background: linear-gradient(135deg, #E65C00, #F9D423);
}

li.item:hover{
  z-index: 1;
}

a.image:hover figure{
  transform: scale(1.05);
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.6));
}

a.image:hover figcaption{
  background: linear-gradient(135deg, #E65C00, #F9D423);
}

figure{
  transition: .2s all;
  margin:0;
  border-radius:10px;
}

.theme1 figcaption{
  background: rgba(255,255,255,.5);
  border-radius: 5px;
  color:black;
  padding:5px;
  display: inline-block;
  position: absolute;
  top:10px;
  left:10px;
  z-index: 1;
}

.theme2 figcaption{
  transition: .2s all;
  /* background: linear-gradient(135deg, #E65C00, #F9D423); */
  background: linear-gradient(135deg, #222222, #222222);
  border-radius: 10px 10px 0 0;
  color:white;
  padding:10px 15px;
  display: block;
  width:170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:11px;
  font-weight:800;
  font-family:monospace;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.theme1 img{
  width:200px;
  height:200px;
  object-fit: cover;
  border-radius:10px;
}

.theme2 img{
  width:200px;
  height:200px;
  object-fit: cover;
  border-radius:0 0 10px 10px;
  background-color: rgba(0,0,0,.25);
}

footer{
  position:fixed;
  height: 40px;
  bottom:0;
  left:0;
  right:0;
  background-color:#1B1B1B;
  padding: 30px 50px;
}

footer p{
  color:#666;
}

.fancybox-thumbs {
  background: #1B1B1B;
}

.fancybox-thumbs__list a:before {
  border: 6px solid #E65C00;
}

.fancybox-button {
  height: 70px;
  width: 70px;
}

.fancybox-button:hover{
  color: #E65C00;
}

.fancybox-button[disabled], .fancybox-button[disabled]:hover{
  visibility: hidden !important;
}

.fancybox-button--arrow_left, .fancybox-button--arrow_right{
  padding:0 !important;
}

.fancybox-caption {
  font-size: 25px;
}

.fancybox-image{
  pointer-events: none;
}