@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@200;400;500;800&family=Nunito+Sans:wght@700&family=Open+Sans:wght@700&family=Permanent+Marker&display=swap');
/*
font-family: 'Hanken Grotesk', sans-serif;
font-family: 'Nunito Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Permanent Marker', cursive;
*/

/*------------Adds Text Responsiveness---------------*/

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}

:root {
	--bg-black1: #0e1111;
	--bg-black2: #232b2b;
	--bg-black3: #353839;
	--bg-black4: #3b444b;
	--bg-black5: #414a4c;
	--grey-white: #D3D3D3;
	--dark-green: #1DB954;
  --darker-green: #137736;
  --darkest-green: #020e06;
}
/*
background color
#414a4c,#3b444b,#353839,#232b2b,#0e1111
accent color
#391e63,#c2185b,#9c27b0,#5727b0,#272ab0,#276bb0,#57acdc,#57dcbe,#60c689, #1DB954
#red, purple, dark blue, light blue, terqoiz, green, spotify green
*/
body, html {
	margin:0;
	padding:0;
}
.testr {
	border: 1px solid red;
}
.testg {
	border: 1px solid green;
}
.testb {
	border: 1px solid blue;
}
.testy {
	border: 1px solid yellow;
}

section{
	background: var(--bg-black1);
	font-family: 'Hanken Grotesk', sans-serif;
	color:white;
}
/*------------Page 1 CSS---------------*/

@media only screen and (max-width: 992px) { /*hide navbar for med and below screens*/
	.hide-lg{
		display:none;
	}
}

.sec-1{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),url("./src/daniel-leone-v7daTKlZzaw-unsplash.jpg") no-repeat center center;
  -webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;

}


/*
body{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),url("./src/daniel-leone-v7daTKlZzaw-unsplash.jpg") no-repeat center center;
  -webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;

}
*/
#iam{
	font-family: 'Permanent Marker', cursive;
}
#name{
	font-family: 'Hanken Grotesk', sans-serif;
}
#title{
	color: #1DB954
}

.downarrow-sec1{
	text-align:center;
}
.navbar-btn-container{
	text-align:end;
}
.navbar-btn-container.navbar-toggler{
	border: none;
}
.navbar-btn:focus{
	outline: 3px solid var(--dark-green) !important;
}
.socials{
  display:flex;
  gap: 15px;
}
.social{
  fill:var(--bg-black5);
  height:30px;
  width:30px;
}
.social:hover {
  fill:var(--grey-white);
  transform: scale(1.25)
}
/*------------Page 2 CSS---------------*/
.left{
	background-color: var(--dark-green);
}

.mail{
	color: var(--dark-green);
}
.left-right-wrapper{
	flex:1;
}
.AboutMe{
  padding-bottom:20px;
}
@media only screen and (min-width: 992px) { /*hide navbar for med and below screens*/
	.sec2-content{
		padding: 0px 2rem;
	}
	.sec-2{
		position:relative;
    background-color:var(--bg-black1);

	}
	.downarrow-container{
		position:absolute;
		top:95%;
		background-color:transparent;
	}
	.right {
		display:flex;
		gap: 2.5rem;
	}
	.AboutMe{
		position: relative;
		padding: 35px;
		padding-left: 40px;
		right: 50%;
		margin: 0px auto;
		background-color:var(--bg-black1);
		border-radius: 100px;
	}
}
.headshot {
	border-radius: 10%;
	position:relative;
	-webkit-box-shadow: -23px 23px 0px 4px #000000; 
	box-shadow: -0.25rem 0.25rem 0px 0.25rem #137736;
}




/*------------Page 3 CSS---------------*/
.sec-3 h5{
  color:var(--dark-green)

}
.sec-3{
  background: rgb(14,17,17);
  background: linear-gradient(180deg, rgba(14,17,17,1) 17%, rgba(6,40,5,1) 46%, rgba(7,46,6,1) 72%, rgba(10,63,8,1) 100%);
}
.circle {
  padding: 13px 20px;
  border-radius: 50%;
  background-color: var(--dark-green);
  color: #fff;
  max-height: 50px;
  z-index: 2;
}

.vertical-line.row .col-2 {
  align-self: stretch;
}
.vertical-line.row .col-2::after {
  content: "";
  position: absolute;
  border-left: 3px solid var(--dark-green);
  z-index: 1;
}
.vertical-line.row .col-2.bottom::after {
  height: 50%;
  left: 50%;
  top: 50%;
}
.vertical-line.row .col-2.full-even::after {
  height: 100%;
  left: calc(50% - 3px);
}
.vertical-line.row .col-2.full-odd::after {
  height: 100%;
  left: calc(50%);
}
.vertical-line.row .col-2.top::after {
  height: 50%;
  left: calc(50% - 3px);
  top: 0%;
}


.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 3px solid var(--dark-green);
  margin: 0;
  top: 17px;
  position: relative;
}
.timeline .col-2 {
  display: flex;
  overflow: hidden;
}
.timeline .corner {
  border: 3px solid var(--dark-green);
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.timeline .top-right {
  left: 50%;
  top: -50%;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}
.timeline .top-left {
  left: -50%;
  top: -50%;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}
.architectural-diag{
  border-radius: 5%;
}

@media only screen and (min-width: 992px) { /*rescales architectural diagram for smaller devices*/

  .architectural-diag{
    height: 650px;
    border-radius: 5%;
  }
}