@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');

* {
   font-family: 'Poppins', sans-serif;
   color: #ebebeb;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: "Poppins", Arial, Helvetica, sans-serif;
}

*::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #000000;
}

*::-webkit-scrollbar {
   width: 5px;
   background-color: #000000;
}

*::-webkit-scrollbar-thumb {
   background-color: #f5f5f5;
}

h1 {
   font-size: 2rem;
   color: white;
}

.flex-center {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

html {
   width: 100%;
}

body {
   height: 100vh;
   width: 100%;
}

.navbar {
   width: 100%;
   position: fixed;
   background-image: linear-gradient(to right, #051937, #003b5f, #005f67, #007f4b);
}

.nav-link {
   color: #d8d8d8 !important;
   font-size: 1.2rem;
   font-weight: 200;
   text-align: center;
}

.nav-link:hover {
   color: white !important;
}

.page-container {
   background-color: #181818;
   width: 100%;
   height: 100%;
   z-index: 0;
   padding-bottom: 15%;
}

#background, #overlay {
   width: 100%;
   height: 100%;
   position: absolute;
}

#overlay {
   z-index: 10;
   background-color: transparent;
   padding-left: min(100px, 5%);
   padding-right: min(100px, 5%);
}

#head-tag > span {
   font-family: 'Roboto Mono', monospace;
}

.container {
   height: fit-content;
}

#lp-col {
   display: none;
}

p {
   font-size: 0.85rem;
}

.title-2 {
   font-weight: bolder;
   background-image: linear-gradient(to right, #00b4d8, #0077b6);
   -webkit-background-clip: text;
   color: transparent;
}

.timeline__event__content {
   padding: 20px;
}
.timeline__event__date {
   letter-spacing: 2px;
   color: white;
   font-weight: 600;
   font-family: 'Roboto Mono', monospace;
   white-space: nowrap;
}
.timeline__event__icon {
   border-radius: 8px 8px 0px 0px;
   background-image: linear-gradient(to right, #005f67, #007f4b);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-basis: 40%;
   padding: 10px 0px 10px 0px;
}

.timeline__event__description {
   flex-basis: 60%;
}

.timeline__event {
   flex-direction: column;
}

.timeline__event__title > a {
   font-weight: bolder;
   text-decoration: none;
   color: #d8d8d8;
   padding-bottom: 10px;
}

.timeline__event__title {

   padding-bottom: 10px;
}

.timeline__event__title > a:hover {
   color: #00b4d8;
}

.timeline {
   display: flex;
   flex-direction: column;
   width: min(700px, 90%);
}

.timeline__event { 
   background: #000000;
   margin-bottom: 20px;
   position: relative;
   display: flex;
   margin: 20px 0;
   border-radius: 8px;
   box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
}

.card {
   background-color: #0c0c0c;
   transition: ease-in-out 0.2s;
   cursor: default;
}
.card-body {
   height: 150px;
   overflow: auto;
}

.card-text {
   font-size: 0.7rem;
}

#skills {
   height: fit-content;
}

.figure {
   width: fit-content;
}

.figure-caption {
   width: 100px;
}

.tool-icon {
   height: 30px;
}

.figure-caption {
   color: #d8d8d8;
}

.social-name {
   font-size: 0.7rem;
}
.p-4 {
   padding: 0.6rem !important;
}

#about {
   background-image: linear-gradient(to bottom, #001a35, #181818);
}

#education {
   height: fit-content;
}

#home {
   background-color: #001a35;
}

#connect {
   background-image: linear-gradient(to top, #001a35, #181818);
   transition: 1.2s ease-in-out;
}

.btn-primary {
   border: none;
   background-image: linear-gradient(to right, #00b4d8, #0a93dd);
}

.btn-primary:hover {
   background-image: linear-gradient(to right, #046e83, #0f6999);
}

a {
   text-decoration: none;
}

button {
   background-color: transparent;
   border: none;
}
.social-icon {
   width: 70px;
   margin-bottom: 10px;
}

#connect {
   height: fit-content;
}

@media (min-width: 992px) {
   .navbar {
      height: 70px;
   }
   
   .nav-item {
      max-height: 100%;
      margin: auto 0;
      width: 20%;
   }
   
   .nav-link {
      font-size: 1.2rem;
      font-weight: 200;
      padding: 0px 0px 0px 0px !important;
      text-align: center;
      transition: ease-in-out 0.2s;
   }
   
   .nav-link:hover {
      font-size: 1.25rem;
   }
   
   .navbar-collapse {
      height: 70px;
      margin-left: 40%;
   }
   
   .navbar-nav {
      height: 100%;
      width: 100%;
      justify-content: space-evenly;
   }

   .page-container {
      padding-bottom: 5%;
   }

   h1 {
      font-size: 4rem;
   }

   #head-tag > span {
      font-size: 2rem;
   }

   #lp-col {
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   #about {
      padding-top: 5%;
   }

   #education {
      height: 100%;
      padding-top: 10%;
   }

   #sp-title, #sp-text {
      display: none;
   }

   p {
      font-size: 1rem;
   }
   .timeline__event__icon {
      padding: 40px;
      width: 100px;
      border-radius: 8px 0px 0px 8px;
   }
   .timeline__event__content {
      width: 600px;
   }
   .timeline__event {
      flex-direction: row;
   }
   #skills {
      height: fit-content;
      padding-bottom: 0px;
      padding-top: 10%;
   }
   


   .card-body {
      height: 180px;
   }

   .p-4 {
      padding: 1.5rem !important;
   }

   .card:hover {
      transform: scale(1.15);
   }

   .social {
      transition: ease-in-out 0.2s;
   }

   .social:hover {
      transform: scale(1.15);
   }

   #connect {
      height: 100%;
   }
}