@import url('https://fonts.cdnfonts.com/css/jetbrains-mono');

* {
   margin: 0;
   padding: 0;

   scroll-behavior: smooth;
}

body {
   background: linear-gradient(rgb(45,45,45), rgb(43,43,43));

   background-repeat: no-repeat;
   background-size: 100%;

   display: flex;
   flex-direction: column;
   align-items: center;
   /*gap: 100px;*/



   color: white;
   font-family: "Gilroy";

}

::-webkit-scrollbar {
   width: 10px;
   background: #222222;
   

}

::-webkit-scrollbar-thumb {
   background: #262626;
   border: 1px solid #ffffff10;
   border-radius: 1px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
}

::-moz-selection{
   background-color: #737373;
}
::selection{
   background-color: #737373;
}

.noise {
   position: fixed;
   z-index: -1;
   width: 100%;
   height: 100%;
   top: 0;
}

.background {
   z-index: -2;
   width: 100%;
   height: 100vh;
   position: fixed;
   top: 0;
}

.glass {
   background: rgba(15, 15, 15, 0.15);
   border: 1px solid #ffffff10;
   /*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);*/
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
}

.navigate a {
   color: white;
   font-weight: 300;
   text-decoration: none;
   font-size: 25px;
}

.navigate {
   width: 350px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header h2 {
   font-weight: normal;
   font-size: 30px;
}

header {
   position: fixed;
   top: 0;
   width: 100%;
   padding: 16px 0;
   display: flex;
   justify-content: space-evenly;
   z-index: 2;
}

.head {
   border-top: none;
   border-left: none;
   border-right: none;
}

.header-content {
   width: 1000px;
   display: flex;
   justify-content: space-between;
}

.content {
   width: 875px;
   padding: 20px;
   padding-bottom: 22px;
   margin-bottom: 100px;
}

.hello-head {
   display: flex;
   justify-content: space-between;
}

.hello-head img{
   width: 50px;
}

.hello {
   margin-top: 160px;
}

.hello h1 {
   font-size: 48px;
   font-weight: 500;
   padding-bottom: 10px;
}

.hello h1 span {
   font-size: 25px;
   font-weight: 200;
   font-style: italic;
}

.hello h3 {
   font-size: 35px;
   font-weight: 200;
}

.content h2 {
   font-weight: 500;
   font-size: 44px;
   text-align: center;
   padding-bottom: 15px;
}

.content h4 {
   font-weight: 200;
   font-size: 25px;
   text-align: justify;
}

.skill-code {
   font-family: 'JetBrains Mono', sans-serif;
   font-weight: 300;
   font-size: 16px;
   margin-left: 20px;
   color: #ABB2BF;
}

.skill-tab1 {
   margin-left: 20px;
}

.skill-tab2 {
   margin-left: 98px;
}

.skill-tab4 {
   margin-left: 78px;
}

.color-code-purple {
   color: #C678DD;
}

.color-code-blue {
   color: #5FAAE8;
}

.color-code-orange {
   color: #D17C44;
}

.nav-skills {
   padding-bottom: 17px;
}

.skills {
   position: relative;
   overflow: hidden;
}

.skill-btn:nth-child(2) {
   margin: 0 20px;
}

.skill-btn {
   background: transparent;
   color: #666666;
   text-transform: uppercase;
   font-family: 'JetBrains Mono', sans-serif;
   font-size: 25px;
   font-weight: 200;
   border: none;
}

.btn-selected {
   color: white;
   text-decoration: underline;
   transition: 1s;
}

.btn-unselected {
   color: #666666;
   text-decoration: none;
}

.code-selected {
   display: block;
   opacity: 100%;
   width: 100%;
   transition: 1s;
}

.code-unselected {
   height: 0%;
   opacity: 0;
   display: absolute;
   transition: 1s;
}

.code-unselected p{
   display: none;
}

.ticker-selected {
   display: flex;
}

.ticker-unselected {
   display: none;
}

.social-links {
   display: flex;
   justify-content: space-around;
}

.social-item a {
   border: 0px solid #222222;
   text-decoration: none;
   color: white;
   font-weight: 400;
   font-size: 27px;
   border-radius: 5px;
   display: flex;
   padding: 10px 15px;
   gap: 15px;
   align-items: center;
}

.social-img {
   height: 40px;
   width: 40px;
   background-size: contain;
   transition: 0.3s; 
}

.social-item:nth-child(1) .social-img {
   background-image: url(src/images/social/github.png);
}

.social-item:nth-child(2) .social-img {
   background-image: url(src/images/social/discord.png);
}

.social-item:nth-child(3) .social-img {
   background-image: url(src/images/social/boosty.png);
}

.social-item:nth-child(4) .social-img {
   background-image: url(src/images/social/linkedin.png);
}

.contact-links {
   display: flex;
   justify-content: space-evenly;
}

.contact-item a {
   border: 0px solid #222222;
   text-decoration: none;
   color: white;
   font-weight: 400;
   font-size: 27px;
   border-radius: 5px;
   display: flex;
   padding: 10px 15px;
   gap: 15px;
   align-items: center;
}

.contact-img {
   height: 40px;
   width: 40px;
   background-size: contain;
   transition: 0.3s; 
}

.contact-item:nth-child(1) .contact-img {
   background-image: url(src/images/social/telegram.png);
}

.contact-item:nth-child(2) .contact-img {
   background-image: url(src/images/social/email.png);
}

.content:has(.contact-links), .content:has(.social-links) {
   padding-bottom: 10px;
}

.content:has(.contact-links) h2, .content:has(.social-links) h2 {
   padding-bottom: 5px;
}

.content:has(.contact-links) {
   margin-bottom: 60px;
}

 footer {
   padding-bottom: 25px;
   position: relative;
   width: 100%;
 }

 footer h3 {
   text-align: center;
   font-weight: 400;
   font-size: 15px;
 }

 footer h3:nth-child(1) {
   padding-bottom: 10px;
 }

 .bg-elements {
   position: absolute;
   height: 100%;
   width: 100%;
   
 }

.bg-img {
   opacity: 50%;
   position: absolute;
   user-select: none;
   animation: revrotate 180s linear infinite;
   width: 375px;

}

.bg-img:nth-child(1) {
   right: 100px;
   top: 150px;
   animation: rotate 180s linear infinite;
}

.bg-img:nth-child(2) {
   left: 10%;
   top: 600px;
}

.bg-img:nth-child(3) {
   right: 10%;
   top: 1100px;
   animation: rotate 180s linear infinite;
}

footer .bg-img-foot {
   opacity: 60%;
   position: absolute;
   left: 3%;
   bottom: 0;
   width: 375px;
   animation: none;
   z-index: -1;
}



@keyframes rotate {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
}

@keyframes revrotate {
   from {
     transform: rotate(360deg);
   }
   to {
     transform: rotate(0deg);
   }
}