@import url('https://use.typekit.net/wat2eya.css');
@import url('https://fonts.googleapis.com/css2?family=Nova+Cut&display=swap');
<link href="https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&family=Satisfy&display=swap" rel="stylesheet">
@import url('https://fonts.googleapis.com/css2?family=Astloch:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

@font-face {
	font-family: "Playfair Display";
	src: local("Playfair Display Regular"), local("PlayfairDisplay-Regular"), url("https://fonts.gstatic.com/s/playfairdisplay/v14/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Tangerine";
	src: local("Tangerine Regular"), local("Tangerine-Regular"), url("https://fonts.gstatic.com/s/tangerine/v11/IurY6Y5j_oScZZow4VOxCZZM.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
 	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  	font-family: "Arizonia script=all rev=2";
  	src: url("https://fonts.gstatic.com/l/font?kit=neIIzCemt4A5qa7mv6WDBCMzcLTXilc7gwOj66YCU52YXFjZU4AVlM8sFhN-84zDDJo-T0Hzs1DjWNcfYEp-zE2xKtOXMkns0u2DpNv-n7LWz3xsqRh4w3ZziMlhsOtApxReMPkjfnDAZ4qw1CMGnvyRQ5LTTJctZ4rR-HOcUoK2cA-GhVpw08OdbH0G_ios1mn4CHsTT-eSTfDG&skey=940a156b384ad39&v=v10") format("woff2");
  	font-style: normal;
  	font-weight: 400;
}

@font-face {
    font-family: 'black_savior_regular';
    src: url('black_savior-webfont.woff2') format('woff2'),
         url('black_savior-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
	background:url('Grid Background Shorter.png'), black; 	background-size:cover; height:309px;
}

a {
	color:white;
	font-family: brim-narrow, sans-serif;
}

a:link {
	color:white;
	font-family: brim-narrow, sans-serif;
}

a:hover {
	color:gray;
	font-family: brim-narrow, sans-serif;
}

a:active {
	color:white;
	font-family: brim-narrow, sans-serif;
}

a.dropdown-item:link {
	color:gray;
	font-family: brim-narrow, sans-serif;
}

a.dropdown-item:hover {
	color:black;
	font-family: brim-narrow, sans-serif;
}

p {
	font-family: 'Nova Cut', cursive;
}

h1 {
	font-family: 'Nova Cut', cursive;
}

button:focus {
	outline:none;
}


.jumbotron.jumbotron-fluid {
	margin-bottom:0px; 
	padding-bottom:0px;
	text-align:center; 
	background-color:transparent;
	justify-item:center;
}

.bd-placeholder-img {
	font-size: 1.125rem; 
	text-anchor: middle; 
	-webkit-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
	user-select: none;
}

.navbar-toggler.toggler .navbar-toggler-icon {
	background-image: url('https://mdbootstrap.com/img/svg/hamburger2.svg?color=fff');
}

.col-md-4 {padding:0px;}

#longer-background {
	background:url('Grid Background Longer.png'), black;
	background-size:cover; height:1239px"
}

#dot {
	position:fixed; 
	height:20vw; 
	width:40vw; 
	background-color: white; 
	border-radius: 50%; 
	display: inline-block; 
	left:50%; 
	transform:translate(-50%,-50%);
}

#diamond-top {
	width: 0; 
	height: 0; 
	border-left: 50vw solid transparent; 
	border-right: 50vw solid transparent; 
	border-top: 6vw solid white; 
	left:50%; 
	transform:translate(-50%,0%)
}

#diamond-bottom {
	width: 0; 
	height: 0; 
	border-left: 50vw solid transparent; 
	border-right: 50vw solid transparent; 
	border-bottom: 6vw solid white;
}

#profile-pic {
	float:left; 
	margin-left:10%; 
	margin-top:4vmin; 
	width:50%; 
}

#profile-image {
	width:50vmin;
	margin-top:4vmin; 
	margin-bottom:4vmin;
}

#profile-bio {
	float:right; 
	margin-right:10%; 
	margin-top:4vmin; 
	width:25%; 
	text-align:left;
}

#profile-bio-inner { 
	float:right; 
	margin-right:0%; 
	margin-top:0%; 
	width:100%; 
	position:relative; 
	text-align:left; 
	font-size:2vmin; 
	color:white;
}

#contact-info {
	position:fixed; 
	top:50%; 
	left:50%; 
	transform:translate(-50%,-50%);
}

#middle {
	display: block;
	text-align:center; 
	width:90vmin; 
	position:fixed; 
	top:50%; 
	left:50%; 
	transform:translate(-50%,-50%);
}

#middle-contact {
	background-color:black; 
	text-align:center; 
	width:50%; 
	height:100%; 
	position:fixed; 
	top:50%; 
	left:50%; 
	transform:translate(-50%,-50%);
}

#middle-links {
	color:black;
}

#middle-links:link {
	color:black;
}

#middle-links:hover {
	color:gray;
}

#middle-links:visted {
	color:black;
}

#caption-title {
	z-index:999; 
	font-family:brim-narrow-combined-1, sans-serif;
	font-size:5vmin; 
	text-align:center; 
	color:white; 
	margin:4vmin;
}

#caption-body {
	color:white; 
	text-align:left; 
	margin-left:4vmin; 
	margin-right:4vmin;
}
#caption-link {
	z-index:999; 
	font-family:brim-narrow-combined-1, sans-serif;
	font-size:4vmin; 
	text-align:center; 
	color:white; 
	margin:0vmin;
}

