@charset "UTF-8";

/* add import code from google fonts */
@import url('https://fonts.googleapis.com/css2?family=Agbalumo&family=Gabarito:wght@400;600&family=Roboto:wght@300&display=swap');


@font-face {
	src: url("Aldrich-Regular.ttf") /* To add a system font which is installed in your computer, you first need to copy the font to your web project folder and then use the code to add the font in your css. */
}


.navi a:link {
	color: darkmagenta;
	text-decoration: none;
	font-size: 1.25em;
	font-family: 'Roboto', sans-serif;
	/* Add the css rule where is necessary */
}

/* this code allows the smoooth scrolling and add a space on top of each section */
html {
	scroll-padding-top:120px;
	scroll-behavior: smooth;
}

* {
	box-sizing: border-box; /* select all elements and remove all padding and margin */
	padding: 0;				/* box-sizing property is to allow any elements to collapse if the size is greater than the parent element size */
	margin: 0;
}

body {
	font-family: 'Roboto', sans-serif;
}

/* follow this rule to style all elements */

header {
	min-height: 120px;
	position: sticky;
	background-color:rgba(255,255,255,0.95);
	top: 0;
	left: 0;
	z-index: 1;
}

.logo {
	min-height: 5%;
	min-width: 5%;
	position: absolute; /* this position allows the logo to sit on the left */
	left: 0;
	top:0;
	margin: 1%;
}

.navi {
	display: flex;
	list-style: none;
	justify-content:center;
	align-content: center;
	align-items: center;
	padding: 3% 3% 0;
	gap: 3%;
}


.navi a:hover {
	color:coral;
	border-bottom: 2px solid coral;
	padding-bottom: 2%;
	transition: 0.3s ease;
}

.container {
	width: 100%;
	position: relative;
}

section {
	min-height: 100vh;
	width: 90%;
	margin: auto;
	position: relative;
}

h1 {
	font-size:2.2em;
	text-align: center;
	text-transform: uppercase;
	padding-top: 3%;
	font-family: 'Gabarito', sans-serif;
	letter-spacing: 2px;
}

h2 {
	font-size: 1.75em;
	text-align: center;
	text-transform: uppercase;
	padding-top: 1%;
	font-family: 'Gabarito', sans-serif;
	letter-spacing: 2px;
}

h3 {
	text-align: center;
	text-transform: capitalize;
	font-size: 1.45em;
	font-family: 'Gabarito', sans-serif;
	letter-spacing: 2px;
}

p {
	font-size: 1em;
	line-height: 1.25em;
}

.active {
	color: aqua;
	border-bottom: 2px solid aqua;
}

.row {
	display: flex;
	min-width: 90%;
	margin: auto;
	gap:1%;
	justify-content: center;
	align-content: center;
	padding: 2%;
}

.profile img {
	width:100%;
	height: 10%;
}

.profile {
	margin-bottom: 3%;
}

.column {
	min-width: 30%;
	min-height: 450px;
	padding: 3%;
}

.column p {
	text-align: justify;
}

.column h3 {
	margin-bottom: 1%;
}

.column-bio {
	width: 33%;
	border: 1px solid darkgray;
	padding: 2% 3% 3%;
	text-align: center;
}

.column-bio h3 {
	margin-bottom: 3%;
}


.btn_home {
	display: flex;
	justify-content: center;
	align-items: center;
}

.item {
	border: 1px solid #CBE2F8;
	text-align: center;
	margin-top: 20%;
	padding: 1%;
	width: 120px;
	background-color: hsla(209,76%,88%,0.50)
}

.item a:link {
	color: #666666;
	text-decoration: none;
	transition: 0.3s ease;
}

.item a:visited {
	color: aliceblue;
}

.item a:hover {
	color: aliceblue;
	transition: 0.3s ease;
}


.item:hover {
	background: #666666;
	border: 1px solid #666666;
	transition: 0.3s ease;
	cursor: pointer;
}

.row-bio {
	width: 80%;
}

#home {
	background-image: url("images/bg_home.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
	background-size: cover;
	width: 100%;
	left: 0;
	top: 0;
	color: aliceblue;
}

#bio {
	min-height: 40vh;
	background-color:#666666;
	position: relative;
	width: 100%;
	left: 0;
	color: aliceblue;
}

#cont {
	width: 60%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 50px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

footer {
	padding: 2.5%;
}

@media only screen and (max-width:996px) {
	html {
	scroll-behavior: smooth;
	scroll-padding-top:119px;
	}
	
	.logo {
		position: relative;
		top:10px;
	}
	.img-logo {
		display: block;
		margin:0 auto;
		width: 10%;
		height: auto;
	}
	
	.btn_home {
		margin-top: 50%;
	}
	
	.row {
		display: block;
	}
	.column-bio {
	width: 80%;
		margin: 2% auto;
		text-align: center;
		border: none;
	}
	
	.navi li{
		padding-bottom: 2.5%;
	}
	
	h1, h2, h3 {
		padding-top: 2%;
	}
	
	#cont {
		width: 90%;
	}
}