:root{
	--mainColor: #eaeaea; /*Main Color of the Website*/
	--secondaryColor: #fff; /*Secondary Color of the Website*/
	--borderColor: #c1c1c1; /*Border Color of the Website*/
	--mainText: black; /*Controls Color*/
	--secondaryText: #4b5156;
	--themeDotBorder: #24292e; /*Theme for border around theme color circle*/
	--previewBg:rgb(251, 249, 243, 0.8); /*RGB color code for the box in Right Column*/
	--previewShadow: #f0ead6;

	--buttonColor: black; /*Color of the send button on contact form*/
}

html, body{
	padding:  0;
	margin: 0;
}

/*Transition time for color change for theme of website*/
body *{
	transition: 0.4s;
}
/*Font for headers and main (under head in html)*/
h1, h2, h3, h4, h5, h6, strong{
	color: var(--mainText); /*Controls Color of Header 1(first object and we called it)*/
	font-family: 'Sora', sans-serif; /*Font Sora*/
	font-size: 500px;
}
/*Font for sub Text in the title block (under head in html)*/
p, li, span, label, input, textarea{
	color: var(--secondaryText);
	font-family: 'JetBrains Mono', monospace; /*Font JetBrains Mono*/
}

/*Link Decoration */
a{
	text-decoration: none; /* Gets rid of underline on links */
	color:  #db3600; /*Color of link text */
}

/*List Decoration*/
ul{
	list-style: none; /*Get read of bullet points on lists*/
}

/*Font sizes of the headers*/
h1 {font-size: 56px;}
h2 {font-size: 36px;}
h3 {font-size: 28px;}
h4 {font-size: 24px;}
h5 {font-size: 20px;}
h6 {font-size: 16px;}

/*In the html code, we have class of s1 and these are the colors for the background
and border of those classes*/
.s1{
	background-color:  var(--mainColor);
	border-bottom:1px solid var(--borderColor);
	overflow: auto;
}

/*In the html code, we have class of s2 and these are the colors for the background
and border of those classes*/
.s2{
	background-color:  var(--secondaryColor);
	border-bottom:1px solid var(--borderColor);
	overflow: auto;
}

/*Formats text of main container to be properly centered */
.main-container{
	width:  1200px;
	margin:  0 auto; /*auto center*/
}

.greeting-wrapper{
	display: grid; /*shows grid */
	text-align: center; /*Centers Text Vertical */
	/* justify-content: center; /*Centers Content Vertical */
	align-content: center; /*Center Content Horizontal*/
	/*border: 1px dashed lightcoral; */
	min-height: 10em; /*Space between Title and Upper and Lower section of box*/
}

.intro-wrapper{
	background-color:  var(--secondaryColor);
	border: 1px solid var(--borderColor);
	border-radius: 5px 5px 0 0; /*shadow*/

	/*box shadow code for css: cssmatic.com/box-shadow */
	-webkit-box-shadow:  -1px 1px 3px -1px rgba(0,0,0,0.75);
	-moz-box-shadow:  -1px 1px 3 px -1px rgba(0,0,0,0.75);
	box-shadow: -1px 1px 3 px -1px rgba(0,0,0,0.75);
	display: grid;
	grid-template-columns: 1fr 1fr; /*2 columns with each having 1 header*/
	/*grid-template-rows: 3em 30em; */
	grid-template-areas:
		'nav-wrapper nav-wrapper' /*Spanning nav-wrapper across both columns up top*/
		'Left-Column Right-Column' /*Spanning left-col & right-col across an ind. col on bottom*/
	;
}

.nav-wrapper{
	border-radius: 5px 5px 0 0; /*shadow*/
	grid-area: nav-wrapper; /*Giving grid-area a name. Used for Navigation Row*/
	/*border: 1px dashed lightcoral; */
	border-bottom: 1px solid var(--borderColor);
	display:  flex; /*Creates space between items on nav bar*/ /*css-tricks.com*/
	justify-content: space-between; /*Pushed items to opposite sides on nav bar*/
	align-items: center; /*Centers the Nav bar horizontally*/
	background-color: var(--mainColor);
}

/*Change the Contact Tag color to be the main text color*/
#navigation a{
	color: var(--mainText);
}

#navigation{
	margin: 0;
	padding: 10px;
}

#navigation li{
	display: inline-block; /*Inline the elements*/
	margin-right: 5px;
	margin-left: 5px;
}

