/* Common sizing fixes */
*, *:before, *:after {
box-sizing: border-box;
}
body,div,img,table,thead,th,tbody,tr,td {
margin: 0px;
padding: 0px;
}

body {
background-color: #2a0d45; /* Nmap Purple */
min-width: 300px;
width: auto !important;
width: 300px;
}

#nst-wrapper {
padding: 0.5rem;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}

/* header grid */
#nst-head {
display: grid;
grid-template:
 "logo gnav" auto
 "logo search" 2rem
 "snav snav" auto
 / 168px minmax(0, 1fr);
gap: 0.5rem;
padding-bottom: 0.5rem;
background-color: #2a0d45;
color: #e0f7ff;
}
#nst-logo {
grid-area: logo;
justify-self: left;
display: flex;
align-items: flex-end;
height: 90px
}
#nst-logo > img {
width: 168px;
height: auto;
}
#nst-gnav {
grid-area: gnav;
height: 0px;
visibility: hidden;
display: grid;
grid-template-columns: repeat(4, min-content);
justify-items: right;
justify-content: right;
gap: 0.5rem 1rem;
}
#nst-head-search {
grid-area: search;
}
/* sitenav is actually in main, but JS will move it to header */
#nst-sitenav {
grid-area: snav;
display: flex;
flex-wrap: wrap;
gap: 2px;
/* Fake the header background */
box-shadow: 0px 0px 0px 0.5em #2a0d45;
background-color: #2a0d45;
margin-top: -0.5rem;
margin-bottom: 1rem;
}
#nst-sitenav > a,
.nst-search-button {
text-align: center;
font-weight: bold;
border: 0;
color: #e0f7ff;
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
            inset -2px -2px 3px rgba(0, 0, 0, .6);
border-radius: 0.5rem;
background-color: #2a0d45;
background-image: linear-gradient(#7e6496, #2a0d45);
}
#nst-sitenav > a {
padding: 0.6em;
flex: 1;
}

.nlink {
color: inherit;
text-decoration: none;
}
.nlink:hover {
color: #f0e0ff;
text-decoration: underline;
}

#nst-head, #nst-sitenav {
font-family: sans-serif;
white-space: nowrap;
}
.nst-search-button:hover,
#nst-sitenav > a:hover {
background-image: none;
background-color: #7e6496;
text-decoration: underline;
}
.nst-search-button:active,
#nst-sitenav > a:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
            inset 2px 2px 3px rgba(0, 0, 0, .6);
}
/* current page */
#nst-sitenav > .here {
 background-image: none;
 font-style: italic;
}

#nst-content {
background-color: white;
padding: 0.5rem;
border-radius: 1rem;
}

.nst-search {
display: flex;
gap: 0.2em;
width: 100%;
height: 2em;
}
.nst-search-q {
flex: 1;
width: 0px;
}
.nst-search-button {
aspect-ratio: 1;
height: 100%;
}

#nst-content img {
max-width: 100%;
height: auto;
}

/* Narrow screen menu items */
#menu-open, #menu-close {
color: inherit;
display: none;
position: absolute;
right: 1rem;
top: 1rem;
z-index: 1;
}
.blur {
background: linear-gradient(#2a0d45, transparent);
}
/* Hide header screenshots */
@media screen and (max-width: 980px) {
 #nmap-header > .header-img {
 display: none;
 }
}
@media screen and (max-width: 700px) {
/* Hide the "nmap banner" image carousel */
 #nmap_bnr {
 display: none;
 }
 /* Fold global nav to 2x2 grid */
 #nst-gnav {
  grid-template-columns: repeat(2, min-content);
 }
}
/* Activate narrow screen menu */
@media screen and (max-width: 450px) {
 #nst-sitenav {
  display: none;
 }
 #nst-head {
 grid-template:
  "logo" 90px
  "search" 2rem
  "snav" auto
  "gnav" auto;
 justify-items: center;
 padding-bottom: 1rem;
 }
 #nst-head, #nst-sitenav, #nst-gnav {
 gap: 1rem;
 }
 #menu {
 height: calc(90px + 0.5rem);
 overflow: hidden;
 }
 /* show the menu icon */
 #menu-open {
 display: block;
 }
 
 /* menu clicked */
 #menu.open,
 #menu:target {
 overflow: visible;
 }
 #menu.open > .blur,
 #menu:target > .blur {
 position: fixed;
 left: 0;
 top: 0;
 padding: 7px;
 height: 150%;
 width: 100%;
 }
 /* swap menu and close icons */
 #menu.open #menu-open,
 #menu:target #menu-open {
 display: none;
 }
 #menu.open #menu-close,
 #menu:target #menu-close {
 display: block;
 }
}

.breadcrumb-nav {
display: flex;
list-style-type: none;
padding: 0;
flex-wrap: wrap;
width: fit-content;
margin: 0.5em 0px;
}
.breadcrumb {
white-space: nowrap;
}
.breadcrumb.current {
margin-left: auto;
}
.breadcrumb:not(.current)::after {
content: "/";
margin-inline: 0.25em;
}

/* general styles */
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
pre {
overflow-x: auto;
}
.purpleheader {
font-size: large;
padding: 0;
color: white;
background: #2A0D45;
font-family: sans-serif;
font-weight: bold;
font-size: 140%;
text-align: center;
clear: both;
border-radius: 7px;
}

/* Makes a purple box with big bold text */
.pbbox  { 
border: 1px solid #2A0D45;
background: #F5F1F9;
font-size: larger;
font-weight: bold;
padding: 1rem;
width: fit-content;
clear: both; 
}

.purple, .purple a, .purple a:visited {
color: white;
}