/*font stuff */
.intro{

}

*{
    font-family: "Jersey 20", sans-serif;
    font-weight: 400;
    font-style: normal;  
}
.white-bg h1{
        font-family: "Special Elite", system-ui;
        font-weight: 900;
        font-style: normal;
        margin-right: 400px;
        margin-top: 300px;
}

.profile-photo img{
    width: 550px;
    height: 700px;
    border-radius: 50px;
    
}
.profile-photo{
    border-radius: 50px;
}
header nav{
    border-style:solid;
    border-color: black;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: white;
    overflow: scroll;

}
header nav figure{
    display: flex;
}
header nav figure img{
    image-rendering: pixelated;
    width: 70px;
    height: 70px;
}

#oldSprite{
    position: relative;
    width: 200px;
    height: 200px;

    z-index: 1;
}
#officerSprite{
    position:relative;
    width: 200px;
    height: 200px;
    z-index: 1;
}
.spriteTextBox{
    position: relative;
   background-color: white;
   width: 50em;
   height: 10em;
   max-width: 210px;
   text-align: left;
}
.spriteTextBox2{
    position: relative;
    background-color: white;
    width: 20em;
    height: 5em;
    text-align: left;
}

li{
    margin-top: 5px;
    margin-bottom: 5px;
}
.white-border{
    border-style: solid;
    border-color: black;
    background-color: white;
    border-radius: 5px;
}


.default-flx-parent{

    border-style:solid;
    border-color: black;
    border-collapse: separate;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   
}
.flx-parent-col{

    border-style:solid;
    border-color: black;
    display: flex;
    flex-direction: column;
 
}
.default-flx{
    display: flex;
    flex-direction: column;
     flex-wrap: nowrap;
}
.svg-icons{
    scale: 30px;
    height: 30px;
}
.contact-item{
    text-align: center;
}
.hover-parent:hover *{ /*TODO add javascript.*/
    background-color: white
}
.home-bg{
    background-color: #333;
}


    .scrollmenu {
       justify-content: left;
      white-space: nowrap; /* For horizontal scroll */
      position: absolute;
      margin-top: 100px;
      overflow: scroll;
      width: 500px;
      height: 329px;
        /*
        border-style: solid;
        border-color: #ffffff;
        border-radius: 10px;
        border-width: 10px;
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 40vw;
        justify-content: left;
 */

        
        
  }
  .scrollmenu-sm{
     justify-content: left;
      white-space: nowrap; /* For horizontal scroll */
      margin-top: 20px;
      overflow: scroll;
      width: 400px;
      height: 200px;
  }
  .devlog_item {
  
    display: inline-block;
    width: 10vw; /* Adjust as needed */
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 5px;
    white-space: wrap;

   

}

.stay-updated{
    margin-top: 150px;
    margin-left: 200px;
}
.white-bg img{
    position: relative;
    
    width: 742.5px;
    height: 550px;
}


.scrollmenu::-webkit-scrollbar {
    height: 10px;  /* Horizontal scrollbar height */
    width: 10px;
}

.scrollmenu::-webkit-scrollbar-thumb {
    background-color: #000000;  /* Scrollbar color */
    border-radius: 0px;  /* Rounded corners */
}
.event{
    background-color: rgba(255, 0, 0, 0.263);
}