@import 'theme.css';
@import "./sections/header.css";
@import "./sections/aboutme.css";
@import "./sections/skill.css";
*{
    box-sizing: border-box;
}
:root {
	font-size: var(--p-font-size);
	line-height: var(--p-line-height);
	letter-spacing: var(--p-letter-spacing);
	font-family: "Chakra Petch", sans-serif;
	font-weight: 400;
	font-style: normal;
	scroll-behavior: smooth;
}
body {
	/* background pattern */
    margin-top: 40px;
	background-color: #e0e5ec;
	background-size: 7px 7px;
	/* background-image: repeating-linear-gradient(45deg,
			hsla(var(--p-500-code), 0.1) 0,
			hsla(var(--p-700-code), 0.1) 0.7000000000000001px,
			var(--foreground-color) 0,
			var(--foreground-color) 50%); */
	
}
.container{
    margin: 0 auto;
    max-width: 1536px;
    padding: 0 2rem;
}
a{
    text-decoration: none;
}
.header__container{
	transform: scale(0.3);
    animation: jumpIn 0.8s ease forwards;
	animation: zoomIn 1s ease forwards;
}
.aboutMe__container{
	animation-delay: 0.6s;
	transform: scale(0.3);
    animation: jumpIn 1s ease forwards;
	animation: zoomIn 1s ease forwards;
}
.skills__section{
	transform: translateY(300px);
	animation: jumpIn 0.5s ease forwards;
}
.section__des {
	text-align: center;
	max-width: 65ch;
	color: var(--n-500);

}
@keyframes jumpIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
	@keyframes zoomIn {
      to {
        opacity: 1;
        transform: scale(1); /* lớn dần, giống tiến lại gần */
      }
    }