/* Main Body */
body {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	background-color: #012c45;
}

/* Page Layers Containers */
#design-page-back {
  width: 100%;
  height: 100vh;
  background-color: #012c45;
  position: fixed;
  top: 0;
  right: 0;
  text-align: right;
  font-size: 33px;
}
#design-page-back nav {
  padding: 120px 34px;
}
#design-page-back nav a {
  display: block;
  margin-bottom: 25px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
}

#design-page-holder {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 20;
}
#design-page-holder.tilt {
  overflow: hidden;
  pointer-events: none;
}
#design-page-holder.tilt #design-page-front {
  transform: rotate(-10deg) translateZ(0);
}

#design-page-front {
  pointer-events: auto;
  position: relative;
  z-index: 50;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  transform-origin: center 70%;
  transition: all 0.3s ease;
  background-color: black;
}
#design-page-front.background-blurred {
  background-color: #000033;
  background-position: top center; /* Center the image */
  background-repeat: repeat;
  animation: slideBackgroundRight 60s linear infinite;
}
#design-page-front.background-tinted {
  background-color: #000033;
  background-position: top center; /* Center the image */
  background-repeat: repeat;
  animation: slideBackground 100s linear infinite;
}

#pagecontainer {
  min-height: 100vh;
}
#pagecontainer {
  padding-top: 0vh;
}

.hamburgermenu {
  position: absolute;
  z-index: 100;
  top: 20px;
  right: 15px;
  width: 45px;
  height: 34px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: opacity 0.05s ease; /* Adjust transition timing as needed */
}
.tilt hamburgermenu {
  right: 15px;
}
.hamburgermenu span {
  position: relative;
}
.hamburgermenu span, .hamburgermenu span:before, .hamburgermenu span:after {
  display: block;
  width: 45px;
  height: 6px;
  background-color: #ff0000;
  border-radius: 2px;
}
.hamburgermenu span:before, .hamburgermenu span:after {
  content: "";
  position: absolute;
}
.hamburgermenu span:before {
  bottom: -14px;
}
.hamburgermenu span:after {
  bottom: -28px;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 45px;
  height: 34px;
  cursor: pointer;
}
.close:before, .close:after {
  content: "";
  position: absolute;
  display: block;
  width: 45px;
  height: 6px;
  top: 50%;
  background-color: white;
  border-radius: 2px;
}
.close:before {
  transform: translateY(-50%) rotate(45deg);
}
.close:after {
  transform: translateY(-50%) rotate(-45deg);
}

/* Hide Vintage Bigfoot Photo For Smaller Screens */
@media screen and (max-width: 600px) {
.vintagebigfoot {
	display: none;
}
}

/* Just a little honeypot code to make sure you're not copying. */

/* Media query for screens with a max width of 600px */
@media screen and (max-width: 600px) {
  .hamburgermenu {
    width: 30px;  /* reduced width */
    height: 23px; /* reduced height */
	top: 15px;
  }
  
  .hamburgermenu span, .hamburgermenu span:before, .hamburgermenu span:after {
    width: 30px;  /* reduced width */
    height: 4px;  /* reduced height */
  }

  .hamburgermenu span:before {
    bottom: -10px; /* adjust position */
  }

  .hamburgermenu span:after {
    bottom: -20px; /* adjust position */
  }

  .close {
    width: 30px;  /* reduced width */
    height: 23px; /* reduced height */
	top: 15px;
	right: 15px;
  }

  .close:before, .close:after {
    width: 30px;  /* reduced width */
    height: 4px;  /* reduced height */
  }
}

/* Header */
  .siteheader {
    display: flex;
    justify-content: space-between; /* Space between the logo and the right image */
    align-items: center; /* Centers items vertically */
    /* background-color: #000; /* Background color */
  }
  .header-left-side {
    display: flex;
    align-items: center;
  }
  .sitelogo, .vintagebigfoot, .vegasbigfoot {
    padding: 10px;
  }
  .vegasbigfoot {
    padding-right: 80px;
  }
  .sitelogo img {
    aspect-ratio: 440 / 161;
    width: 440px; /* Original width */
    max-width: 100%;
    height: auto;
  }
  .vintagebigfoot img {
    aspect-ratio: 280 / 140;
    width: 280px; /* Original width */
    max-width: 100%;
    height: auto;
  }
  .vegasbigfoot img {
    aspect-ratio: 420 / 140;
    width: 420px; /* Original width */
    max-width: 100%;
    height: auto;
  }
  
