@font-face { font-family: space; src: url('/fonts/SPACE.ttf'); } 
@font-face { font-family: nasa; src: url('/fonts/nasalization-rg.otf'); } 


header {
    position: relative;
    color:#000000;
    top: 0;
    background-color: rgb(255, 102, 0);
    display:flex
  }


#headerText{
    text-align: left;
    padding-left: 20px;
    font-family: nasa , sans-serif;
}

  body {
    background-color: rgb(165, 164, 164);
    color: rgb(255, 255, 255);
    margin:0;
    font-family: sans-serif;
    height: 100dvh;
}


#page{
background-color: darkgray;
color: white;

width: 100%;
min-height: 100dvh;

display: flex;
}

#sidebar{
padding-top: 20px;

background-color: white;
color:black;
min-width: 160px;
padding-left: 20px;

overflow-x: hidden;
display: flex;
flex-direction: column;
font-size: 20px;
line-height: 30px;
flex:1;
}


.homeLink{
  text-decoration: none;
  color:black;
}

.homeLink:hover{
  text-decoration: none;
}

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

.NavLink a:hover{
    color:rgb(255, 102, 0);
}


#content{
    background-color: #9a9999;
    color:rgb(0, 0, 0);
    width: 100%;
}

#pagetopic{
    text-align: center;
    color: #000000;
    font-family: sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;
}


#pagetitle{
    font-size: 30px; 
    padding-bottom: 15px;
}

#bodycontent{
    background-color: rgb(68,68,68);
    color:white;
    width: 60%;
    padding-left:20%;
    padding-right: 20%;
    padding-bottom: 40px;
    padding-top:40px
}

#bodycontentmap{
  background-color: rgb(68,68,68);
  color:white;
  width: 100%;
  padding-left:0;
  padding-right: 0;
  padding-bottom: 0;
  padding-top:0;
}

#bodycontentgallery{
  background-color: rgb(68,68,68);
  color:white;
  width: 80%;
  padding-left:10%;
  padding-right: 10%;
  padding-bottom: 0;
  padding-top:100px
}


.permLink a{
color:rgb(255, 102, 0);
}


.infoblock{
    padding-top: 30px;
    padding-bottom: 30px;
}


footer {
    background-color: rgb(255, 102, 0);
    color: rgb(0, 0, 0);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 50px; /* Optional height */
  }

#footerlink{
  color:black;
  
}


/* map page css */




/* image galley pages */



  /* contact page specific css */

  .headshot{
    width: 350px; 
    height: 350px; 
    border-radius: 50%; 
    margin-bottom: 40px;

  }

  .centericons{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
  }

  #contactdetails{
    max-width: 320px;
    width: 100%;
    padding: 0;
    margin: 0;
    padding-left: 20px;
  }


  .contactlink a{
    font-size: 20px;
    text-decoration: none;
    color: lightblue;
  }

  .contactlink p{
   font-size: 20px; 
  }

  .fa {
    padding: 20px;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    text-align: center;
    text-decoration: none;
    margin: 5px;
  }
  
  /* cool icon colors */
  
  .fa-instagram {
    background: linear-gradient(200deg,#833ab4,#fd1d1d,#fcb045);
    color: white;
  }
  
  .fa-facebook {
    background: #1877F2;
    color: white;
  }
  
  .fa-github {
    background: #000000;
    color: white;
  }
  
  .fa-youtube {
    background: #FF0000;
    color: white;
  }

  .fa-linkedin {
    background:  #0A66C2;
    color: white;
  }

.flex-container{
  display: flex;
}