.dots-wrapper{
	display: flex; /*Switches the orientation of the dots*/
	padding: flex;
}

/*Red Dot*/
#dot-1{
	background-color: #FC6058;
}
/*Yellow Dot*/
#dot-2{
	background-color: #FEC02F;
}
/*Green Dot*/
#dot-3{
	background-color: #2ACA3E;
}

/*Creating the rules and basic descriptions of what the dots are in the class broswer-dots */
.browser-dot{
	background-color: black; /* default color if not color is declared*/
	height: 15px;
	width: 15px;
	border-radius: 50%;
	margin: 5px;
	-webkit-box-shadow:  -1px 1px 3px -1px rgba(0,0,0,0.75);
	-moz-box-shadow:  -1px 1px 3 px -1px rgba(0,0,0,0.75);
	box-shadow: -1px 1px 3 px -1px rgba(0,0,0,0.75);
}

.Left-Column{
	grid-area: Left-Column; /*Giving grid-area a name. Used for Navigation Row*/
	/*border: 1px dashed lightcoral; */
	padding-top: 50px; /*https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top*/
	padding-bottom: 50px;
}

/*Data that configures the profile picture */
#profile_pic{
	display: block;
	margin: 0 auto; /*center imagine*/
	height: 275px;
	width: 300px;
	object-fit: scale-down; /*Make sure that imagine is cropped correctly*/
	border: 2px soldi var(--borderColor);
}

/*Data that configures the orientation of theme color circles */
#theme-options-wrapper{
	display: flex; /*Creates space between circles under profile pic*/ /*css-tricks.com*/
	justify-content: center;
}

/*Data that configures the theme color circles */
.theme-dot{
	height: 30px;
	width: 30px;
	background-color: black;
	border-radius: 50%;

	margin: 5px;
	border:  2px solid var(--themeDotBorder);
	/*shadow theme*/
	-webkit-box-shadow:  -1px 1px 3px -1px rgba(0,0,0,0.75);
	-moz-box-shadow:  -1px 1px 3 px -1px rgba(0,0,0,0.75);
	box-shadow: -1px 1px 3 px -1px rgba(0,0,0,0.75);
	/*when the cursos goes over the circles it will create a pointer*/
	cursor: pointer;
}

/*Light light for theme color circles*/
/*Make post pulse when hovering above it*/
.theme-dot:hover{
	border-width: 5px;
}
/*Creating the circles for the theme circles*/
#light-mode{
	background-color: #fff;
}
#dark-mode{
	background-color: #181818;
}
#orange-mode{
	background-color: #e2b992;
}
#purple-mode{
	background-color: #7E4C74;
}
#green-mode{
	background-color: #78866b;
}


/*Format of the setting's note...Change text in home.html file*/
#settings-note{
	font-size: 12px;
	font-style: italic;
	text-align: center;
}

/*Formatting What I do box*/
.Right-Column{
	grid-area: Right-Column; /*Giving grid-area a name. Used for Navigation Row*/
	display: grid;
	align-content: center;

	padding-top: 50px;
	padding-bottom: 50px;
	/*border: 1px dashed lightcoral; */
}

/*Creates Shadow behind What I do box*/
#preview-shadow{
	background-color: var(--previewShadow);
	width: 320px;
	height: 210px;
	padding-left: 30px;
	padding-top: 30px;
}

#preview{
	width: 300px;
	border: 1.5px solid #17a2b8;
	background-color: var(--previewBg);
	padding: 15px;
	position: relative; /*Setting the parent position to relative. This will create the effect of circles being on the corners of the blue rectangle*/
}

/*Creating the circles that go on the 4 corners of the rectangle*/
.corner{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1.5px solid #17a2b8;
	background-color: #fff;
	position: absolute;
}

#corner-tl{
	top: -5px;
	left: -5px;
}

#corner-tr{
	top: -5px;
	right: -5px;
}

#corner-bl{
	bottom: -5px;
	left: -5px;
}

#corner-br{
	bottom: -5px;
	right: -5px;
}

.about-wrapper{
	display: grid;
	/*autofit as many columns as you can but start stacking once box gets to 320px*/
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	padding-top: 50px;
	padding-bottom: 50px;
	gap: 100px;
}

/*Information that surrounds Skills section*/
#skills{
	display: flex;
	justify-content: space-evenly; /*evenly spaces the list of items*/
	background-color: var(--previewShadow);
}

