styles.css

* {
    box-sizing: border-box;
}
html {
    height: 100vh;
    width: 100vw;
    margin:0;
    padding:0;
    /* background-color: rgb(30, 30, 30);       */

    background-image: url('monuments.jpg');
    background-size:cover; /* Ensures the background image covers the entire div */
    background-position:top; /* Centers the background image */
    background-repeat:no-repeat;
    background-attachment: fixed; /* Fixes the background image in place */ 
    background-position-y: 48px; /* Position 48px from top */
    
    -ms-overflow-style: none;   /* Internet Explorer, Edge  */
    scrollbar-width: none;      /* Firefox                  */
    overflow-x: hidden;
}
::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Opera    */
}
body {
    width: 100%;
    height: calc(100% - 77px);
    padding: 0;
    margin:77px auto 0 auto;

    font-family: Helvetica, Arial, sans-serif;
    font-size: 12pt;


    display:flex;
    align-content: center;
    justify-content: center;

    overflow: hidden;
}

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

#page {
    background-color: white;

    margin:auto;
}
/* @media print {
    body {
        padding:0;
    }
} */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
tr {
    margin:0;
    padding:0;
}
tr:last-child td {
    border-bottom: none;
}
td {
    vertical-align: top;
    padding: 10px 0 10px 10px;
    border-bottom: 1px solid lightgray;
}
td:first-child {
    text-align: right;
    white-space: nowrap;
    padding-right: 10px;
    padding-left:0;
    font-weight: bold;
}
td:nth-child(2) {
    /* display: flex; */
    /* flex-direction:row; */
    text-align: justify;
    border-left: 2px solid gray;
}
p {
    margin: 0;
}
/* img {
    float: right;
    margin-left: 10px;
    object-fit: contain;
} */
br {
    height: 5px;
    margin:0;
    padding:0;
}
h1 {
    /* margin: 0 auto; */
    text-align: center;
    margin: 0;
}

 fieldset {
    margin: 10px auto;
    padding: 60px;
 }
 fieldset h3 {
    margin: 0;
 }


.redacted {
    background-color:black; 
    color:white; 
    padding: 0 3pt; 
    font-weight: normal;
}

#header {
    height: min-content;
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    display:flex; 
    flex-direction:row; 
    padding:16px; 
    background-color:white;
    margin:0;
} 
#header #name {
    min-width:max-content;
    text-align: left;
}
#header #name .redacted {
    padding: 0 6pt; 
    color:transparent; 
}
#header #name .redacted:hover {
    color:white;
}
#header span {
    flex:1;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}


#topnav {
    flex:1; 
    display:flex; 
    flex-direction: row;
    overflow-x: scroll;
}

#top-socials {
    display:flex;
    flex-direction: row;
}


.socials {
    float:right;
}
#header a {
    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 44px;
    aspect-ratio: 1/1;
    margin: auto;

    padding: auto;

    white-space: nowrap;
    text-decoration: none;
}
a svg {
    height: 22px;
    aspect-ratio: 1/1;
    margin: 11px;
    /* width: 18pt; */
    overflow:visible;
}
a svg .shaddow {
    fill: black;
}
a svg:hover .shaddow, 
a.selected svg .shaddow{
    fill:inherit;
}



#right-socials {
    display:none;
    flex-direction: row;
    position:absolute;
    top:77px;
    right:0;
    height:calc(100vh - 77px);
    width: fit-content;
    /* width: 44px; */
    overflow: visible;

    justify-content:space-around;

    background-color:white;
}
#right-socials > div {
    display:flex;
    flex-direction: column;
    height: 100%;
    padding:0 16px; 
}

#menu a {
    padding: 0 6pt;
    margin: auto;
    height: 24pt;
}
#menu a:hover {
    background-color:black; 
    color:white; 
    /* padding: 0 3pt; */
}

#network {
    /* display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center; */
    text-align: center;

    width: auto;
    height: auto;
    margin: auto auto;
    padding: 0 auto;

    overflow:visible;
}
#network svg {
    height: 44px;
    width: auto;
    margin:0 auto;
    padding:0;
}
#network img {
    height: 44px;
    width: auto;
    margin:0 auto;
    padding:0;
    object-fit: contain;
}

a.button {
    width: 44px;
    height: 44px;
}