@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
   --background-color: white;
   --text-color: #000000;
   --primary-color: #FFED00;
   --secondary-color: #4F00FF;
   --padding-desktop: 32px;
   --padding-mobile: 16px;
   --font-size-desktop-h1: clamp(24px, 1.6vmax, 40px);
   --font-size-desktop-h2: clamp(18px, 1.2vmax, 24px);
   --font-size-desktop-p: clamp(14px, 1vmax, 18px);
   --font-size-mobile-h1: clamp(20px, 1.6vmax, 40px);
   --font-size-mobile-h2: clamp(16px, 1.2vmax, 20px);
   --font-size-mobile-p: clamp(16px, 1vmax, 18px);
}

html, body{
   position: relative;
   height: 100%;
   width: 100%;
   max-width: 100vw;
   margin: 0;
}

body{
   font-family: 'Poppins', sans-serif;
   background: var(--background-color);
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
   width: 100vw;
   height: 100%;
   box-sizing: border-box;
   font-size: 16px;
   padding: var(--padding-mobile);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: calc(var(--padding-desktop) * 2);
   overscroll-behavior: none;
   @media (min-width:992px ) {
      padding: var(--padding-desktop);
      font-size: 12px;
      /* overflow: hidden; */
      gap: 0;
   }
}

h1, h2, p{
   margin: 0;
   padding: 0;
}

header{
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: start;
   width: 100%;
   gap: 5px;
   /* padding-top: calc(var(--padding-mobile)/2); */
}
header h1{
   font-size: var(--font-size-mobile-h1);
   line-height: var(--font-size-mobile-h1);
   @media (min-width:992px ) {
      font-size: var(--font-size-desktop-h1);
      line-height: var(--font-size-desktop-h1);
   }
}
header h1 #logo-title{
   font-size: calc(var(--font-size-mobile-h1) * 1.2);
   @media (min-width:992px ) {
      font-size: calc(var(--font-size-desktop-h1) * 1.2);
   }
}
header p{
   font-size: var(--font-size-mobile-h1);
   line-height: calc(var(--font-size-mobile-h1) * 1.2);
   @media (min-width:992px ) {
      font-size: var(--font-size-desktop-h1);
      line-height: calc(var(--font-size-desktop-h1) * 1.2);
   }
   
}

header br{
   @media (max-width:600px ) {
      display: none;
   }
}

header #logo{
   position: fixed;
   top: calc(var(--headerHeight) + var(--padding-desktop));
   right: var(--padding-mobile);
   width: 15vmin;
   height: 15vmin;
   display: flex;
   justify-content: center;
   align-items: center;
   aspect-ratio: 1/1;
   @media (min-width:680px) {
      top: var(--padding-mobile);
   }
   @media (min-width:992px) {
      width: 20vh;
      height: 20vh;
      top: var(--padding-desktop);
      right: var(--padding-desktop);
   }
}

main{
   display: flex;
   width: 100%;
   flex-direction: column;
   gap: calc(var(--padding-desktop)*2);
   @media (min-width:992px ) {
      flex-direction: row;
      padding: var(--padding-desktop) 0;
   }
}

main h2{
   font-size: var(--font-size-mobile-h2);
   margin-bottom: var(--padding-mobile);
   @media (min-width:992px ) {
      font-size: var(--font-size-desktop-h2);
   }
}

#about{
   display: flex;
   flex-direction: column;
   align-items: start;
   @media (min-width:992px ) {
      width: 40%;
   }
}

#about .text{
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-size: var(--font-size-mobile-p);
   max-width: 600px;
   @media (min-width:992px ) {
      font-size: var(--font-size-desktop-p);
      max-width: none;
   }
}

#projects{
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: start;
   @media (min-width:992px ) {
      width: 60%;
      height: 100%;
   }
}


.videos-container{ 
   display: flex;
   flex-direction: column;
   gap: var(--padding-desktop);
   width: 100%;
   @media (min-width:992px ) {
      position: fixed;
      top: 0;
      overflow: scroll;
      height: 100dvh;
      max-width: 60%;
      max-width: var(--projectsWidth);
      height: 100%;
      gap: calc(var(--padding-desktop)*2);
   }
}

.video-container{
   position: relative;
   padding: 56.25% 0 0 0;
   width: 100%;
   height: auto;
}
 

.video-container:first-of-type{
   @media (min-width:992px ) {
      margin-top: calc(30dvh + var(--padding-mobile));
      margin-top: var(--videosMargin);
   }
}

.video-container iframe{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

#more-projects{
   font-size: var(--font-size-mobile-h2);
   @media (min-width:992px ) {
      font-size: var(--font-size-desktop-h2);
      margin-bottom: var(--padding-desktop);
   }
}

footer{
   width: 100%;
   height: fit-content;
   font-size: var(--font-size-mobile-h2);
   @media (max-width:992px ) {
      font-size: var(--font-size-desktop-h2);
      padding: var(--padding-desktop) 0;
   }
}

a{ 
   font-weight: bold;
   text-decoration: none;
   color: var(--text-color);
   transition: color .2s ease-in-out;
}

a:hover{
   color: var(--secondary-color);
}

#background{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100dvh;
   z-index: -1;
}

.circle{
   position: absolute;
   border-radius: 50%;
   background: var(--primary-color);
   aspect-ratio: 1/1;
}

#circle-1{
   top: -30%;
   left: -10%;
   height: 40vw;
   width: 40vw;
   animation: float 8s ease-in-out infinite;
}

#circle-2{
   top: 20%;
   right: -5%;
   height: 40vw;
   width: 40vw;
   animation: float-1 10s ease-in-out infinite;
}
#circle-3{
   bottom: -15%;
   left: 15%;
   height: 20vw;
   width: 20vw;
   animation: float-2 10s ease-in-out infinite;
}

@keyframes float {
	0% {
			translate: 0px 0px;
			scale: 1;
	}
	50% {
			translate: 10px -20px;
			scale: .98;
	}
	100% {
			translate: 0px 0px;
			scale: 1;
	}
}
@keyframes float-1 {
	0% {
			translate: 0px 0px;
			scale: 1;
	}
	50% {
			translate: -5px 20px;
			scale: .96;
	}
	100% {
			translate: 0px 0px;
			scale: 1;
	}
}
@keyframes float-2 {
	0% {
			translate: 0px 0px;
			scale: 1;
	}
	50% {
			translate: 5px 20px;
			scale: .94;
	}
	100% {
			translate: 0px 0px;
			scale: 1;
	}
}

&::-webkit-scrollbar {
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
   display: none;
   width: 0;
   background: transparent;
   background-color: transparent;
 }
 
 &::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px transparent;
   background-color: transparent;
 }
 
 &::-webkit-scrollbar-thumb {
   background-color: transparent;
 }
 * {
   scrollbar-width: none; /* Firefox implementation */
   scrollbar-color: transparent transparent;
 }
 @-moz-document url-prefix() { /* Disable scrollbar Firefox */
   html{
     scrollbar-width: none;
   }
 }