/* YouTube Video Links */
.video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
    padding: 20px;
	max-width: 80vw;
	margin-left: auto;
	margin-right: auto;
}

.video-container {
    background-color: #f4f4f4;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	position: relative;
}

.thumbnail-link {
    display: block;
    line-height: 0;
}

.thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100.1%;
    height: 100%;
    object-fit: cover;
    background-color: #1E80C1;
}

.video-info {
    padding: 15px;
}

.video-info h3 {
    margin: 0 0 5px;
    color: #333;
    font-size: 18px;
}

.video-info h3 a {
    text-decoration: none;
	color: #333;
}

.video-info p {
    margin: 0;
    color: #666;
    font-size: 14px;
}
.channel-link {
	color: #777;
	text-decoration: none;
}
    .subscribe-button-holder {
		text-align: right;
	}
    .subscribe-button {
        display: inline-block;
        padding: 5px 5px 4px;
        /* margin: 5px 0; */
        background-color: #990000;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        text-align: center;
		line-height: 0.8em;
		transition: transform 0.3s ease;
    }
    .subscribe-button:hover {
        background-color: #bb0000;
        box-shadow: 2px 3px 3px 0px rgba(0,0,0,0.7);
        animation: twistAnimation 1.9s linear infinite;
    }

@keyframes twistAnimation {
  0%, 99% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(7deg); /* Twist to the right */
  }
  75% {
    transform: rotate(-7deg); /* Twist to the left */
  }
}
	.subscribe-button-subheading {
		font-size: 10px;
		color: #ccc;
	}
	
/* Special Creators */
.creator-showcase {
    border: 2px solid #ffff00;
}

.rising-creator {
    border: 5px solid #5d95db;
}
.rising-creator .video-info h3 a {
	color: #2F2F44;
}
.rising-creator .video-info p {
	color: #555577;
}

.creator-showcase .tagline {
	position: absolute;
	bottom: 1px;
	right: 3px;
	font-size: 10px;
}
.rising-creator .tagline {
	position: absolute;
	bottom: 1px;
	right: 5px;
	font-size: 10px;
}

/* Animated Background */
@keyframes slideBackgroundRight {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1024px 0;
    }
}
@keyframes slideBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 1024px 0;
    }
}

/* Video Thumbnails / Shine */
.video-thumbnail {
  width: 100%; /* Make the container responsive */
  padding-top: 56.25%; /* Aspect ratio for 16:9 */
  position: relative; /* Needed for absolute positioning of the image */
}
.video-thumbnail::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
	pointer-events: none;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

.video-container {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
	.video-thumbnail:hover::before {
	   -webkit-animation: shine .75s;
	   animation: shine .75s;
	}
    .video-container:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
}

/* Modal */
.blocker {
	z-index: 200;
	backdrop-filter: blur(3px);
}
.modal {
	color: black;
	padding: 15px 20px 14px 20px;
	z-index: 210;
	max-width: 660px;
	font-weight: 700;
}
.modal h5 {
	font-size: 26px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #777;
	margin-top: 0;
	font-weight: 900;
}
.modal p {
	font-size: 16px;
	margin-top: 10px;
	line-height: 1.2em;
}
.modal p:first-of-type {
    margin-top: 15px;
}
.modal-close {
	display: none;
}

