:root {
    --primary-color: #adf0d4;
    --secondary-color: #76ABAE;
    --bg-color: #222831;
    --my-gradient: linear-gradient(to right, #CFE7FA 0%, #6393C1 100%);
    
}

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Nunito', sans-serif; 
   transition-duration: 200ms;
}

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

.homeButton {
  width: 10vw;
  height: auto;
  max-width: 125px;
}

.homeButton:hover {
  opacity: 0.8 ;
}

.descriptionText {
  text-align: center;
}

.iconSVG {
  fill: var(--secondary-color);
  width: 100%;
  height: 100%;

}

.bentoIcons {
  fill: var(--secondary-color);
  width: 80%;
  margin: auto;
}

.grid-container {
  justify-content: center;
  max-width: 200vrem;
  margin: 1rem;
  display: grid;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
  grid-template-areas:
    "box9  box10  box3  box4  box4  box15  box5"
    "box1  box1   box7  box7  box7  box13  box12"
    "box2  box2   box7  box7  box7  box13  box12"
    "box6  box6   box8  box8  box11  box14  box14";
}

@media (max-width: 540px) {
  .grid-container {
    grid-template-areas:
      "box7  box7  box7  box7"
      "box1  box1  box2  box2"
      "box3  box3  box6  box6"
      "box9  box9  box10 box10"
      "box5  box5  box4  box4"
      "box15 box15 box8  box8"
      "box11 box11 box12 box12"
      "box13 box13 box14 box14";
    }
}

.grid-item {
  border-radius: 30px;
  border-radius: 50px;
  background: #222831;
  border: solid 2px var(--secondary-color);
  /* box-shadow: inset -13px -13px 18px #0e1014,
            inset 13px 13px 18px #36404e; */
  padding: .5rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: .75rem;
  overflow: hidden;
  transition: all 200ms ease;
}

.bentoIcons {
  width: 50%;
}

.grid-item:hover {
  cursor: pointer;
  background: #222831;
  box-shadow: inset -18px -18px 36px #0e1014,
  inset 18px 18px 36px #36404e;
  border: solid 1px var(--secondary-color);
}

.grid-item-1 {
  grid-area: box1;
}

.grid-item-2 {
  grid-area: box2;
}

.grid-item-3 {
  grid-area: box3;
}

.grid-item-4 {
  grid-area: box4;
}

.grid-item-5 {
  grid-area: box5;
}

.grid-item-6 {
  grid-area: box6;
}

.grid-item-7 {
  grid-area: box7;
}

.grid-item-8 {
  grid-area: box8;
}

.grid-item-9 {
  grid-area: box9;
}

.grid-item-10 {
  grid-area: box10;
}

.grid-item-11 {
  grid-area: box11;
}

.grid-item-12 {
  grid-area: box12;
}

.grid-item-13 {
  grid-area: box13;
}

.grid-item-14 {
  grid-area: box14;
}

.grid-item-15 {
  grid-area: box15;
}

.linkIcons {
  font-size: 1.8em;
}

h1 {
  font-size: clamp(50px, 2vw, 80px);
  background: #CFE7FA;
background: linear-gradient(to right, #CFE7FA 0%, #6393C1 100%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

h2 {
  color: var(--primary-color);
  font-size: 2.0em;
}

h3 {
  font-size: 1.5em;
  font-style: normal;
}

h4 {
  font-size: 250%;
  background: #CFE7FA;
background: linear-gradient(to right, #CFE7FA 0%, #6393C1 100%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h5 {
  font-size: clamp(20px, 2vw, 30px);
  color: var(--primary-color) !important;
  font-weight: lighter;
}

.grid-item p {
  font-weight: 500 !important;
}

body {
    background: var(--bg-color);
    color: var(--primary-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 72px;
    padding: 14px;
  
}

.darkerText {
    color: var(--secondary-color);
}


header, main, footer {
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}

p {
  font-size: clamp(15px, 2vw, 30px);
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

nav {
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 32px;
}

nav a {
    cursor: pointer;
    text-decoration: none;
}

nav a:hover {
    opacity: 0.7;
}

main, section, .nameContainer {
    display: flex;
    flex-direction: column;
}

main {
    gap: 64px;
    padding-bottom: 64px;
}

section {
    gap: 48px;
}

.nameContainer {
    gap: 8px;
}

.statsContainer {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    align-items: center;
    gap: 24px;
}

.imgContainer {
    width: 20rem;
    height: 20rem;
    overflow: hidden;
    border-radius: 50%;
}

.imgContainer img {
    display: inline;
    margin:  auto;
    height: 100%;
    width: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.stats {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stats>div {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.neumo {
  display: flex;
  flex-direction: column;
  align-items: center;
  object-fit: contain;
  width: 600px;
  height: 400px;
  border-radius: 50px;
  background: #222831;
  box-shadow:  20px 20px 60px #1d222a,
             -20px -20px 60px #272e38;
}

.stats div i {
    font-size: 2.0em;
}

.stats div div {
    display: grid;
    place-items: center;
    min-width: 40px;
}

.aboutMe {
  text-align: center;
  
}

.projectContainer {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

.headerText {
    text-decoration: none;
    color: var(--secondary-color);
    font-size: clamp(20px, 2vw, 30px);
    
}

.projectItem {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    
}

.projectImg {
    margin-left: auto;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}


.imageWrapper:hover {
    box-shadow:  5px 5px 10px #15181c,
                 -5px -5px 10px #55606e;
}



.projectItem div:first-child {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.projectItem>div:last-child {
    aspect-ratio: 16/9;
    max-width: 30%;
    overflow: hidden;
    border-radius: 8px;
}

.projectItem>div:last-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    flex-direction: column;
}


.linkContainer {
    display: flex;
    align-items: center;
    gap: 24px;
}

.linkContainer > a {
  display: flex;
  align-items: center;
}

.linkContainer>a>img {
  margin-left: auto;
}

.linkItem {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 24px !important;
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.linkItem:hover {
    opacity: 0.7;
}

.linkItem p {
    font-size: 0.9em;
}

/* 
 @media (max-width: 400px) {
  .grid-container { 
    grid-template-areas:
    "box7  box7"
    "box1  box2"
    "box3  box4"
    "box5  box6"
    "box7  box8"
    "box9  box10"
    "box11 box12"
    "box13 box14"
    "box15 box 15";
  }
  
  .grid-item-7 background {
    height: 250px;
  }
}  */


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

.mailButton {
    align-items: center;
    padding: 0.5em 1em;
    border: 2px solid var(--secondary-color);
    width: 10vw;
    height: auto;
    min-width: 150px;
    border-radius: 0.5em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Nunito", sans-serif;
    font-weight: 300;
    color: var(--secondary-color);
    text-align: center;
    justify-content: center;
    transition: all 0.2s;
    animation: mailButtonBouncy 5s infinite linear;
    position: relative;
    
  }
  
  .mailButton:hover {
    background-color: var(--secondary-color);
    color: #000000;
  }
  
  @keyframes mailButtonBouncy {
    0% {
      top: 0em;
    }
    40% {
      top: 0em;
    }
    43% {
      top: -0.9em;
    }
    46% {
      top: 0em;
    }
    48% {
      top: -0.4em;
    }
    50% {
      top: 0em;
    }
    100% {
      top: 0em;
    }
  }