@import "compass/css3";

html, body{
	font-size:1.2vw;
	color: #dfdfdf;
	background-color: #bba686;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Montserrat", sans-serif;
}

body, p, label{
	font-family: "Roboto", sans-serif;
}

a {
  color: #dfdfdf;
  font-family: "Montserrat", sans-serif;
}

a:hover {
  color: #00d1b2;
}

section{
	padding-top: 2vh;
	padding-bottom: 2vh;
}

#linkedIn {
	font-size: 1.4vw;
}

.section-1 {
	background: #063647;
}

.section-2 {
	background-color: #052D3D;
}

.section-3 {
	background-color: #0E282E;
}

.section-4 {
	background-color: #063647;
	padding: 0.2rem;
}

a.nav-item {
	color: #dfdfdf;
}

a.nav-item:hover {
	color: #fff;
}

.nav-item {
	width: fit-content;
}

.avatar{
	height:50vh;
	width: 36vw;
	border-radius: 50%;
	margin-top: 5vh;
	margin-bottom: 5vh;
	align-content: center;
}

.intro-description{
	padding-top: 1rem;
}

.social-container img{
	max-width:100%;
	max-height: 16.2vh;
    margin-bottom: 1.39vh;
}

#projects {
	background-color: #8aa4ab;
	background: linear-gradient(to bottom, #8aa4ab,#8aa4ab, #8aa4ab,#8aa4ab, #8aa4ab,#8aa4ab,#8aa4ab, #416270);
}

#projectPhoto {
	width: 50vw;
	height: 45vh;
}

#projectDescriptionTag {
	font-size: 1.1vw;
	margin-bottom: 2vh;
}

@media (min-width: 1805px) {
	#projectPhoto {
		width: 55vw;
		height: 44vh;
		align-items: left;
	}

	#projectDescription {
		align-items: right;
		width: 60%;
		margin-left: 2vw;
	}
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
	.avatar {
	  width: 80vw;
	  height: auto;
	  margin-top: 5vh;
	  margin-bottom: 5vh;
	}
  
	.intro {
	  width: 90%;
	  font-size: 3vw;
	}
  }
  
  /* Further adjustments for very small screens (phones) */
  @media (max-width: 480px) {
	.avatar {
	  width: 90vw;
	  height: auto;
	}
  
	.intro {
	  font-size: 4vw;
	  width: 90%;
	}
  }
  
  @media (hover: none) {
	.pushable:hover {
	  filter: none;
	}
  
	.iconContainer:hover {
	  transform: none;
	  filter: none; 
	}
  }
  

#projectArticle {
	display: flex;
}

.projectTitle {
	font-size: 3.5vw;
	text-align: center;
	margin-bottom: 10vh;
}

.project-figure {
	max-height: 50vh;
	max-width: 60vw;
}

#projectDescription {
	align-items: right;
	width: 45%;
	margin-left: 2vw;
}

.box {
	background-color: transparent;
	border: .2vw solid rgba(7, 59, 79, 0.5);
	margin-bottom: 7vh;
}

.title {
	color: #fff;
	text-align: left;
	margin-bottom: 2rem;
}

.intro {
	text-align: justify;
	width: 70%;
	margin: 0 auto;
	font-size: 1.3vw;
	margin-bottom: 10vh;
}

.void-background {
	background-color: transparent; 
}

.educationLogos {
	height:34vh ;
	width:20vw ;
}

#about {
	background: linear-gradient(to bottom, #bba686,#bba686, #bba686,#bba686, #bba686,#bba686,#bba686, #e3ded9);
}

#education {
	height: 90vh;
	background: linear-gradient(to bottom, #e3ded9,#e3ded9, #e3ded9,#e3ded9, #e3ded9,#e3ded9,#e3ded9, #8aa4ab);
}

.educationHeader {
	font-size: 3.5vw;
	text-align: center;
	color: #bba686;
	margin-bottom: 8vh;
}

#educationInformation {
	justify-content: space-between;
	display: flex;
	background-color: #e3ded9;
	height: 40vh;
}

.educationPannels {
	margin-top: 5vh;
	margin-bottom: 20vh;
	display: flex;
	justify-content: space-around;
	margin-left: 2vw;
	width: 45vw;
}

h2 {
	font-size: 2.5vw;
}

.heyText {
	color: #e3ded9;
	font-size: 2.5vw;
	margin-bottom: 2vh;
}

.educationText {
	color: #bba686;
	margin-top: 2vh;
}

#projectsContainer {
	margin-bottom: 30vh;	
}

.introContainer {
	margin-bottom: 10vh;
}

#firstText {
	margin-top: 3vh;
}

#educationText {
	margin-top: 2vh;
}

.nav-left {
	margin-left: -9vw;
}

.nav-menu{
	margin-right: -9vw;
}

#technologies {
	background-color: #416270;
	background: linear-gradient(to bottom, #416270,#416270, #416270,#416270, #416270,#416270,#416270, #0E282E);
}

#technologiesContainer {
	margin-bottom: 20vh;
}

.technologiesHeader {
	font-size: 3.5vw;
	text-align: center;
	margin-top: 5vh;
	color: #dfdfdf;
	margin-bottom: 8vh;
}

#technologyRow {
	display: flex;
	justify-content: space-around;
	margin-bottom: 10vh;
	margin-right: 2vw;
}

#technologyIcon {
	width: 15vw;
	height: 15vh;
}


