style.css

/* Site Designed Mobile First */

/* General Classes */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 155px;
}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

:root {
	--clr-accent: #f06449;
}

h1,
h4,
input,
textarea,
button {
	font-family: "Montserrat Alternates", sans-serif;
}

h1 {
	font-size: 1.5em;
}

h2 {
	font-family: "DM Serif Text", serif;
}

body {
	height: auto;
	background-image: url("resources/dot-grid-custom.svg");
	background-position-x: center;
	object-fit: none;
	background-repeat: repeat;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.title-tag {
	border: solid;
	background: white;
	padding: 20px 50px;
	display: inline-block;
	font-size: 48px;
	/* box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); */
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.35);
}

.hide-window {
	visibility: hidden;
	opacity: 0;
	transition: ease-in-out;
}

.blur {
	filter: blur(3px);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}

/* Header */

nav {
	z-index: 2;
	background: rgb(0, 0, 0);
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.7203256302521008) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	display: flex;
	width: 100%;
	position: fixed;
}

ul {
	width: inherit;
	display: flex;
	justify-content: flex-end;

}

.icon {
	padding: 1em 1em;
	color: white;
}

.icon:hover {
	color: rgb(199, 199, 199);
	transform: scale(5px);
}


/* Modal */

.contact-tag {
	position: absolute;
	top: -50px;
	right: 50%;
	transform: translateX(50%);
}

.modal-x {
	color: black;
	position: absolute;
	right: 10px;
	top: 10px;
}

.contact-modal-wrapper {
	display: flex;
	justify-content: center;
}

.contact-modal {
	z-index: 1;
	position: absolute;
	margin-top: 130px;
	padding: 100px 10px 10px 10px;
	height: auto;
	width: 90vw;
	background: #f06449;
	text-decoration: none;
	border: 20px solid #000000;
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
}

form {
	display: flex;
	flex-direction: column;
}

input,
textarea {
	margin: 15px;
	font-size: 1em;
	border: none;
	padding-left: 30px;
}

textarea {
	padding-top: 0.5em;
}

.name-email-input {
	max-width: 397px;
	height: 43px;
	border-radius: 31.5px;
}

.message-input {
	max-width: 90vw;
	border-radius: 31.5px;
}

.button-wrapper {
	display: flex;
	justify-content: center;
}

.contact-submit-button {
	background: white;
	font-size: 1em;
}

.contact-button h4 {
	color: black;
}

/* Hero Section */

.hero {
	position: relative;
	height: 90vh;
	width: 100%;	
}

.hero-img {
	position: absolute;
	height: inherit;
	width: inherit;
	z-index: -1;
	border: double 15px transparent;
	background-image: url("resources/hero-mobile.png"),
		linear-gradient(360deg, #000000 0%, rgba(163, 163, 163, 0.9) 87.01%);
	border-top: none;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-position: center top;
	background-clip: content-box, border-box;
}

.hero-content-wrapper {
	height: inherit;
	width: inherit;
	position: relative;
	display: flex;
	justify-content: center;
}

.hero-content {
	position: absolute;
	bottom: 75px;
	width: 90%;
}

.down-arrow {
	position: absolute;
	bottom: 25px;
}

.brian-williams-title {
	height: 150px;
	background-image: url("resources/brian_williams_mobile.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	max-width: 535px;
}

.occupation-tag {
	text-align: center;
	color: white;
	font-weight: 100;
	padding: 1.5em 0em;
}

.down-arrow img {
	transition: 0.3s;
}

.contact-button {
	z-index: 1;
	position: absolute;
	margin: 15px;
	bottom: 0px;
	height: 45px;
	width: 90px;
	background-color: var(--clr-accent);
	border: none;
	font-size: 1em;
	border-radius: 1px 20px 1px 1px;
	transition: 0.5s;
}

.contact-button:hover {
	cursor: pointer;
	background: white;
}

/* About Section */

.about {
	padding: 150px 0px;
}

.about-tag {
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
	position: absolute;
	border-radius: 65px 0px 0px 0px;
	top: -65px;
	left: -30px;
}

.about-content-wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: rgba(245, 154, 137, 1);
	height: inherit;
	width: inherit;
	margin: 40px;
	border: dashed 2px black;
	border-radius: 112px 0px;
	box-shadow: 0px 0px 0px 20px var(--clr-accent);
}

.about-paragraph {
	padding: 80px 20px 30px 20px;
	max-width: 469px;
	margin: auto;
	line-height: 1.5em;
}

strong {
	font-size: 1.5em;
}

.more-text {
	display: none;
	
}

.toggle-more-text {
	display: inline;
	
}

.read-more-btn {
	position: relative;
	display: flex;
	justify-content: center;
	margin: -90px auto 20px auto;
	width: 100%;
	height: 80px;
	border: none;
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(254,254,254,1) 45%, rgba(148,187,233,0) 100%);
	border-radius: 0 0 50px 50px;
}

