/* Declare Variable for font and Color */
:root {
  --dk: #5e3575;
  --lt: #c676f5;
  --bg: #bfaed4;
  --ltfc: #ffffff;
  --accent: chartreuse;
}

/* fix scroll feature with sticky */
html {
  scroll-padding-top: 200px; /* height of sticky header */
}

/* Set all Elements to border-boxes for easy formatting */
* {
  box-sizing: border-box;
}

/* Want all website elements to display block as collumn */
/* Set text and background color for whole body */
body {
  display: block;
  background-color: var(--bg);
  color: var(--ltfc);
  font-family: 'Trebuchet MS', sans-serif;
}

/* Make Header banner sticky to scroll with page */
/* Worked with Classmate Nifer to do this */
header {
  position: sticky;
  top: 0px;
  z-index: 1;
  height: 100px;
  background-color: var(--lt);
}

/* Center my Main Header*/
header h1 {
  text-align: center;
  margin: auto;
  vertical-align: middle;
  line-height: 100px;
  font-size: 60px;
}

/* Format my nav buttons with flexbox to be centered */
/* Make sticky to scroll with page */
/* Margin on bottom to space away from main content */
nav {
  position: sticky;
  top: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
  margin-bottom: 100px;
  z-index: 1;
  background-color: var(--dk);
}

/* Format Nav Button Text */
nav a {
  margin: 0 5px;
  padding: 10px;
  width: auto;
  text-align: center;
  font-size: 20px;
  color: var(--ltfc);
  text-decoration: none;
  border: white;
  border-radius: 10px;
}

/* Underline nav buttons when hovering */
nav a:hover {
  padding: 5px;
  border: 5px dotted var(--accent);
  cursor: pointer;
}

/* Set main to display flex in column direction */
main {
  display: flex;
  flex-direction: column;
  align-content: center;
}

/* Flexbox format my about section */
/* adds margin to bottom to separate from main section */
.about {
  display: flex;
  align-items: center;
  margin: 0 20px 200px 20px;
}

/* add margin spacing to about section headers */
.about h2 {
  margin-bottom: 15px;
  font-size: 30px;
}

/* About me statement format */
.about-me {
  width: 40%;
}

/* Skill list format */
.skills {
  width: fit-content;
}

/* indent unordered list */
.skills ul {
  margin-left: 15px;
}

/* Format the About article */
article {
width: fit-content;
display: flex;
justify-content: space-around;
border-radius: 10px;
margin-top: 5px;
padding: 40px;
background-color: var(--dk);
border: 4px solid var(--lt);
}

/* format profile image */
.profile-pic {
  margin-right: 30px;
  max-height: 250px;
  border-radius: 10px;
  border: 4px solid var(--dk);
}


/* Use Flexbox to format my projects section */
.project-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 300px;
  margin: 0 20px 200px 20px;
}

/* set with of project description */
.project-dscr {
  border-radius: 10px;
  border: 4px solid var(--lt);
  margin-top: 5px;
  padding: 15px;
  background-color: var(--dk);
  width: 15%;
  height: fit-content;
}

.project-dscr h2 {
  font-size: 30px;
}

/* indent paragraph of project description */
.project-dscr p {
  margin-top: 15px;
}

/* Formats main project and secondary project section to flexbox */
div.projects {
  display: flex;
  flex-direction: row;
  width: 82%;
}

/* formats main project */
/* adds background image */
.main-project {
  margin: 5px;
  border-radius: 10px;
  width: 33.3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("../images/NaNarWord.png");
  background-color: var(--lt);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 4px solid var(--dk);
  transition: all .85s ease-in-out;
  text-decoration: none;
}

/* animate main project on hover */
.main-project:hover {
  opacity: .85;
  transform: scale(1.03);
}

/* Formats secondary projects to flexbox */
/* 2 tiles then wrap */
.secondary-projects {
  width: 66.6%;
  display: flex;
  flex-wrap: wrap;
}

/* Secondary projects tile formatting */
/* makes 4x4 grid with background image */
.secondary-projects a{
  border-radius: 10px;
  margin: 5px;
  width: 47%;
  height: 47%;
  background-image: url("../images/beautiful_placeholder.jpg");
  background-color: var(--lt);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--dk);
  backdrop-filter: none;
  transition: all .85s ease-in-out;
  text-decoration: none;
}

/* Animate secondary projects on hover */
.secondary-projects a:hover {
  opacity: .85;
  transform: scale(1.03);
}

/* Unique project card background image */
.code-snippet {
  background-image: url("../images/code_snippet.png") !important;
}

.freakimono {
  background-image: url("../images/freakimono.png") !important;
}

.bone-buddies {
  background-image: url("https://drive.google.com/uc?id=1s5JNJlVpC1YA0pZ1AyiHl94zfELmQlYW") !important;
}


/* Formats Project titles and description */
a>h3 {
  font-size: 30px;
  padding: 5px;
  background-color: var(--dk);
  width: 100%;
  align-self: center;
  justify-self: center;
  text-align: center;
  color: var(--ltfc);
}

/* Formats skills used list */
a>ul {
  color: black;
  text-align: center;
  align-self: center;
  justify-self: flex-end;
  width: fit-content;
  bottom: -50px;
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
  list-style: none;
  backdrop-filter: blur(10px);
  bottom: 5px;
}

.main-project li {
  text-decoration: none;
}

/* Center Align the footer */
footer {
  text-align: center;
  background-color: var(--dk);
  color: var(--accent);
}

/* add left/right margin to contact items  for spacing*/
footer a {
  margin: 0 5px;
  text-decoration: none;
  color: var(--ltfc);
  background-color: var(--dk);
}

/* For tablet size and smaller, website reformats to fit content */
@media screen and (max-width: 992px) {

  /* Navbar buttons center align */
  nav {
    justify-content: space-around;
  }

  /* About me section to display column */
  .about {
    flex-direction: column;
    align-items: center;
    margin: 0 20px 130px 20px;
  }

  article {
    margin-top: 30px;
    width: 80%;
  }

  .about-me h2 {
    text-align: center;
  }

  /* Project section is display column */
  .project-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px 100px 20px;
  }
  /* Format My Projects description height */
  .project-dscr {
    margin-bottom: 30px;
    min-height: auto;
    align-self: center;
    width: 80%;
    text-align: center;
  }

  /* Project tiles section display column */
  div.projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .main-project {
    width: 80%;
    min-height: 300px;
  }

  /* Secondary project tiles container display column */
  .secondary-projects {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Secondary project tiles width to 100% */
  .secondary-projects a {
    width: 100%;
    min-height: 150px;
  }
}