html {
  scroll-behavior: smooth;
}

body {
	background-image: url(./images/officialBackground.png);
	background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Font Styles */
.font-oswald {
	font-family: 'Oswald', sans-serif;
}

.font-source-code-pro {
	font-family: 'Source Code Pro', monospace;
}

.bg-light-pink {
	background-color: #F3D8C7;
}

.bg-linen {
	background-color: #F9EAE1;
}

.bg-pink {
	background-color: #FF999C;
}

.tuscan {
	color: #7D4F50;
}

.pink {
	color: #CC8B86;
}

.bright-pink {
	color: #FF999C;
}

/* Navigation Bar */
.nav-link {
	font-size: 20px;
	color: #7D4F50;
}

.nav-link:hover {
	color: #CC8B86;
}

.connect-link {
	font-size: 40px;
	color: #7D4F50;
}

.connect-link:hover {
	color: #CC8B86;
}

/* Landing Page */
.intro {
	font-size: calc(1.625rem + 2.56vw);
	font-weight: bold;
	letter-spacing: 0.15rem;
	text-shadow: 5px 5px 15px #CC8B86;
	margin: 0;
}

.intro-name {
	font-size: calc(1.625rem + 6.56vw);
	font-weight: bold;
	letter-spacing: 0.15rem;
	text-shadow: 5px 5px 15px #F9EAE1;	
}

.intro-title {
	font-size: calc(1.625rem + 0.36vw);
	font-weight: bold;
	letter-spacing: 0.15rem;
	line-height: 0.2rem;
	text-shadow: 5px 5px 15px #CC8B86;
}

.intro-work {
	font-size: calc(1.625rem + 0.36vw);
	font-weight: bold;
	letter-spacing: 0.15rem;
	line-height: 2rem;
	text-shadow: 5px 5px 15px #CC8B86;	
}

.image-style {
	width: 73%;
}

/* About Me Page */
.header {
	font-size: calc(1.625rem + 2.56vw);
	font-weight: bold;
	letter-spacing: 0.15rem;
	text-shadow: 0px 0px 20px #CC8B86;	
}

.about-box {
	box-shadow: 0px 0px 20px #CC8B86;
	border-radius: 30px;
}

.subheader {
	font-size: calc(1.625rem + 0.15vw);
	font-weight: bold;
}

.description {
	font-size: calc(0.8rem + 0.01vw);
}

.jobPosition {
	font-size: calc(1rem + 0.05vw);
}

/* Projects Page */
.card-box {
	border-radius: 25px;
	box-shadow: 0px 0px 20px #CC8B86;
}

.card-img {
	border-radius: 20px;
}

/* Contact Me Page */
.contactInfo {
	font-size: calc(1rem + 0.10vw);
}

.form-box {
	box-shadow: 0px 0px 20px #CC8B86;
	border-radius: 25px;
}

.send_button {
	border: none;
	border-radius: 50px;
}

.send_button:hover {
	background-color: #7D4F50;
}