.modal a.close-modal {
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAY1BMVEUAAAB3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3cAAABZWVlwcHBhYWEpKSlDQ0MWFhZSUlIdHR07Ozs0NDQODg5oaGhKSkoN0NElAAAAEnRSTlMA77OlN1cg3NTCnI98dmtSMAdCE06fAAABpUlEQVRIx6WX6XLCMAyEfZA7IbDkAhro+z9lC3bSBlsmQd8vZwaN1hJey8JPXJc6SyQgk0yXdSxWs6uUxAKpqt2ayGOkJTxIHR3fxUYKJCoKC84RJA+I36d4Q7qnKlxgBYW38geNVeiDZ7sKK1E7J6/CatRL7lhjA3q57wKbKBY9wkb2/4qVYiPpX9FybCYXlggfENlzpPAB6ugk3pxa4yP0s9TO2W9OT0bzNZivwXGHR8ErOFzN77vHujXrW4tXqt9gT7nuJuD6WPdm3XhKJkQs4fJlIr7nLfRwkbGo4eNstM47aOGhFiV8dDa1TXyBj9I0ihR+NaKpZmVAQLhftCUTCUALJ0RbEiFBME6xPQikAEU7BXegoIOHKXgEBSn7fpppSNnJ+2rfWqpgWajP4ZJlQoca1Q+hZmlRhkS388L/96wDoofgqUItYkmKPpvzTAmXsc8M2pvrJKe7awZeGxoXrnWZbOWVymuAXfMElsbgGiDHelmmz7puOBcd54plXe6csYIz0LBGKc4QxxkfOYMrZ2RmDOucZwL3gcJ/GvEfZazn4A+8XseHJ9IXsgAAAABJRU5ErkJggg==');
}

/* Colorful Border For Select Creators */
@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}

:root {
	--d: 2500ms;
	--d2: 3000ms;
	--angle: 90deg;
	--gradX: 100%;
	--gradY: 50%;
	--c1: rgba(0, 0, 255, 1);
	--c2: rgba(255, 255, 0, 1);
	--c3: rgba(117, 171, 250, 1);
	--c4: rgba(255, 191, 0, 1);
}

.creator-showcase {
	border-width: 5px;
	border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
	animation: borderRotate var(--d) linear infinite forwards;
	background-color: #ffffff;
	border-radius: 0;
}

.rising-creator {
	border-width: 5px;
    border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.2turn, var(--c4) 0.25turn, var(--c3) 0.5turn) 30;
	/* each turn value is as though it were on a circle. .5 turn would be like 6 o'clock. if you turn an earlier value higher than a subsequent one, you get a sharp break in the colors intead of a blend. */
    /* border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.2turn, var(--c4) 0.35turn, var(--c3) 0.6turn, var(--c2) 0.65turn) 30; */
	animation: borderRotate var(--d2) linear infinite forwards;
	background-color: #aae7ff;
	border-radius: 0;
}


@keyframes borderRotate {
	100% {
		--angle: 450deg;
	}
}

/* Site Footer */
.site-footer {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    color: white;
    text-align: center;
    padding: 10px 0;
    display: flex; /* Enable flexbox */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center items horizontally */
	margin-top: 100px;
	font-size: 14px;
	font-weight: 600;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 10px; /* Adjusted margin for better spacing */
    text-decoration: none;
    white-space: nowrap; /* Prevent individual links from wrapping */
}

.site-footer a:hover {
	color: rgba(255, 255, 255, 1);
    text-decoration: none;
}

.site-footer p {
    margin-top: 8px;
	margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.7);
    width: 100%; /* This ensures the copyright notice is always on its own line */
	font-weight: 700;
}

/* Media query for smaller screens */
@media (max-width: 450px) {
    .site-footer {
        flex-direction: column; /* Stack elements vertically on small screens */
    }
}

/* Photoswipe */
    .pswp__top-bar,
    .pswp__caption {
      background: none;
    }
	.pswp__button--share,
	.pswp__caption {
	  display: none;
	}

/* Licenses */
/* Hover Shine Effect Adapted From Code Provided By Naoya
Copyright (c) 2023 Naoya (https://codepen.io/nxworld/pen/ZYNOBZ)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

------------------------------------------------------------------------------------

Chasing Color Border CSS Based In Part On Code By Michelle Barker
Copyright (c) 2023 Michelle Barker (https://codepen.io/michellebarker/pen/gOMBPQj)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. -->