/*
COLOR PALETTE
https://coolors.co/f7fff7-343434-2f3061-ffe66d-a1c6d7
#F7FFF7 - almost white
#343434 - dark gray - almost black
#2F3061 - blue dark
#FFE66D - yellow
#A1C6D7 - blue light
*/

/*@font-face {
  font-family: "Salty Cheese";
  src: url("../fonts/Salty Cheese.ttf");
} */

/* 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;
  animation: myAnim4 2s ease 0s 1 normal forwards;
}
img {
  width: 300px;
}
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;
  font-weight: 400;
  margin: 0;
}
.content-wrap {
  max-width: 800px;
  width: 85%;
  margin: 0 auto;
  padding: 60px 0;
}
h3 {
  margin-bottom: 0;
}
.item-details h3 + p {
  font-style: italic;
}
.item-details h3 ~ p {
  margin: 0;
}
.divider > section {
  border-bottom: 1px dashed #343434;
  padding: 25px 0;
}
.divider > section:last-of-type {
  border-bottom: none;
}
.btn {
  background: #d7d7e0;
  color: #f7fff7;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  display: inline-block;
}
.btn:hover {
  background: rgba(165, 166, 179, 0.8);
}
/*Grid setting
_________________________________________________________*/
.grid-container {
  display: grid;
  grid-template-areas:
  'header header header header header header'
  'menu main main main main main'
  'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #000000;
  padding: 10px;
}
.item1 { 
  grid-area: header; 
  animation: myAnim2 2s ease 0s 1 normal forwards;
}
.item2 { 
  grid-area: menu; 
  animation: myAnim3 2s ease 0s 1 normal forwards;
}
.item3 { 
  grid-area: main;
  animation: myAnim1 2s ease 0s 1 normal forwards;
}
.item4 { grid-area: footer; }
/*navigation manu
---------------------------------*/
.menu {
  height: 100%;
  max-width: 200px;
  top: 0;
  left: 0;
  background-color: #331431;
}
.menu ul {
  margin: 0;
  padding: 0;
}
.menu-items {
  list-style-type: none;
}
.menu-items a {
  text-decoration: none;
  color: white;
  display: block;
  width: inherit;
  border-bottom: 2px solid white;
}
.menu-top {
  position: sticky;
  top: 0;
}
.menu-bottom {
  position: fixed;
  bottom: 0;
}
.menu-bottom .menu-items a {
  text-decoration: none;
  color: white;
  display: block;
  width: inherit;
  border-bottom: 0;
}
/* PROFILE
-------------------*/
header {
  background: #2f3061;
  color: #f7fff7;
}

/* Projects
--------------------*/
.projects {
  background: #f7fff7;
}
.projects a {
  color: #2f3061;
}
.projects .btn {
  background: #2f3061;
  color: #f7fff7;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  display: inline-block;
}
.projects .btn:hover {
  background: rgba(47, 48, 97, 80%);
}

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

/* Work Experience
------------------------------------*/
.work-experience {
  background: #a1c6d7;
}
/* Education
------------------------------------*/
.education {
  padding: 50px;
  background-image: url(../images/education.jpg);
  background-size: cover;
  background-position: center;
}
.education p {
  width: 60%;
}
.education a {
  color: revert;
}
/* Contact Info
--------------------*/

footer {
  background: #343434;
  color: #f7fff7;
}
.contact-list {
  list-style-type: none;
  padding: 0;
}
.contact-list a {
  padding: 5px;
  display: inline-block;
}
/* Responsive
------------------------------------*/
@media screen and (min-width: 750px) {
  header,
  footer {
    text-align: center;
  }
  /* Project section style
  -------------------------*/
  .project-item img {
    float: left;
    margin-right: 20px;
  }
  .job-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 20px;
  }
  /* Education section style
  ------------------*/
  /* Contact Style
  ------------------------------*/
  .contact-list {
    display: flex;
    justify-content: center;
  }
  .contact-list a {
    padding: 15px;
  }
}

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

/* Animation */
@keyframes myAnim1 {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(-6deg);
	}

	30% {
		transform: translateX(15px) rotate(6deg);
	}

	45% {
		transform: translateX(-15px) rotate(-3.6deg);
	}

	60% {
		transform: translateX(9px) rotate(2.4deg);
	}

	75% {
		transform: translateX(-6px) rotate(-1.2deg);
	}
}
@keyframes myAnim2 {
	0% {
		animation-timing-function: ease-out;
		transform: scale(1);
		transform-origin: center center;
	}

	10% {
		animation-timing-function: ease-in;
		transform: scale(0.91);
	}

	17% {
		animation-timing-function: ease-out;
		transform: scale(0.98);
	}

	33% {
		animation-timing-function: ease-in;
		transform: scale(0.87);
	}

	45% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}
}
@keyframes myAnim3 {
	0% {
		animation-timing-function: ease-in;
		opacity: 1;
		transform: translateY(-45px);
	}

	24% {
		opacity: 1;
	}

	40% {
		animation-timing-function: ease-in;
		transform: translateY(-24px);
	}

	65% {
		animation-timing-function: ease-in;
		transform: translateY(-12px);
	}

	82% {
		animation-timing-function: ease-in;
		transform: translateY(-6px);
	}

	93% {
		animation-timing-function: ease-in;
		transform: translateY(-4px);
	}

	25%,
	55%,
	75%,
	87% {
		animation-timing-function: ease-out;
		transform: translateY(0px);
	}

	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes myAnim4 {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.2;
	}

	100% {
		opacity: 1;
	}
}