/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary colors: 

#313647
#435663
#A3B087
#FFF8D4

- Tints:
#fdf2e9
#fae5d3
#eb984e

- Shades: 
#cf711f
#45260a

- Accents:
- Greys

#888
#767676 (lightest grey allowed on #fff)
#6f6f6f (lightest grey allowed on #fdf2e9)
#555
#333

--- 05 SHADOWS

0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/* Hide scrollbar */
/* Credit to Mr_Green https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll */
::-webkit-scrollbar {
  display: none;
}

body {
  scrollbar-width: none;
}

body {
  -ms-overflow-style: none;
}

* {
  margin: 0;
  padding: 0;
}

body, html {
  background-color: #A3B087;
  font-family: "Rubik", sans-serif !important;
}

p, h1, h2, h3, h4, h5{
  color: #FFF8D4;
  margin-bottom: 10px;
}

.colors {
  color: #313647;
  color: #435663;
  color: #A3B087;
  color: #FFF8D4;
}

.navbar {
  background-color: #435663;
  box-shadow: 4px 4px 0px #313647;
  padding: 10px !important;
}

.navbar-brand {
  margin-left: 1rem;
  font-size: 48px;
  letter-spacing: 0.2rem;
  color: #FFF8D4;
  font-weight: 800;
  -webkit-text-stroke: 2px black;
  text-stroke: 1px black;
  text-shadow: 2px 2px 2px#313647;
}

.navbar-brand span {
  display: inline-block;
}

.navbar-brand:active,
.navbar-brand:visited {
  color: #FFF8D4;
}

.nav-link {
  color: #FFF8D4;
  font-size: 24px;
  text-shadow: 2px 2px 10px #313647;
  transition: all ease 0.5s;
}

.nav-item:last-child {
  margin-right: 1rem;
}

.nav-link:hover {
  color: #FFF8D4;
  font-weight: 400;
  transform: scale(1.1);
  transition: all 0.2s;
}

.nav-link:active,
.nav-link:visited {
  font-size: 24px;
  color: #FFF8D4;
  
}

.content {
  background-image: url("Hero-background.png");
  background-repeat: repeat;
  background-size: 10%;
  display: flex;
  text-align: center;
  flex-direction: row;
  background-color: #313647;
  overflow: hidden;
}

.content-container {
  padding: 2rem 4rem 2rem 4rem;
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4rem;

  box-sizing: border-box;
  padding: 4rem 4rem;
  height: 100%;
}

.portrait-container {
  display: flex;
  flex-shrink: 1;
  min-height: 0;
  flex-direction: column;
  gap: 4rem;
}

.social-media-icons {
  display: flex;
  justify-content: center;
  gap: 10%
}

.social-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 100px;
  box-shadow: 2px 2px 2px #111218;
  transition: all 0.2s;
}

.social-icon:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 3px #111218;
  transition: all 0.2s;
}

.portrait {
  border-radius: 10%;
  box-shadow: 10px 10px 10px #111218;
}

.hero-description {
  display: flex;
  flex-direction: column;
  color: #FFF8D4;
  font-weight: 600;
  text-shadow: 1px 1px 1px #111218;
  font-size: 32px;
  flex-shrink: 1;
  gap: 10px;
}

/* ABOUT SECTION */

.technologies {
  padding: 5% 5% 5% 5%;
  display: flex;
  flex-grow: 1;
  width: auto;
  justify-content: center;
}

.technologies-card {
  padding: 50px 5% 50px 5%;
  width: auto;
  height: auto;
  background-color: #435663;
  border-radius: 50px;
  box-shadow: #313647 10px 10px;
  text-shadow: 4px 4px 1px #313647;
  transition: all 0.2s;
}

.technologies-card:hover {
  box-shadow: #313647 14px 14px;
  transform: translateY(-5px);
  transition: all 0.2s;
}

.technologies-card h1 {
  padding-bottom: 10px;
}

.technologies-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  row-gap: 10px;
  column-gap: 20px;
  align-items: center;
  place-items: center;
  justify-items: center;
}

.technologies-box {
  display: flex;
  justify-content: center;
  align-content: center;
  max-width: 100px;
  transition: all 0.1s ease-out;
}

.technologies-box:hover {
  transform: translateY(-10px);
  transition: all 0.1s ease-in;
}

.technologies-box img {
  width: 100%;
  height: auto;
}

.js {
  width: 80% !important;
  height: auto;
}

.java {
  width: 75% !important;
}

.play {
  width: 70% !important;
}

/* EXPERIENCE SECTION */

.experience {
  display: flex;
  background-color: #A3B087;
  width: 100%;
  justify-content: center;
}

.experience-grid {
  display: grid;
  width: 100%;
  grid-template-rows: auto auto auto;
  grid-auto-rows: auto;
  justify-items: center;
  row-gap: 2rem;
  padding: 2rem;
}

.experience-grid h1 {
  font-size: 64px;
  font-weight: 800;
  -webkit-text-stroke: 3px black;
  text-stroke: 1px black;
  text-shadow: 2px 2px 2px#313647;
}

.experience-text {
  align-content: center;
}

.viewport-entry-animation span {
  display: inline-block;
  opacity: 0;
}

.card {
  width: 80%;
  background-color: #435663;
  color: #FFF8D4;
  text-shadow: 1px 1px 1px #313647;
  padding: 2rem;
  border-radius: 50px;
  box-shadow: #313647 10px 10px;
  transition: all 0.5s;
}

.card:hover {
  box-shadow: #313647 14px 14px;
  transform: translateY(-10px);
  transition: all 0.5s;
}

.university-card h2 {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 1rem;
}

.card-intro {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 900px;
  opacity: 0.95;
}

.role {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 2px solid rgba(255, 248, 212, 0.2);
}

.role:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.role h3 {
  font-size: 24px;
  font-weight: 700;
}

.role h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 1rem;
  opacity: 0.85;
}

ul {
  margin-bottom: 50px;
}

.card ul {
  margin-top: 1rem;
  margin-bottom: 0;
}

.card li {
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.experience-card h2 {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 1rem;
}

@media (max-width: 1160px) {
  .technologies-grid {
    grid-template-rows: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .content-container {
    flex-direction: column;
    padding: 10% 10% 10% 10%;
  }

  .experience-grid .card {
    padding: 1.5rem;
  }

}

@media (max-width: 532px) {
  .technologies-grid {
    grid-template-rows: 1fr 1fr 1fr;
  }

  .experience-grid h1 {
    font-size: 42px;
  }

  .experience-grid .card h2 {
    font-size: 18px;
  }

   .experience-grid .card h5 {
    font-size: 16px;
  }

  .experience-grid .card h3 {
    font-size: 16px;
  }

  .experience-grid .card {
    padding: 1.5rem;
  }

  .experience-grid {
    padding: 0rem;
  }
}