.auto-type {
	font-size: 3.0vw;
	font-family: "Montserrat", sans-serif;
	white-space: nowrap; 
    overflow: hidden; 
    border-right: 3px solid #dfdfdf;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    50% {
        border-color: transparent; 
    }
}

.projectHeader {
	display: grid;
	margin-bottom: 7vh;
}

#projectTechnologies {
	font-size: .8vw;
	color: rgb(200, 197, 197);
	font-style: italic;
}


.pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
  }
  .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
  .edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(
      to left,
      hsl(340deg 100% 16%) 0%,
      hsl(340deg 100% 32%) 8%,
      hsl(340deg 100% 32%) 92%,
      hsl(340deg 100% 16%) 100%
    );
  }
  .front {
    display: block;
    position: relative;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: white;
    background: hsl(345deg 100% 47%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
  .pushable:hover {
    filter: brightness(110%);
  }
  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }
  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }
  .pushable:hover .shadow {
    transform: translateY(4px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }
.pushable:active .shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}
.pushable:focus:not(:focus-visible) {
    outline: none;
}





.buttonSection {
	display: flex;
	justify-content: space-around;
	margin-top: 5vh;
}

.draw-border {
	box-shadow: inset 0 0 0 4px white;
	color: white;
	transition: color 0.25s 0.083333333s;
	position: relative;
}
  
.draw-border::before,
.draw-border::after {
	border: 0 solid transparent;
	box-sizing: border-box;
	content: '';
	pointer-events: none;
	position: absolute;
	width: 0;
	height: 0;
	bottom: 0;
	right: 0;
}
  
.draw-border::before {
	border-bottom-width: 4px;
	border-left-width: 4px;
}
  
.draw-border::after {
	border-top-width: 4px;
	border-right-width: 4px;
}

.draw-border:hover {
	color: #ffe593;
}
  
.draw-border:hover::before,
.draw-border:hover::after {
	border-color: #ffe593;
	transition: border-color 0s, width 0.25s, height 0.25s;
	width: 100%;
	height: 100%;
}
  
.draw-border:hover::before {
	transition-delay: 0s, 0s, 0.25s;
}
  
.draw-border:hover::after {
	transition-delay: 0s, 0.25s, 0s;
}
  

.btn {
	background: none;
	border: none;
	cursor: pointer;
	line-height: 1.5;
	font: 600 1.05vw 'Roboto Slab', sans-serif;
	padding: 2vh 3vw;
	letter-spacing: 0.05rem;
}


#toprightItem {
	font-size: 1.3vw;
}

#topleftIcon {
	font-size: 1.7vw;
}

#linkedinIcon {
	margin-left: 1vw;
}

#githubIcon {
	margin-left: 1vw;
	margin-top: .2vh;
}

.iconContainer {
    position: relative;
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    width: 12vw;
    height: 18vh;
    display: grid;
}

#iconName {
    opacity: 0;
    transition: opacity 0.3s;
    text-align: center;
	font-size: .8vw;
	margin-top: 2vh;
}

.iconContainer:hover {
    transform: scale(1.5);
    filter: brightness(1.2);
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    cursor: pointer;
}

.iconContainer:hover #iconName {
    opacity: 1;
}


#contact {
	display: grid;
	justify-content: center;
}

#contactHeader {
	margin-bottom: 10vh;
}

.contactSections {
	display: flex;
	justify-content: space-around;
	margin-bottom: 10vh;
}

.contactFormBorder {
	width: 55vw;
	display: grid;
	justify-content: center;
	background-color: transparent;
	border: .2vw solid rgba(7, 59, 79, 0.5);
	padding: 2vw;
	padding-top: 5vw;
	padding-bottom: 2vw;
	margin-right: 5vw;
}

.contactInfoBorder {
	width: 25vw;
	display: grid;
	justify-content: center;
	background-color: transparent;
	border: .2vw solid rgba(7, 59, 79, 0.5);
	padding: 2vw;
	padding-top: 5vw;
	padding-bottom: 5vw;
}

#nameField {
	width: 15vw;
	height: 4vh;
}

#emailField {
	width: 15vw;
	height: 4vh;
}

#messageField {
	width: 43vw;
	height: 15vh;
	resize: none;
	display: block;
	margin-bottom: 5vh;
}

#emailFieldLabel {
	margin-left: 2vw;
}

#messageFieldLabel {
	display: block;
	margin-top: 5vh;
	margin-bottom: 3vh; /* Adjust as needed */
}

#bottomHoverAnimation {
	position: relative;
	background: #416270;
	border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
	color: white;
	box-shadow: 2vw 2vw rgba(0,0,0,.15);
	transition: all .4s ease;
}

#bottomHoverAnimation:hover {
	border-radius: 50% 50% 50% 50% / 5% 5% 5% 5% ;
	box-shadow: 1vw 1vw rgba(0,0,0,.25);
}

#resumeIcon {
	margin-right: 1vw;
}

#linkedinContactIcon {
	margin-right: .5vw;
}

#githubContactIcon {
	margin-right: .5vw;
}
  
.socialBtn {
	width: fit-content;
}

#submitEmailButton {
	box-shadow: inset 0 0 0 1vw rgb(219, 216, 216);
	color: black;
	transition: color 0.25s 0.083333333s;
	position: relative;
	size: 1vw;
}

#submitEmailButton:hover {
	cursor: pointer;
	filter: brightness(120%) ;
}