.social-links{
	display: grid;
	align-content: center;
	text-align: center;
}

#social_img{
	height: 300px;
	width: 100%;
	object-fit: scale-down;
}

/**/
.post-wrapper{
	display: grid;
	grid-template-columns: repeat(auto-fit, 320px);
	gap: 20px;
	justify-content: center;
	padding: 50px;
}

.post{
	border: 1px solid var(--borderColor);
	/*shadow theme*/
	-webkit-box-shadow:  -1px 1px 3px -1px rgba(0,0,0,0.75);
	-moz-box-shadow:  -1px 1px 3 px -1px rgba(0,0,0,0.75);
	box-shadow: -1px 1px 3 px -1px rgba(0,0,0,0.75);
	cursor: pointer;
}

/*Make post pulse when hovering above it*/
.post:hover{
	border-width: 5px;
}

/*Formatting thumbnail*/
.thumbnail{
	display: block;
	width: 100%; 
	height: 250px;
	object-fit: cover;
	
}

.post-preview{
	background-color: #fff;
	padding: 15px;
}

.post-title{
	color: black;
	margin: 0;
}

.post-intro{
	color: #4b5156;
	font-size: 14px;
}

/*Formats the contact form*/
#contact-form{
	display: block;
	max-width: 600px;
	margin:  0 auto;
	border: 1px solid var(--borderColor);
	padding:  15px;
	border-radius: 5px;
	background-color: var(--mainColor);
	margin-bottom: 50px;
}

/*Creating space between the label and the text box*/
#contact-form label{
	line-height: 2.7em;
}

/*Creates a larger text box size for message box */
#contact-form textarea{
	min-height: 100px;
	font-size: 14px;
}

/*Input Field formating for Contact Information*/
.input-field{
	width:  100%;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: var(--secondaryColor);
	border-radius: 5px;
	border: 1px solid var(--mainColor);
	font-size: 14px;
}

/*Format for send button*/
#submit-btn{
	margin-top: 10px;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #fff;
	background-color: var(--buttonColor);
	border: none;
}

/*Format the slide show on the Mobile SAR Radar*/
/*Lines 409 - 503ish*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  /*max-*/
  width: 600px;
  position: relative;
  margin: auto;
  object-fit: cover;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #82eefd;
  font-size: 24px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #FF2620;
  font-size: 16px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*SAR Layout in the Mobile SAR Vehicle*/
#SAR_Layout {
	display: block;
	margin: 0 auto; /*center imagine*/
	height: 500px;
	width: 500px;
	object-fit: scale-down; /*Make sure that imagine is cropped correctly*/
	border: 2px soldi var(--borderColor);
}

#Modulator{
	display: block;
	margin: 0 auto; /*center imagine*/
	height: 400px;
	width: 550px;
	object-fit: scale-down; /*Make sure that imagine is cropped correctly*/
	border: 2px soldi var(--borderColor);
}

/*Used for Spacing on the Modulator/Video Amplifier Information*/
.Non-About{
	display: grid;
	/*autofit as many columns as you can but start stacking once box gets to 320px*/
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	padding-top: 10px;
	padding-bottom: 10px;
	gap: 50px;
}

#LPF{
	display: block;
	margin: 0 auto; /*center imagine*/
	height: 200px;
	width: 700px;
	object-fit: scale-down; /*Make sure that imagine is cropped correctly*/
	border: 2px soldi var(--borderColor);
}

#Output-Final{
	display: block;
	margin: 0 auto; /*center imagine*/
	height: 400px;
	width: 700px;
	object-fit: scale-down; /*Make sure that imagine is cropped correctly*/
	border: 2px soldi var(--borderColor);
}




/*Adjust the text when the window size changes*/
@media screen and (max-width: 800px){
	/*If the window gets reduced below 800px, the viewing will change to hold all information is a clear manner without cropping & distorsion */
	.intro-wrapper{
	grid-template-columns: 1fr; /*1 column in the container*/
	/*grid-template-rows: 3em 30em; */
	grid-template-areas:
		'nav-wrapper ' /*Spanning nav-wrapper across both columns up top*/
		'Left-Column '
		'Right-Column' /*Spanning left-col & right-col across an ind. col on bottom*/
	;
	}

	.right-clumn{
		justify-content: center;
	}
}