/*
Colors:
  Top grad: hsl(116, 100%, 24%)
  Bottom grad: hsl(110, 100%, 6%)
  
  TextColor: white
  HighlightColor: #00fa00

*/

/* color pallet */

:root {
  --Highlight1: hsl(128, 100%, 50%);
  --Highlight2: hsl(128, 75%, 50%);
  --Background1: hsl(0, 0%, 0%);
  --Background2: hsl(0, 0%, 8%);
  --Background3: hsl(0, 0%, 15%);
  --Text1: hsl(0, 0%, 100%);
  --Text2: hsl(0, 0%, 80%);
}

/* Gloabal defaults */
body {
  background-color: hsl(116, 100%, 8%);
  color: var(--Text1);
  padding: 1%;
  font-size: 30px;
}

/* legal attribute */
/* Copyright symbol:  ©*/
#legal {
  color: var(--Text2);
  font-style: italic;
  font-weight: bold;
  font-family: cursive;
}

/* Id to pop sections */
#PopColor {
  color: var(--Highlight1);
  font-size: 45px;
  text-decoration: underline;
}

/* attribute to wrap box */
#MakeJumpOut {
  border: 2px solid, var(--Highlight1);
  border-radius: 20px;
  text-align: center;
  box-shadow: 3px 3px 2px 3px #00fa00;
  background-image: radial-gradient(at center, var(--Background2), var(--Background1));
}


/* Header container */
header {
  color: white;
  margin: 0% auto;
  font-size: 4rem;
  width: 500px;
  height: 75px;
  text-align: center;
}

/* Main container for about me section */
.AboutMeFlex {
  display: flex;
  margin: 30px 10% 30px 10%;
  padding: 30px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  .AboutMeBoxLeft {
    padding-right: 100px;
    width: 40%;
    .AB1 {
      /* Blank box just to have incase In want to add properties */
    }

    /* Nested second indented box */
    .AB2 {
      color: var(--Text2);
      font-style: italic;
    }
  }
  .AboutMeBoxRight {
    width: 40%;
    .AB3 {
      .ExperienceBox {
        display: flex;
        flex-direction: row;
        justify-content: center;
        
      }
      
      .ExperienceIMG {
        img {
          width: 100px;
        }
        position: relative;
       }

    }
    
    /* Container for linked images */
    .AB4 {
      a {
        img {
          height: 70px;
          width: 70px;
          padding: 25px 25px 0px 25px;
        }
        color: black;
      }
    }
  }
  h2 {
    text-decoration: underline;
    display: block;
  }
}

/* Individual box class */


/* Connection container not nested "because of inheriting issues" */




/* Main flexbox container for creation cards */
.CreationContainer {
  margin: 30px 10% 30px 10%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

/* Individual and highly nested creation class for each box */
.Creation {
  margin: 20px;
  padding: 0px 10px 0px 10px;
  width: 40%;
  h2 {
    margin: auto;
    margin-top: 5px;
    font-size: 40px;
    color: var(--Highlight2);
    font-weight: 800;
    text-decoration: underline;
  }
  /* nested flexbox for mid text */
  .MidText {
    padding-left: 20%;
    padding-right: 20%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    h5 {
      margin: inherit;
      font-size: 25px;
      color: var(--Text2);
      font-style: italic;
      font-weight: 500;
      text-decoration: underline;
    }
    /* Make the images clickable with a link but keep them inline */
    img {
      width: 70px;
      height: 70px;
      padding-left: 10px;
    }
  }
}

/* Copywrite container */
.CopywriteAndlegal {
  text-align: center;
  font-size: 15px;
}

/* Animations */

/* Holder */

.ExperienceIMG::after {
  content: attr(data-tip);
  position: absolute;
  top: 100%;
  left: 47%;
  background: var(--Background3);
  color: var(--Highlight2);
  border-color: var(--Highlight1);
  border-style: solid;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.ExperienceIMG:hover::after {
  opacity: 1;
}