/* input, select, textarea{ */

/*     font-family: inherit; */
/*     font-size: 100% */
/*     -webkit-box-sizing = border-box; */
/*     box-sizing: border-box; */
/* } */

/*
 *   COLOR PALLETE
 *   almost white: #F7FFF7
 lightgray #D3D3D3
 bisque(peach) #FFE4C4
 darkcyan #008B8B
 lightcyan #E0FFFF
 gray #808080
 lightskyblue #87CEFA
 darkgrey- almost black #343434
 yellow #FFE66D
 dark blue #2F3061
 */

/* Global Styles
 *--------------------------------------------- */
html{
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body{
	color: #343434;
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

/* img{ */
/* 	width: 500px; */
/* 	height: auto; */
/* } */

.skill img {
  width: 30px;
  height: 30px;
}

a{
	color: #FFE66D;
}

a:hover{
	text-decoration: none;
}
h1{
	font-size: 100px;
	line-height: 1;
}
h2{
	font-size: 45px;
}
h1, h2{
	font-family: "Caveat", cursive;
	margin: 0;
}
.content-wrap{
	max-width: 800px;
	width: 85%;
	margin: 0 auto;
	padding: 60px 0;
}
h3{
	margin-bottom: 0;
}

h3 + img{
	margin-top: 15px;
}
.item-details h3 + p{
	font-style: italic;
}
.item-details h3 ~ p{
	margin: 0;
}
.divider > section{
	border-bottom: 1px dashed #343434;
	padding: 25px 0;
	/* padding: 0 0 25px 0; */
}

.divider > section:last-of-type{
	border-style: none;
}

/* Profile
 *--------------------------------------------- */
header{
	background: #008B8B;
}

/* Skills
 * -----------------------------------------------*/
/* Target specific images by their order */
.skills-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; /* space between boxes */
	margin-top: 10px;
}

.skill {
	display: flex;
	align-items: center;
	gap: 10px; /* space between icon and text */
	padding: 10px 15px;
	border: 1px solid #ccc; /* border color */
	border-radius: 12px; /* rounded corners */
	background-color: #C9CDCF; /* optional light background */
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: default;
}

.skill:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.skill span {
  font-weight: 500;
  font-size: 16px;
	color: #0F0E0E
}

/* Lightbox settings */

/* Lightbox hidden by default */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

/* Enlarged image */
.lightbox-content {
  width: auto;
  max-width: 90%;
  max-height: 90vh;
  display: block;
  margin: auto;
}

/* Close button */
.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.close:hover {
  color: #ff6666;
}

/* Animation */
@keyframes zoomIn {
  from {transform: scale(0.7);}
  to {transform: scale(1);}
}


/* Projects
 *--------------------------------------------- */
.projects{
	/* background: #E0FFFF; */
	background: #A6B28B;
	/* background-image: url(../assets/bck/coolbackgrounds-particles-radar.png); */
	/* background-size: cover; */
	/* background-position: top right; */
	/* adding: 100px; */
}

.projects a{
	color: #2F3061;
}

.projects .btn{
	color: #F7FFF7;
	background: #2F3061;
	padding: 8px;
	border-radius: 7px;
	text-decoration: none;
	display: inline-block;
}

.projects .btn:hover{
	background: rgba(47, 48, 97, 80%);
}

.project-item{
	overflow: hidden;
}

.project-item h3{
	margin-top: 0;
}

.project-item {
  display: flex;
  flex-direction: column; /* stack children vertically */
  align-items: flex-start;    /* left image and text horizontally */
  text-align: left;     /* left text */
  margin-bottom: 10px;    /* space between projects */
}

.project-item img {
  max-width: 100%;  /* responsive image */
  height: auto;
  margin-bottom: 20px; /* spacing between image & text */
}

.project-item h3 {
  margin: 10px 0;
}

.project-item p, 
.project-item ul {
  max-width: 600px;   /* keep text readable, not too wide */
  /* margin: 0 auto 15px auto; */
  text-align: left;   /* keep text aligned left for readability */
}

/* both skill and project */
.overall{
	background: #A6B28B;
}


/* Work experience
 *--------------------------------------------- */

.work-experience{
	/* background-image: url(../assets/bck/coolbackgrounds-fractalize-cool_backgrounds.png); */
	background-size: cover;
	background-position: top right;
	adding: 100px;
	background: #9FB3DF;
}

/* Education
 *--------------------------------------------- */
.education{
	background-image: url(../assets/bck/joanna-kosinska-unsplash.jpg);
	background-size: cover;
	background-position: top right;
	padding: 100px;
}
.education p{
	width: 60%;
}


/* Contact info
 *--------------------------------------------- */

footer{
	/* background: #343434; */
	/* light blue */
	background: #568F87; 
	color: #F7FFF7;
}

.contact-list{
	list-style-type: none;
	padding: 0px;

}

.contact-list a{
	padding: 15px;
	display: inline-block;
}

/* Responsive
 *--------------------------------------------- */

@media screen and (min-width: 750px){
	header, footer{
		text-align: center;
	}
	/* .project-item img{ */
	/* 	float: left; */
	/* 	margin-right: 20px; */
	/* } */
	.job-item {
		display: grid;
		grid-template-columns: 1fr 2fr;
		column-gap: 20px;
	}
	.contact-list{
		display: flex;
		justify-content: center;
	}
}

@media screen and (max-width: 749px){
	h1{
		font-size: 75px;
		line-height: 0.9;
		margin-bottom: 20px;
	}
	h2{
		line-height: 1;
	}
	.contact-list a{
		padding: 5px;
	}
}