#contact-title {
	z-index:999; 
	font-family:brim-narrow-combined-1, sans-serif; 
	font-size:15vmin;
	color: white;
	margin-top:4vmin;
}

#big-stara {
	z-index:999; 
	font-family:brim-narrow-combined-1, sans-serif; 
	font-size:15vmin; 
	position:fixed; 
	top:50%;
	left:50%; 
	transform:translate(-50%,-180%);
}

#big-diamond {
	font-family:brim-narrow-combined-1, sans-serif;
	font-size:15vmin; 
	position:fixed; 
	top:50%; 
	left:50%; 
	transform:translate(-50%,-110%);
}

#big-name {
	width:35vmin; 
	position:fixed; 
	top:50%; 
	left:50%; 
	transform:translate(-50%, -85%);
}

#big-logo {
	width:8%; 
	position:fixed; 
	top:50%; 
	left:50%; 
	transform:translate(-50%, 0%);
}

#middle-nav {
	font-weight:lighter; 
	font-size:1.2vw; 
	padding-left:0px; 
	padding-right:0px; 
	position:fixed; 
	top:50%; 
	left:50%; 
	transform:translate(-50%, 150%);
}

#bar-image {
	z-index:1; 
	width:60%; 
	text-align:center; 
	position:fixed; 
	left:50%; 
	transform:translate(-50%, 0%);
}

#testing {
	color:blue;
}

#card-styling {
	background-color:white; 
	border:none; 
	margin:10%;
	width:80%;
}

#scaled-link {
	width:90%; 
	height:90%; 
	background-color:transparent; 
	margin-left:auto; 
	margin-right:auto; 
	margin-top:auto; 
	margin-bottom:2vmin;
}


#scaled-link:hover {
	width:100%; 
	height:100%; 
	margin-left:auto; 
	margin-bottom:-10%; 
	margin-right:auto; 
	transition: 0.5s ease;
}

#gallery-image {
	box-sizing:border-box
	width:100%; 
	height:100%; 
	border-style:solid;
	border-width:0.1vw 0.1vw 0vw 0.1vw; 
	border-color:white;
	border-radius:0vw;
	background-color:white; 
	margin:0px;
}

#gallery-image:hover {
	border-style:solid;
	border-width:0.5vw 0.5vw 0.4vw 0.5vw;
	border-radius:0vw;
	border-color:white;
	transition: 0.25s ease;
}

.card-body {
	width: 100%;
	padding: 0px;
}

.card-text {
	margin:auto; 
	background-color:black; 
	color:white; 
	border:0.1vw solid; 
	border-color:white;
}
.bd-placeholder-img {
	border-radius: 0px;
}

#top-navbar {
	background-color:black; 
	border-top: 0.1vw solid; 
	border-bottom:0.1vw solid; 
	border-color:white;
}

#social-media-icon {
	width:3ex;
	display:inline;
}

#main-image-holder {
	margin:auto;
	width:100vmin; 
	border-left:0.1vw solid; 
	border-right:0.1vw solid; 
	border-top:0.1vw solid; 
	border-bottom:0.05vw solid; 
	border-color:white; 
	background-color:black;
}

#main-image-individual {
	width:90vmin; 
	margin-top:5vmin; 
	margin-bottom:5vmin;
}

#iframe-image {
	margin-top:0vmin;
	margin-bottom:0vmin;
	border-top:0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#iframe-container {
	overflow: hidden;
	/* 16:9 aspect ratio */
	position: relative;
	background-color:black;
	border-color:white;
	border-top:none;
	margin-top:0vmin;
	margin-left:auto;
	margin-right:auto;
	width:100vmin;
	height:130vmin;
}

#main-image-textbox {
	width:100vmin; 
	border-left:0.1vw solid; 
	border-right:0.1vw solid; 
	border-bottom:0.1vw solid; 
	border-top:0.05vw solid; 
	border-color:white; 
	background-color:black; 
	margin:auto;
	margin-bottom:10vmin;
}

#lower-navigation {
	background-color:black; 
	border-top: 0.1vw solid; 
	border-bottom:0.1vw solid; 
	border-color:white;
	display:none;
}

#disappearing-footer {
	background-color:black; 
	border-top: 0.1vw solid; 
	border-bottom:0.1vw solid; 
	border-color:white
}

#normal-screen-bar {
	display:block;
}


.navbar-toggler.toggler {
	display:none; 
	border:0px; 
	border-radius:50%;
}



@media (min-width: 768px) {
        .bd-placeholder-img-lg {font-size: 3.5rem;}
}

@media (max-width: 414px) {
	.navbar-toggler.toggler {display:block}
	#card-styling {width:80%; margin-bottom:0px;}
	#gallery-image:hover {width:100%; height:100%;}
	#caption-title {font-size:10vmin;}
	#logo-top {display:none}
	#main-image-holder {margin:0px;}
	#main-image-textbox {margin-bottom:3vmin;}
	#normal-screen-bar {display:none;}
	#disappearing-footer {display:none;}
	#lower-navigation {display:block;}
	#middle {width:100vmin}
	#middle-links {display:none}
	#big-stara {font-size:20vmin;}
	#big-diamond {font-size:20vmin;}
	#big-logo {width:20%; transform:translate(-50%, -10%);}
}