/* 
    Author : Karibbean Creative
    Date : 10.08.2023
    Version : 1.0
*/


/* ==========================================================> Import font */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400&display=swap');


/* ==========================================================> Custom variables */
:root {
   /* Primary colors */
   --primary-color: #E7B913;
   --secondary-color: #D1A402;
   --tertiary-color: #BC9404;
   --primary-transparent: #866900;

   /* Background colors */
   --background-color: #141617;
   --accent-background-color: #1D1D21;

   /* Text colors */
   --heading-color: #D3D3D3;
   --text-color: #A8A8A8;

   /* Neutral colors */
}


/* ==========================================================> Global */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 62.5%;
}

body {
   font-family: "Outfit", sans-serif;
   background-color: var(--accent-background-color);
   color: var(--text-color);
   line-height: 1;
   font-weight: 400;
   overflow-x: hidden;
}

.heading-primary,
.heading-secondary,
.heading-tertiary {
   font-family: 'Syne', sans-serif;
}

.heading-primary {
   font-size: 5.2rem;
   line-height: 1.2;
   margin-bottom: 2.4rem;

}
.heading-secondary {
   font-size: 3.2rem;
   margin-bottom: 6.4rem;
   margin-top: 9.6rem;
}

.heading-tertiary {
   font-size: 2.4rem;
   color: var(--tertiary-color);
}

p {
   font-size: 2.0rem;
   line-height: 1.6;
}



/* ==========================================================> Reusable Components */
.container {
   max-width: 110rem;
   padding: 0 3.2rem;
   margin: 0 5rem;
}


/* ==========================================================> Grids */
.grid {
   display: grid;
   column-gap: 4.8rem;
   row-gap: 4.8rem;
   max-width: 120rem;
   padding: 0 3.2rem;
   margin: 0 auto;
}

.grid-2-cols {
   grid-template-columns: 2fr, 1fr;
}

.grid-3-cols {
   grid-template-columns: repeat(3, 1fr);
}

/* ==========================================================> Button */


/* ==========================================================> Header */
#header {
   width: 100%;
   height: 8rem;
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
	top: 0;
   background-color: rgba(20, 22, 23, 0.3);
   backdrop-filter: blur(5px);
   margin-bottom: 6.4rem;
   z-index: 1;
   overflow: hidden;
}

.main-navigation-list {
   display: flex;
   align-items: center;
   list-style: none;
   gap: 4.8rem;   
}

.main-navigation-link:link,
.main-navigation-link:visited {
   font-size: 1.8rem;
   font-weight: 600;
   letter-spacing: 0.75px;
   text-decoration: none;
   color: var(--tertiary-color);
   padding: 20px 15px;
   position: relative;
}

.main-navigation-link:hover {
   color: var(--primary-color);
   transform: translateY(-1.2rem);
   padding: 15px;
   font-size: 2rem;
   border-bottom: 0.2rem solid #D1A402;
   transition: all 0.4s;
}


/* ==========================================================> Hero section */
#hero-section {
   margin-top: 10rem;
   padding: 4.8rem 0 9.6rem 0;
}

.hero-section {
   margin: 0 auto;
   padding: 0 3.2rem;
   display: grid;
   grid-template-columns: 2fr 1fr;
   align-items: center;
   gap: 9.6rem;
}

.hero-description {
   font-size: 2.4rem;
   line-height: 1.6;
   margin-bottom: 4.8rem;
}

.hero-description {
   font-size: 2rem;
}

.header-social-links {
   display: flex;
   align-items: center;
}

.social-link {
   font-size: 3rem;
   color: var(--tertiary-color);
   text-decoration: none;
   margin-right: 1.2rem;
}

.social-link:hover {
   color: var(--primary-color);
   transition: all 0.2s;
}

.resume-button {
   font-size: 2rem;
   text-decoration: none;
   border: 2px solid var(--tertiary-color);
   color: var(--tertiary-color);
   padding-right: 3rem;
   padding: 1rem;
   border-radius: 5px;

}

.resume-button:hover {
   background-color: var(--primary-color);
   color: var(--background-color);
   border: 2px solid var(--primary-color);
}

.hero-image {
   width: 100%;
}


/* ==========================================================> About section */
#about-section {
}

.text-box {}
.about-description {
line-height: 1.6;
}


.image-box {}



/* ==========================================================> Skillz section */
#skillz-section {

}

.card {
   background-color:  var(--background-color);
   border-radius: 1rem;
   padding: 2rem
}

.card:hover {
   cursor: pointer;
   box-shadow: -21px 29px 40px -2px rgba(10,10,10,0.4);
   -webkit-box-shadow: -21px 29px 40px -2px rgba(10,10,10,0.4);
   -moz-box-shadow: -21px 29px 40px -2px rgba(10,10,10,0.4);
   transition: all 0.2s;
}

.card-title {
   display: flex;
   align-items: center;
   margin: 1rem;
   padding: 0 0 0.5rem;
}

.card:hover .heading-tertiary {
   color: var(--primary-color);
}

.card-icon {
   font-size: 1.8rem;
   padding: 1rem;
   margin: 0 1rem 0 0;
   background-color: #232323;
   border-radius: 0.8rem;
}

.card-description {
   font-size: 2rem;
   line-height: 1.5;
   padding: 0 1rem 1rem;
   color: #7c7b7b;
}

.card:hover .card-description {
   color: var(--heading-color);
}


/* Grow Rotate */
.grow-rotate {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();
	
	&:hover {	
		transform: scale(1.1) rotate(4deg);
	}
}
/* ==========================================================> Labo section */
#labo-section {
   font-family: 'Courier New', Courier, monospace;
}


/* ==========================================================> Contact section */
#contact-section {
   padding: 4.8rem 0 12.8rem;
}

.contact {
   display: grid;
   grid-template-columns: 2fr 1fr;
   box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15);
   border-radius: 11px;
   overflow: hidden;
}

.contact-text-box {
   padding: 4.8rem 6.4rem 6.4rem 6.4rem;
   color: var(--text-color);
}

.contact .heading-secondary {
   color: inherit;
   margin-bottom: 3.2rem;
   padding-top: 2rem;
}

.contact-text {
   font-size: 1.8rem;
   line-height: 1.8;
   margin-bottom: 4.8rem;
}

.contact-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 3.2rem;
   row-gap: 2.4rem;
}

.contact-form label {
   display: block;
   font-size: 1.6rem;
   font-weight: 500;
   margin-bottom: 1.2rem;
}


/* ==========================================================> Footer section */
#footer {
   font-family: 'Courier New', Courier, monospace;
}

.footer-link,
.footer-link:visited {
   margin-top: 2rem;
   color: var(--tertiary-color);
   text-decoration: none;
   cursor: pointer;
}

.footer-link:hover {
   color: var(--primary-color);
}