.read-more-btn h3 {
	position: absolute;
	margin: auto;
	bottom: 10px;
	font-size: 1.5em;
}

.about-img {
	margin: auto;
	margin-bottom: 35px;
	border-radius: 112px 0px;
	width: 100%;
	background-color: #000000;

	max-width: 400px;
	border: solid 4px;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

/* Skills */
.skills {
	display: flex;
}

.skills-wrapper {
	margin: auto;
	display: flex;
	flex-direction: column;
	padding: 30px 0 180px 0;
}

.skills-tag {
	margin: auto;
}

.skills-carousel {
	display: flex;
	position: relative;
	align-items: center;
	z-index: 1;
	height: 130px;
	width: 90vw;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	background: #e5e5e5;
	border: solid 3px;
	border-radius: 0px 0px 30px 30px;
	overflow: hidden;
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
}

.left-arrow, .right-arrow {
	z-index: 1;
	position: absolute;
	padding: 15px;
	background: none;
	border: none;
	outline: none;

	transition: transform .5s;
}

.left-arrow:hover{
	transform: scale(1.3);
	
}

.right-arrow:hover {
	transform: scale(1.3);
}

.left-arrow {
	visibility: hidden;
}

.right-arrow {
	visibility: hidden;
}

.slide-container {
	display: flex;
	height: 126px;
	scroll-snap-type: x mandatory;
	overflow-x: scroll;
	align-items: center;
	border-radius: 0px 0px 30px 30px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.5) 0%,
		rgba(255, 255, 255, 0) 25%,
		rgba(255, 255, 255, 0) 75%,
		rgba(255, 255, 255, 0.5) 100%
	);

	transition: transform 1s;
}

.slide-container::-webkit-scrollbar {
	display: none;
}

.slide {
	z-index: -1;
	flex: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 250px;
	height: 90px;
	scroll-snap-align: center;
	border-right: solid;
	border-color: #6e6e6f;
	border-radius: 0px;
}

.last-slide {
	border: none;
}

.swipe-tag {
	margin: auto;
	padding: 10px;
	border: solid;
	border-top: none;
	border-radius: 0px 0px 10px 10px;
	margin-bottom: 30px;
	background: var(--clr-accent);
}

/* Projects */

.projects {
	margin-bottom: 30px;
	position: relative;
	overflow: hidden;
}

.projects-wrapper {
	display: flex;
	flex-direction: column;
}

.projects-tag {
	margin: auto;
	margin-bottom: 50px;
}


.project-grid {
	margin: auto;
	max-width: 1000px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.project-card {
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
	margin: 13px;
	width: 90vw;
	max-width: 395px;
	height: 350px;
	border: solid 3px black;
	position: relative;
	background: #565b8a;
	overflow: hidden;
}

.card-bottom {
	display: flex;
	border-top: dashed 2px;
	position: absolute;
	height: 100px;
	bottom: 0px;
	padding: 15px;
	width: 100%;
	align-items: center;
	background: var(--clr-accent);
}

.card-button {
	height: 40px;
	width: 100%;
	margin: 5px;
	border: solid 3px;
	border-radius: 20px;
	background: white;
	color: black;
	
	transition: 0.2s;
}

.button-form {
	width: 45%;
	margin: 4px;
}

.card-button:hover {
	transform: scale(1.1);
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.project-1 {
	border-radius: 112px 0px 0px 0px;
}

.project-4 {
	border-radius: 0px 0px 112px 0px;
}

.project-4 .card-bottom {
	padding-right: 55px;
}

.project-image {
	display: block;
	height: 217px;
	width: auto;
	margin: auto;
	padding-top: 30px;
}

/* Footer */

footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 76px;
	background: rgb(0, 0, 0);
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.7203256302521008) 0%,
		rgba(255, 255, 255, 0) 100%
	);
}

