/* GENERAL SETTINGS */
html,
body {
	margin: 0px;
	padding: 0px;
	scroll-behavior: smooth;
	font-family: 'Segoe UI', 'Lato', 'Pacifico', 'Montserrat';
}

body {
	width: 100%;
}

.container-fluid {
	padding-left: 8px;
}

/* BOOTSTRAP JUMBOTRON */
.jumbotron {
	background-color: white;
	color: white;
	margin-top: -27px;
	padding: 1px;
	font-family: Montserrat, sans-serif;
}

@keyframes rotation {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(360deg);
	}
}

/* MY PICTURE SETTINGS */
.portrait-picture {
	margin: 8px auto;
	margin-top: 53px;
	background-color: rgb(230, 221, 221);
	background-image: url(./my-picture.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 187px;
	height: 187px;
	border-radius: 50%;
	border: solid 1px lightskyblue;
}

.portrait-picture img {
	width: 100%;
}

/* MY NAME */
.jumbotron h1 {
	text-align: center;
	margin-top: 1px;
	font-weight: 900;
	font-family: "Lato", "Montserrat", "Times New Roman";
	color: white;
	text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
		0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 255, 0.1), 0 0 5px rgba(0, 0, 255, 0.1),
		0 1px 3px rgba(0, 0, 255, 0.3), 0 3px 5px rgba(0, 0, 255, 0.2),
		0 5px 10px rgba(0, 0, 255, 0.25), 0 10px 10px rgba(0, 0, 255, 0.2);
}

/* MY ACTIVITIES - SCRAMBLE TEXT*/
h2 {
	text-align: center;
	font-weight: 300;
	font-family: "Arial Narrow", 'Segoe UI', "Lato", "Montserrat", "sans serif";
	color: cyan;
	text-align: center;
	text-shadow: .1px .1px .1px black;
}

.scrambleContainer {
	margin-top: 18px;
	height: 100%;
	width: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
}

.scrambleText {
	padding-top: 1px;
	width: 100%;
	height: 35px;
	margin: auto;
}

/* PORTFOLIO  */
h3 {
	font-weight: 800;
	font-family: "Arial Narrow", 'Segoe UI', "Lato", "Montserrat", "sans serif";
	color: white;
	text-shadow: 3.5px 1.7px 1px blue;
	margin-top: 1px;
	margin-bottom: 1px;
	text-align: center;
}

h4 {
	color: cyan;
	font-weight: 800;
	margin-top: 1px;
	font-family: "Arial Narrow", 'Segoe UI', "Lato", "Montserrat", "sans serif";
}

h5 {
	font-weight: 100;
	margin-top: 3px;
	font-family: "Arial Narrow", 'Segoe UI', "Lato", "Montserrat", "sans serif";
}

@media (min-width: 768px) {
	.col-sm-2 {
		width: 20%;
	}
}

/* ROCKETS */
/* MY PORTFOLIO  */
.thumbnail {
	border-radius: 53% 53% 17% 17% / 53% 53% 44% 44%;
	width: 100%;
	max-width: 287px;
	transform-style: preserve-3d;
	padding: 1px;
	background-color: white;
	text-align: center;
	margin: auto;
	margin-top: 1px;
	border: 3.5px solid black;
	z-index: 8;
	/*box-shadow: 7px 7px 14px #cccccc, -7px -7px 14px white;
  transition: box-shadow 0.5s;*/
	animation: float 12s ease-in-out infinite;
}

@media (min-width: 1700px) {
	.thumbnail {
		width: 81%;
	}
}

@media (min-width: 2500px) {
	.thumbnail {
		width: 88%;
	}
}

@keyframes float {
	0% {
		transform: translatey(1px);
	}

	25% {
		transform: translatey(-5px);
	}

	50% {
		transform: translatey(8px);
	}

	75% {
		transform: translatey(-5px);
	}

	100% {
		transform: translatey(1px);
	}
}

.thumbnail:hover {
	box-shadow: inset 7px 7px 14px #cccccc, inset -7px -7px 14px white;
}

/* GREEN ESCAPADE APP */
.thumbnail .window1 {
	display: block;
	margin-top: 35px;
	margin-bottom: 35px;
	margin-left: auto;
	margin-right: auto;
	width: 98px;
	height: 98px;
	border-radius: 50%;
	border: 10px solid springgreen;
	background-image: url(./green-escapade.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

/* NOBILIO DELICATE APP */
.thumbnail .window2 {
	display: block;
	margin-top: 35px;
	margin-bottom: 35px;
	margin-left: auto;
	margin-right: auto;
	width: 98px;
	height: 98px;
	border-radius: 50%;
	border: 10px solid magenta;
	background-image: url(./nobilio.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

/* VIDEO SETTINGS */
.thumbnail img {
	display: block;
	margin-top: 18px;
	margin-left: auto;
	margin-right: auto;
	width: 98%;
	height: 98px;
}

video {
	display: block;
	margin-top: 17px;
	margin-left: auto;
	margin-right: auto;
	width: 71%;
	background: transparent;
	border: .8px solid black;
}

.thumbnail::before,
.thumbnail:after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.thumbnail:after {
	height: 188px;
	width: 100%;
	border: 3.5px solid black;
	bottom: -2px;
	z-index: -10;
	transform: translateX(-50%) translateZ(-1px);
	border-radius: 53% 53% 17% 17% / 80% 80% 17% 17%;
	box-shadow: 7px 7px 14px #cccccc, -7px -7px 14px white;
}

/* THUMBNAIL AS A LINK - CLICKABLE SURFACE */
.span-link {
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
}

.item h5 {
	font-size: 12px;
	text-align: center;
	font-style: italic;
}

@media (min-width: 768px) {
	.item h5 {
		font-size: 23px;
	}
}

.item img {
	width: 70%;
	margin: auto;
}

@media (min-width: 768px) {
	.item img {
		width: 59%;
	}
}

.item span {
	font-style: normal;
}

.col-sm-3 {
	padding: 9px;
}

@media (min-width: 769px) {
	#portfolio .col-sm-3 {
		width: 20%;
	}
}

strong {
	font-size: 20.5px;
	color: white;
	text-shadow: 1.8px 1.8px 1.8px blue;
}

#light-1 {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: auto;
	margin-bottom: 8px;
	border: 1.7px solid black;
	animation: blinking-light1 1.7s ease-in-out infinite;
}


@keyframes blinking-light1 {
	0% {
		background: transparent;
	}

	52.1% {
		background: transparent;
	}

	53% {
		background: springgreen;
	}

	99.8% {
		background: springgreen;
	}

	100% {
		background: transparent;
	}
}

#light-2 {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: auto;
	margin-bottom: 8px;
	border: 1.7px solid black;
	animation: blinking-light2 1.7s ease-in-out infinite;
}


@keyframes blinking-light2 {
	0% {
		background: magenta;
	}

	52.1% {
		background: magenta;
	}

	53% {
		background: transparent;
	}

	99.8% {
		background: transparent;
	}

	100% {
		background: magenta;
	}
}