*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

@font-face {

// <weight>: Use a value from 400 to 900
// <uniquifier>: Use a unique and descriptive class name

.orbitron-<uniquifier> {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
}

body {
	font-family: Orbitron, sans-serif;
	color: #000;
	cursor: default;
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
	width: 0px;
}

::selection,
::-moz-selection {
	background: none;
	color: #BCBCBC;
}

/* ---------------- HEADER ---------------- */

header {
	position: fixed;
	bottom: 0;
	width: 100%;
	color: #000;
	z-index: 0;
    flex-wrap: wrap;
}

.wrap {
	padding-bottom: 10px;
}

	.lower {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		width: 100%;
	}

	.lower a{
		color: #A6A6A6;
		text-decoration: none;
		cursor: default;
		display: inline-block;
	}

	.lower a:hover{
		color: #000;
		text-decoration: none;
		cursor: default;
	}

		.name,
		.instagram,
		.contact,
		.copyright{
			padding: 5px 15px;
			line-height: .95rem;
			display: inline-flex;
		}

			.name{
				padding-right: 150px;
			}

			.copyright{
				padding: 5px 0;
			}

.bio{
	padding: 15px 15px;
    width: 100%;
    z-index: -100;
}
	.bio p{
		padding-bottom: 15px;
		max-width: 80%;
		line-height: 15px;
	}

.gallery-container{
    position: absolute;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 20px 15px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    }

    .gallery-item {
        height: 40px;
        margin: 2.5px;
        overflow: hidden;
        will-change: transform;
    }

    .gallery-item img,
    .gallery-item video{
        height: 40px;
        width: auto;
        display: block;
        object-fit: contain;
    }

        .category{
        	font-size: .95rem;
        	margin: 2.5px;
        	line-height: .8rem;
        }

/* ---------------- HOVER BG ---------------- */

#hover-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(10px) brightness(.9);
    opacity: 0;
    default-events: none;
}

#hover-bg.active {
    opacity: 1;
}

/* ---------------- LIGHTBOX ---------------- */

.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    justify-content: center;
    align-items: center;
}

	.lightbox-content {
	    max-width: 90%;
	    max-height: calc(100% - 30px);
	    display: flex;
	    justify-content: center;
	}

	.lightbox-content img, 
	.lightbox-content video {
	    max-width: 100%;
	    max-height: 100vh;
	    object-fit: contain;
	}

/* ---------------- BUTTON ---------------- */

	.close-btn{
	    position: absolute;
		color: #000;
	    top: 10px;
	    right: 15px;
	    font-size: 1.5em;
	    cursor: default;
	    z-index: 2;
	}

	.nav-btn {
		font-family: Orbitron, sans-serif;
		font-weight: 700;
	    position: fixed;
	    top: 50%;
	    transform: translateY(-50%);
	    background: none;
	    border: none;
	    color: #000;
	    font-size: 2.5em;
	    cursor: default;
	    z-index: 1;
	    -webkit-tap-highlight-color: transparent;
	    -webkit-touch-callout: none;
	    outline: none;
	    transition: background 0.15s ease;
	}

	.prev-btn { left: 15px; }
	.next-btn { right: 15px; }

	.close-btn:hover,
	.nav-btn:hover {
	    color: #a6a6a6;
	}

	.prev-btn::before { content: '←'; }
	.next-btn::before { content: '→'; }

	.back-to-top {
        display: none;
    }

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 1024px) {

	.bio p{
    		max-width: 100%;
    	}
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 768px){


	.top-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
        background-color: #fff;
    }

    header,
    .bio{
        position: relative;
        top: auto;
        bottom: auto;
        width: 100%;
    }

    	.bio {
    		margin-top: 55px;
        	padding: 0 15px;
    	}

    	.bio p{
    		max-width: 100%;
    	}

    .wrap {
    	padding-bottom: 0px;
    }

    	.lower {
    		display: inline;
    	}

	    	.name,
			.instagram,
			.contact,
			.copyright{
				display: flex;
			}

				.name{
					padding-right: 0px;
					padding-bottom: 45px;
				}

				.copyright{
					display: inline-flex;
					padding-bottom: 10px;
					padding-left: 0;
				}

    .gallery-container{
        position: relative;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
        left: 0;
        transform: none;
        background-color: rgba(255, 255, 255, .5);
        padding: 5px 20px;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        }

        .gallery-item {
        	width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
        }

        .gallery-item img,
        .gallery-item video{
            height: auto;         
            width: 40%;
        }

            .category{
            	margin: 2.5px;
            	line-height: 1.75rem;
            }

    .nav-btn {
    	color: transparent;
	    font-size: 30px;
	    padding: 10px;
	    transform: none;
	    }

	.prev-btn,
	.next-btn{
		width: 50%;
		height: 100%;
		opacity: 0;
	}

    .close-btn:hover,
    .nav-btn:hover {
        color: transparent;
    }

    .close-btn{
	    position: fixed;
		top: auto;
		right: auto;
	    bottom: 5px;
	    left: 50%;
	    transform: translateX(-50%);
	    font-size: .95rem;
		}

	.back-to-top {
        display: block;
        padding-top: 5px;
    	}
}