/* .back-to-top-caret {
	border: solid;
	border-radius: 50%;
} */

/* .back-to-top-caret:hover {
	transform: scaleX(20px);
} */

/* keeps modal "X" accesable at smaller resolutions */
@media only screen and (max-width: 422px) {
	.modal-x {
		top: 73px;
	}
}

@media only screen and (min-width: 545px) {
	.more-text {
		display: inline;
	}

	.read-more-btn {
		display: none;
	}
}

/* Media at Medium screen size */
@media only screen and (min-width: 1000px) {

	/* Hero Desktop */

	.hero {
		max-width: 1920px;
		max-height: 1025px;
		margin: auto;
	}

	.hero-img {
		max-width: inherit;
		max-height: inherit;
		background-image: url(resources/hero.png),
			linear-gradient(360deg, #000000 0%, rgba(163, 163, 163, 0.9) 87.01%);
		border-radius: 0px 0px 180px 0px;
	}

	.hero-content-wrapper {
		height: inherit;
		max-height: inherit;
		width: inherit;
		max-width: inherit;
		position: relative;
		display: flex;
		justify-content: flex-end;
	}

	.hero-content {
		width: 60vw;
		height: inherit;
		max-height: inherit;
		max-width: 995px;
		padding-top: 100px;
		position: relative;
		bottom: 0px;
	}

	.brian-williams-title {
		background-image: url(resources/brian_williams.svg);
		height: 300px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		max-width: 535px;
	}

	.occupation-tag {
		position: absolute;
		width: 70%;
		right: 0px;
		font-size: 1.3em;
	}

	.down-arrow {
		position: absolute;
		bottom: 25px;
		right: 50%;
		transform: translateX(50%);
	}

	.down-arrow img:hover {
		transform: scale(1.2);
	}

	.color-blob {
		position: absolute;
		right: 0px;
		height: inherit;
		width: 35vw;
		max-width: 595px;
		max-height: inherit;
		background: rgba(240, 100, 73, 0.42);
		border-radius: 180px 0px;
	}

	.contact-button {
		height: 150px;
		width: 150px;
		border-top: solid 5px;
		border-right: solid 5px;
		font-size: 1.5em;
		border-radius: 0 100% 0 0;
		background-color: var(--background-color);
		color: #222;
		padding: 0.5em 1em;
		outline: none;
		position: absolute;
		cursor: pointer;
		--background-color: #e3e3e3;
		--border-size: 2px;
	}

	.contact-button h4 {
		margin-left: -15px;
		padding-top: 25px;
		
	}

	.contact-button.btn-background-circle::before {
		content: "";
		position: absolute;
		width: inherit;
		height: inherit;
		right: 50%;
		top: 50%;
		z-index: -1;
		background-color: var(--clr-accent);
		border-radius: 50%;
		transition: transform 500ms ease-in-out;
		transform: scale(0);
	}

	.contact-button.btn-background-circle:hover::before,
	.contact-button.btn-background-circle:focus::before {
		transform: scale(2);
	}

	.contact-button.btn-background-circle {
		z-index: 1;
		overflow: hidden;
		background-color: var(--background-color);
		transition: color 500ms ease-in-out;
	}

	/* About Desktop */

	.about {
		display: flex;
		justify-content: center;
	}

	.about-tag {
		z-index: 1;
		position: absolute;
		border: solid 1px;
		border-radius: 0px 0px 0px 0px;
		top: 35px;
		left: -80px;
		text-align: center;
		vertical-align: middle;
		width: 313px;
		height: 100px;
	}

	.about-content-wrapper {
		display: flex;
		margin-left: 10vw;
		margin-right: 10vw;
		flex-direction: column;
		background-color: var(--clr-accent);
		border: solid 15px;
		border-radius: 250px 0px 250px;
		box-shadow: 0px 0px 0px 20px black;
		width: 100%;
		max-width: 935px;
		box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
	}

	.about-paragraph {
		flex: 1;
		z-index: 0;
		border: 2px dashed #000000;
		background: rgba(245, 154, 137, 1);
		border-radius: 55px 0px 86px;
		margin: 170px 50px 0 50px;
		padding: 25px;
		max-width: none;
		line-height: 1.6em;
		box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
		top: 50px;
	}

	.about-paragraph:before {
		content: '';
		float: right;
		height: 300px;
		width: 323px;
	}

	strong {
		font-size: 1.65em;
		font-weight: bold;
		stroke: solid 15px black;
	}

	.about-img {
		position: absolute;
		right: -80px;
		top: 40px;
		border-radius: 0px;
		width: 40vw;
		max-width: 460px;
		border: solid 5px;
		box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
	}

	.course-showcase {
		margin: 40px auto;
		width: 700px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.course {
		/* background-image: url('resources/codecademy-logo.png'); */
		height: 115px;
		width: 115px;
		border: solid black 2px;
		background: white;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-position: center;
		box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.50);

		transition: .3s;
		
	}

	.course:hover {
		transform: scale(1.2);
		box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.50);
	}

	#course1 {
		background-image: url('resources/jetbrains-logo\ .png');
		background-size: 85px;
	}

	#course2 {
		background-image: url('resources/codecademy-logo.png');
		background-size: 75px;
	}

	#course3 {
		background-image: url('resources/edx-logo.png');
		background-size: 90px;
	}

	#course4 {
		background-image: url('resources/mimo-logo.png');
		background-size: 80px;
	}

	#course5 {
		background-image: url('resources/harvard-logo.png');
		background-size: 90px;
	}

	/* Projects desktop */

	.right-arrow {
		visibility: visible;
		position: absolute;
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9878326330532213) 48%);
		border-radius: 0 30px 30px 0;
		right: 0;
	}

	.left-arrow {
		visibility: visible;
		position: absolute;
		background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9878326330532213) 48%);
		border-radius:  30px 0 0 30px;
	}

	.arrow:hover {
		cursor: pointer;
	}

	.slide-container {
		overflow-x: visible;
	}

	.swipe-tag {
		visibility: hidden;
	}

	/* Modal desktop */

	.contact-modal {
		padding: 100px 50px 0px 50px;
		width: 80vw;
		max-width: 1000px;
	}

	input,
	textarea {
		font-size: 1.4em;
		border: none;
		padding-left: 30px;
	}

	input:focus,
	textarea:focus {
		border: 5px solid;
		outline: none;
	}

	.name-email-input {
		height: 63px;
	}

	.contact-submit-button {
		margin-bottom: 25px;
		width: 200px;
		height: 63px;
		border-radius: 60px;
		font-size: 1.4em;
	}
}

/* Media at large screen-size */
@media only screen and (min-width: 1500px) {

	.brian-williams-title {
		height: 500px;
		max-width: 735px;
	}

	.contact-button {
		height: 250px;
		width: 250px;
		border-top: solid 10px;
		border-right: solid 10px;
	}

	.contact-button h4 {
		font-size: 1.4em;
		margin-left: -40px;
		padding-top: 35px;
	}

	.down-arrow {
		bottom: 35px;
	}
	.down-arrow img {
		transform: scale(1.2);
	}

	.down-arrow img:hover {
		transform: scale(1.5);
	}

	.about {
		padding: 300px 0px;;
	}
	.about-content-wrapper, .projects-wrapper, .skills-wrapper {
		transform: scale(1.3);
	}

	.skills-wrapper {
		padding-top: 160px;
	}

	.projects {
		padding: 200px 0;
	}
}