/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: verdana;
}
.topnav {
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  list-style-type: none;

  max-width: 758px;
  margin: 0 auto;
  border-radius: 2px;

  position: relative;
  z-index: 1; /* IMPORTANT: make navbar clearly above everything */
}

.topnav::after {
  content: "";
  position: absolute;

  left: 0;
  right: 0;
  top: 99%;

  height: 20px;

  background: linear-gradient(to bottom, rgba(0,0,0,0.35), transparent);

  transform: skewX(33deg);
  filter: blur(6px);

  z-index: -1; /* NOW it properly sits behind navbar */
  pointer-events: none;
}
.topnav a {
  float: left;
  display: inline;
  color: #C73B20;
  text-align: center;
  padding: 10px 33px;
  text-decoration: none;
  font-size: 17px;
  z-index: 0; 
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #98AD40;
  color: white;
}

/* Add an active class to highlight the current page */
.active.disabled {
  background-color: #000;
  color: white;
  display: block;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.img-wrap {
  text-align: center;
  

  background-image: url(https://natrichard.neocities.org/portbg.png);
  background-size: 100%;
   z-index: -3; 
}

.gallery {
  display: inline-block;
  margin: 10px;
  vertical-align: top;
}

.gallery img {
  width: 250px;   /* 👈 shrink images */
  height: auto;
}
.nudge-center {
  transform: translateY(20px);
}