::selection       { background: #000; opacity:1.0; color:#000; padding:10px; /* Safari */ }

* {
  box-sizing: border-box;
}

body {background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4d/Graph_paper_notepad_%284562203394%29.jpg); 
  background-size: cover;  background-attachment: scroll;  background-position: top;
  overflow-x: hidden; background-repeat:repeat-y;
  font-family: "AndaleMono", monospace; 
  padding: 5vw; margin: 1vw auto auto auto;}

body main { 
  display: block; 
  text-align: center;
  overflow: hidden;
  height: 80%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

body img {
  display: block;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
}

body .blog_img_container {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  max-width: 700px;
  min-width: 300px;
  max-height: 600px;
  margin-left: auto;
  margin-right: auto;
}

body .blog_img{
  position: relative;
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-width: 700px;
  min-width: 300px;
  max-height: 400px;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

figcaption {
  font-size: smaller;
}

.overlay {
  position: absolute;
  top: 100;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  min-height: 10%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgb(232, 189, 125);
}

.blog_img:hover .overlay {
  opacity: 0.8;
}

nav {
  display: grid;
  grid-template-columns: repeat(6, [col-start] 1fr);
  gap: 10px;
  width: 100%;
  height: 100%;
  max-height: 80px;
}

nav div {
  max-height: 100px;
  object-fit: contain;
}

.page_home nav {  
  display: grid; 
  grid-template-columns: repeat(12, [col-start] 1fr);
  max-height: unset;
}

.page_home nav div {  
  max-height: unset;
}

@media (min-width: 576px) {
  #cv {
    grid-column: col-start 7 / span 6;
    grid-row: 1 / 2;
  }
  .page_home #pip {
    grid-column: col-start 5 / span 6;
    grid-row: 2 / 4;
  }
  #pip {
    grid-column: col-start 1;
    grid-row: 1;
  }
  #personal {
    grid-column: col-start 1 / span 6;
    grid-row: 1 / 3;
  }
  #status {
    grid-column: col-start 9 / span 3;
    grid-row: 2;
    font-size: 1cqw;
  }
}

@media (min-width: 768px) {
  #cv {
    grid-column: col-start 9 / span 4;
    grid-row: 1 / 3;
  }
  .page_home #pip {
    grid-column: col-start 5 / span 4;
    grid-row: 4 / 9;
  }
  #pip {
    grid-column: col-start 1;
    grid-row: 1;
  }
  #personal {
    grid-column: col-start / span 4;
    grid-row: 3 / 7;
  }
    #status {
    grid-column: col-start 8 / span 3;
    grid-row: 3 / 5;
    font-size: 1cqw;
  }
}

body nav .container {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: flex-end;
  grid-column: col-start / span 12;
  height: auto;
  width: 100%;
  max-height: 100%;
  border: solid red;
}

body nav .container .nav_grid {
  display: grid;
  position: absolute;
  width: 100%;
  height: 70%;
  grid-template-columns: repeat(3, [col-start] 1fr);
  align-items: center;
  gap: 5px;
  border: solid blue;
  }
 body nav .container .personal_grid {
    display: grid;
    position: absolute;
    width: 90%;
    height: 85%;
    grid-template-columns: repeat(2, [col-start] 1fr);
    align-items: center;
    gap: 5px;
    border: solid green;
    }

/* Navigation */

.hide {
  display: none;
  width: 100%;
  text-align: center;
}

body .nav_link:hover {
  animation: shake 0.2s; 
  cursor: pointer;
}
.nav_link:hover + .hide {
  display: block;
}

/* Status Box */

.status-box {
  position: absolute;
  width: 100%;
  height: auto;
  background-color: rgba(49, 203, 255, 0.3);
  border-radius: 5px;
  width: 38%;
  height: 30%;
  top: 20%;
  left: 30%;
  text-align: center;
  overflow-y: scroll;
  font-size: 0.8em;
}

/* Modular */

a { color: black; text-decoration: none;}

ul { margin:0px 0px 30px 0px; }
.capital { text-transform: capitalize }
ul.nobull li { list-style-type: none; }

/* Animations */
@keyframes shake {
  0% { transform: translate(2px, 4px) rotate(4deg); }
  20% { transform: translate(0px, 6px) rotate(1deg); }
  60% { transform: translate(1px, -6px) rotate(-4deg); }
  100% { transform: translate(2px, 2px) rotate(-1deg); }
}

/* Crafts */
.crafts-grid {
  display: flex;
}
.col {
  flex: 1;
}
@media (max-width: 576px) {
  .crafts-grid {
    display: block;
  }
}