:root {
  --space-grey: #595959;
  --black: #000000;
  --onyx: #525252; 
}


nav {
  font-size: 20px;
  text-align: center;
  margin: 30px 0 0;
  padding: 10px 0;
  font-family: "Lucida Console", "Courier New", monospace;
}

/* Added display inline to make the navigation bar horizontal */
/* Added padding for the spacing between the links */
/* Display inline-block allows me to edit padding/ margin */
nav li {
  display: inline-block;
  padding: 15px
}

/* Made the anchor tag text black and removed the text deocation
that underlines the words. */
a {
  color: var(--space-grey);
  text-decoration: none;
}


/* Made iimg height auto so it can remain the same as the browser size increases */
img {
  width: 100%;
  height: auto;
}

/* Made <p> within footer hidden */
footer p {
  display: none;
}


/* Main-profile class and image 1&2 IDs code found online to stack two images on top of each other */
.main-profile-pic {
  position: relative;
  top: 0;
  left: 0;
}

#image1 {
  position: relative;
  top: 0px;
  left: 0px;
  display: block;
}

#image2 {
  position: absolute;
  top: 0px;
  left: 0px;
}



html {
  /* set 1rem to 10px instead of native 16px to make it easier to calculate font-size values for the rest of the page (e.g. 1.6rem is 16px, 2.0rem is 20px, etc.) */
  font-size: 60%;
}

body {
  overflow-x: hidden;
}


h1 {
  font-size: 3.5rem;
  display: flex;
  justify-content: center;
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--space-grey);
}


main {
  width: 100%;
  margin: 2rem auto;
  font-size: 1.75rem;
  line-height: 1.5;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 10px;
  border: 1px solid red;
  /* width: 100%; */
  /* align-items: flex-end; */
  max-width: 100vw;
}

.custom-button {
  /* padding: 1.2rem 1rem; */
  height: 80px;
  border-radius: 8px;
  /* use linear-gradient() function to create a fading background  */
  background-image: linear-gradient(rgba(101, 99, 130, 0.222) 0%,
      rgba(44, 49, 68, 0.6)100%);
  border: none;
  font-size: 20px;
  width: 300px;
  max-width: 100%;
  box-shadow: none;
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--onyx)

}

.custom-button:hover {
  /* box-shadow: 0 0 10px var(--space-grey); */
  box-shadow: inset 0px 0px 8px var(--space-grey), 0 0 15px var(--space-grey);
}

.custom-button:active {
  font-size: 18px;
  /* box-shadow: inset 0px 0px 8px var(--space-grey), 0 0 15px var(--space-grey); */
  box-shadow: 0 0 10px var(--space-grey) inset;
}


/* Code below found in Activity 28 in 02 ADV CSS Classwork, I did a lot of modifications
to the CSS file and HTML file to suit the needs of my portoflio
really liked the gradient box and the black shadow hover, that assignment was helpful for that */

/* create our main grid with flexbox, use negative margins to offset the padding on the .card-column class */


.justify-center {
  justify-content: center;
}

/* using a mobile-first approach, set base column width to be 100% and we'll update it using media queries for larger screen sizes */
.card-column {
  flex: 1 0 100%;
  padding: 1.5rem;
  /* when the screen resizes, make it so our columns don't jump in size */
  transition: flex-basis 500ms linear;
  margin-bottom: 1.5rem;
  max-width: 100vw;
}

/* make each code card a flexbox column to align and justify content within it */
.code-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100%;
  padding: 2rem;
}

/* set an outer and inner drop shadow on the card to create a glowing effect on hover */
.code-block:hover {
  box-shadow: inset 0px 0px 8px var(--space-grey), 0 0 15px var(--space-grey);
}

/* each card's code block grows to the height of the largest code block on the page, making each card even in height */
.code-card .code-block {
  flex-grow: 1;
}

.code-card pre {
  /* set styles to make it so code wraps in <pre> instead of overflowing */
  white-space: pre-wrap;
  overflow: auto;
  tab-size: 4;
  padding: 1.2rem 1rem;
  border-radius: 8px;
  /* use linear-gradient() function to create a fading background  */
  background-image: linear-gradient(rgba(101, 99, 130, 0.222) 0%,
      rgba(44, 49, 68, 0.6)100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Added this code to make the butto clickable */
.code-block:active {
  font-size: 95%;
  box-shadow: 0 0 10px var(--space-grey) inset;
}

pre {
  font-size: 18px;
  color: var(--onyx);
}


/* using a mobile-first approach, use `min-width` values going from narrow -> wide for a responsive design */
@media screen and (min-width: 768px) {

  /* on tablets, set columns to only be 50% of the width and not grow */
  .card-column {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* media query for larger screens */
@media screen and (min-width: 992px) {
  header {
    width: 100%;
  }

  .card-column {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}