/*** Custom CSS ***/

/* Variables */

:root {
	--main-color: rgb(0, 22, 38);
	--secundary-color: rgb(0, 255, 234);
}

/* Anchor scrolling fix: source: https://stackoverflow.com/questions/49331572/offset-scroll-anchor-in-html-with-bootstrap-4-fixed-navbar */
html {
	scroll-padding-top: 110px;
}

body,
nav {
	background-color: var(--main-color);
	font-family: "Roboto", sans-serif;
}

nav {
	font-weight: 200;
	font-size: 1.1rem;
}

a.nav-link:hover {
	color: var(--secundary-color) !important;
}

ul {
	padding: 0;
}

li {
	padding: 0.5rem;
	list-style-type: none;
}

.secundary-color {
	color: var(--secundary-color);
}

.main-color {
	color: var(--main-color);
}

.c-fw-800 {
	font-weight: 800;
}

/* Hero - Blinking cursor color */

.typed-cursor {
	color: var(--secundary-color);
}

/* Portfolio */

#portfolio .container-fluid,
#portfolio .container-sm,
#portfolio .container-md,
#portfolio .container-lg,
#portfolio .container-xl,
#portfolio .container-xxl {
	max-width: 1920px;
}
#portfolio .container-fluid .portfolio-box,
#portfolio .container-sm .portfolio-box,
#portfolio .container-md .portfolio-box,
#portfolio .container-lg .portfolio-box,
#portfolio .container-xl .portfolio-box,
#portfolio .container-xxl .portfolio-box {
	position: relative;
	display: block;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
#portfolio .container-sm .portfolio-box .portfolio-box-caption,
#portfolio .container-md .portfolio-box .portfolio-box-caption,
#portfolio .container-lg .portfolio-box .portfolio-box-caption,
#portfolio .container-xl .portfolio-box .portfolio-box-caption,
#portfolio .container-xxl .portfolio-box .portfolio-box-caption {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	text-align: center;
	opacity: 0;
	color: #fff;
	background: rgba(0, 22, 38, 0.92);
	transition: opacity 0.6s ease;
	text-align: center;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-sm .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-md .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-lg .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-xl .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-category {
	font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
		"Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-sm .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-md .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-lg .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-xl .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-name {
	font-size: 1.2rem;
}
#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-sm .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-md .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-lg .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-xl .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-xxl .portfolio-box:hover .portfolio-box-caption {
	opacity: 1;
}

/* Contact */

input,
textarea {
	border-style: solid;
	/* border-radius: 10rem; */
	border-width: thin;
	border-color: slategray;
	border-top: none;
	border-left: none;
	border-right: none;
	background-color: var(--main-color);
	color: white;
	width: 100%;
	height: 3rem;
	padding: 1rem;
	font-weight: 300;
	margin: 0.6rem 0;
}

input::placeholder,
textarea::placeholder {
	color: white;
}

textarea {
	height: 8rem;
}

.form-btn {
	border: none;
	border-radius: 0.5rem;
	background-color: var(--secundary-color);
	color: var(--main-color);
	/* font-weight: 400; */
	padding: 0.6rem 1.2rem;
	margin-top: 0.3rem;
}

.c-contact-link {
	text-decoration: none;
	color: white;
}

.c-contact-link:hover {
	color: var(--secundary-color);
}

/* Footer */
footer {
	background-color: white;
	color: var(--main-color);
	font-size: 0.8rem;
	font-weight: 300;
}

/* Debugging */
.c-border {
	border-style: solid;
	border-color: #00ffea;
}