* {
 font-family: "VT323";
 letter-spacing: 1px;
 color: white;
}
.one-click-button {
 background: black;
 border: 2px solid white;
 font-size: 16px;
}
.one-click-button:hover {
 border: 2px solid #adff2f;
 color: #adff2f;
}
.one-click-button:active {
 border: 2px solid yellow;
 color: yellow;
}
.one-click-button:disabled {
 border: 2px solid gray;
 color: gray;
}
.one-click-button:not([disabled]){
 cursor: pointer;
}
.one-click-button-selected {
 color: gold;
 border: 2px solid gold;
}
.filterWhite {
 filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(107%) contrast(102%);
}
.statusOk {
 color: greenyellow;
}
.statusFailed {
 color: red;
}
body {
 margin: 0;
 min-height: 100vh;
 background: black;
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto 1fr auto;
}
main {
 display: grid;
 align-items: flex-start;
 overflow-y: auto;
 min-height: 0;
 padding-bottom: 60px;
}
header {
 border-bottom: 2px solid white;
 margin: 0;
 display: flex;
 position: sticky;
 background: black;
 padding: 10px 24px;
 min-height: 32px;
 align-items: center;
}
#headerNavigation {
 display: flex;
 gap: 24px;
}
.nav-button{
 text-decoration: none;
 font-size: 22px;
}
.nav-button:hover{
 color: greenyellow;
}
.nav-button:focus{
 color: yellow;
}
footer {
 border-top: 2px solid white;
 margin: 0;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 background: black;
 padding: 10px 10px;
 min-height: 32px;
 align-items: center;
 justify-items: start;
 gap: 16px;
}
footer div:nth-child(2) {
 justify-self: center;
}
footer div:nth-child(3) {
 justify-self: end;
}
#footerHackerNoonAttribution {
 display: flex;
 gap: 8px;
 align-items: center;
}
.highlight-nav-button {
 text-decoration: none;
 color: greenyellow;
}
.highlight-nav-button:hover {
 color: yellow;
}
#footerSocialIcons {
 display: flex;
 gap: 8px;
 align-items: center;
}
#footerSocialIcons div {
 margin-right: 8px;
}
#footerSocialIcons a {
 display: flex;
 align-items: center;
 height: 28px;
}
#footerSocialIcons img {
 display: block;
}
#footerSocialIcons a:hover {
 filter: brightness(0) saturate(100%) invert(90%) sepia(53%) saturate(1122%) hue-rotate(23deg) brightness(105%) contrast(100%);
}
#footerSocialIcons a:focus {
 filter: brightness(0) saturate(100%) invert(99%) sepia(33%) saturate(7493%) hue-rotate(351deg) brightness(100%) contrast(105%);
}
.modal {
 position: fixed;
 z-index: 9999;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background: rgba(0, 0, 0, 0.85);
 display: flex;
 display: none;
 justify-content: center;
 align-items: center;
}
h1, h2 {
 font-weight: normal;
}
.modal-content h2{
 margin-top: 0;
}
.modal-content {
 background: black;
 padding: 16px;
 border: 4px solid white;
 max-width: 425px;
 position: relative;
 margin: 32px;
}
.modal-content button {
 width: 100px;
 height: 32px;
}
.nav-button-selected {
 color: gold;
}