@import url("bootstrap.css");
@import url("root.css");
@import url("code.css");
@import url("button.css");

* {
	font-family:var(--font-family--);
	line-height:1.25em;
}
:root {
	--bdur-:0.25s;
	--bw-:10px;
	--profile_image-size-: 400px;
}
::-webkit-scrollbar {
	position:absolute;
	width:10px;
}

::-webkit-scrollbar-thumb:vertical {
	position:absolute;
	top:0;
	right:0;
	width:10px;
}
::-webkit-scrollbar-thumb:horizontal {
	position:absolute;
	bottom:0;
	left:0;
	height:10px;
}
::-webkit-scrollbar-track {
	background-color:rgba(200,200,200,1.0);
}
::-webkit-scrollbar-thumb {
	background-color:rgba(50,50,50,1.0);
}
::-webkit-scrollbar-thumb:hover {
	background-color:rgba(255,50,50,1.0);
}

html, body {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	padding:0px;
	margin:0px;
	display:block;
	background-color:rgba(0,0,0,0.0);
	color: #EEE;
}
html {
	background-color:rgb(30,30,30);
}

.bg-000 {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	display:block;
}
.bg-000:before {
	clear:both;
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:200%;
	height:200%;
	z-index:-1000;
	background:radial-gradient(rgba(255,0,150,1) 10%, rgba(80,10,200,0.0));
	animation:bg_anim 10s ease-in-out 0s infinite;
}
@keyframes bg_anim {
	0%{
		top:0;
		left:0;
	}
	25%{
		top:-100%;
		left:-100%;
	}
	50%{
		top:-100%;
		left:0;
	}
	75%{
		top:0;
		left:-100%;
	}
	100%{
		top:0;
		left:0;
	}
}



div.display-000 {
	top:80px;
	overflow:hidden;
	overflow-x:hidden;
	overflow-y:auto;
	padding:10px;
	padding-bottom:100px;
	color:#DDD;
}
div.display-000::before {
	clear:both;
	content:"";
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:-1;
}


iframe {
	position:relative;
	top:0;
	left:0;
	min-width:1440px;
	width:80%;
	min-height:400px;
	outline:none;
	border:none;
}

@media only screen and (max-width: 1440px) {
	iframe {
		min-width: 80vw;
	}
}

div.overlay {
	position:relative;
	top:0;
	left:0;
	width:fit-content;
	height:fit-content;
	display:block;
}

div.overlay::after {
	clear:both;
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	outline:none;
	border:none;
	background-color:rgba(0,0,0,0.0);
	z-index:9999999999999999999;
	cursor:pointer;
}

.beval {
	clip-path:polygon(var(--hr_corner_length--) 0%, 0% var(--hr_corner_length--), 0% calc(100% - var(--hr_corner_length--)), var(--hr_corner_length--) 100%, calc(100% - var(--hr_corner_length--)) 100%, 100% calc(100% - var(--hr_corner_length--)), 100% var(--hr_corner_length--), calc(100% - var(--hr_corner_length--)) 0%);
}


button {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
	-webkit-user-drag:none;
	-moz-user-drag:none;
	-ms-user-drag:none;
	-o-user-drag:none;
	user-drag:none;
	-webkit-outline:none;
	-moz-outline:none;
	-ms-outline:none;
	-o-outline:none;
	outline:none;
}

nav.nav {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	outline:none;
	border:none;
	background-color:rgba(0,0,0,0.75);
	display:block;
	overflow:hidden;
	overflow-x:hidden;
	overflow-y:auto;
}
div.display-000 {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	outline:none;
	border:none;
	background-color:rgba(0,0,0,0.5);
}



/*
a {
	position:relative;
	top:0;
	left:0;
	padding:8px;
	cursor:pointer;
	font-family:arial;
	color:#FFF;
	font-weight:bolder;
}
a:before {
	clear:both;
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(150,10,50,0.85);
	clip-path:polygon(
		var(--bw-) 0,
		0 var(--bw-),
		0 calc(100% - var(--bw-)),
		var(--bw-) 100%,
		calc(100% - var(--bw-)) 100%,
		100% calc(100% - var(--bw-)),
		100% var(--bw-),
		calc(100% - var(--bw-)) 0
	);
	z-index:-1000;
	-webkit-transition-duration:var(--bdur-);
	-moz-transition-duration:var(--bdur-);
	-ms-transition-duration:var(--bdur-);
	-o-transition-duration:var(--bdur-);
	transition-duration:var(--bdur-);
}
a:hover:before {
	clear:both;
	content:"";
	background-color:rgba(255,50,150,0.85);
}
*/
h2 {
	position:relative;
	top:0;
	left:50%;
	transform:translateX(-50%);
	display:block;
	text-align:center;
	font-weight:bolder;
	font-size:2.0em;
	text-transform:uppercase;
	font-family:arial;
}

img.img-portfolio {
	margin-bottom:10px;
	width:var(--profile_image-size-);
	height:calc(var(--profile_image-size-) * 1.080078125px);
}


::selection {
  color: #FFF;
  background-color: rgb(200,50,100);
}

:root {
	--anim-border-size-:4px;
}

div.animated-border {
	position:relative;
	width:fit-content;
	height:fit-content;
	display:inline-block;
	padding:calc(4px + var(--anim-border-size-));
}

div.animated-border::after {
	clear:both;
	content:"";
	position:absolute;
	top:0%;
	left:0%;
	width:var(--anim-border-size-);
	height:100%;
	background-color:rgb(255,50,100);
	filter:drop-shadow(0px 0px 4px 10px);
	box-shadow:0px 0px 10px 2px rgb(255,50,100);
	animation: borderAnimation 4s ease-in-out 0s infinite;
}

@keyframes borderAnimation {
	0% {
		top:0%;
		left:0%;
		width:var(--anim-border-size-);
		height:100%;
	}
	12.5% {
		top:0%;
		left:0%;
		width:var(--anim-border-size-);
		height:var(--anim-border-size-);
	}
	25% {
		top:0%;
		left:0%;
		width:100%;
		height:var(--anim-border-size-);
	}
	37.5% {
		top:0%;
		left:calc(100% - var(--anim-border-size-));
		width:var(--anim-border-size-);
		height:var(--anim-border-size-);
	}
	50% {
		top:0%;
		left:calc(100% - var(--anim-border-size-));
		width:var(--anim-border-size-);
		height:100%;
	}
	62.5% {
		top:calc(100% - var(--anim-border-size-));
		left:calc(100% - var(--anim-border-size-));
		width:var(--anim-border-size-);
		height:var(--anim-border-size-);
	}
	75% {
		top:calc(100% - var(--anim-border-size-));
		left:0%;
		width:100%;
		height:var(--anim-border-size-);
	}
	87.5% {
		top:calc(100% - var(--anim-border-size-));
		left:0%;
		width:var(--anim-border-size-);
		height:var(--anim-border-size-);
	}
	100% {
		top:0%;
		left:0%;
		width:var(--anim-border-size-);
		height:100%;
	}
}

v-card {
    width: 320px;
    height: 450px;
    background-color: transparent;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
	display: inline-block;
	perspective: 1000px;
}

.card-cover {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 600ms cubic-bezier(.03,.98,.52,.99);
	will-change: transform;
}