@font-face {
  font-family: 'OCRAEXT';
  src: url('/io99-font/OCRAEXT.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body{
    background-color: #0F0F0F;
    font-family: 'OCRAEXT', Arial, Helvetica, sans-serif;
    color: #bdbebe;
}
#header-guide-bar{
    position: fixed;
    display: flex;
    color: #ffffff;
    left: 0px;
    top: 0px;
    width: 100%;
}
#morph-hinge{
    position: fixed;
    display: flex;
    color: #ffffff;
    left: 10px;
    top: 0px;
    left: 0px;
    width: 500px;
    z-index: 1;
    
}
#left-menu{
    position: fixed;
    display: flex;
    color: #ffffff;
    left: 10px;
    top: 5px;
    left: 5px;
    width: 45px;
    z-index: 1;
    opacity: 20%;
    
}
#side-option-menu{
    position: fixed;
    display: flex;
    color: #ffffff;
    left: 10px;
    top: 185px;
    left: 20px;
    width: 60px;
    height: 80vh;
    z-index: 1;
    rotate: 0.5deg;
    
}
header{
    display: flex;
    position: fixed;
    align-items: center;
    align-content: center;
    top: 8px;
    left: 90px;
    z-index: 9999;
    gap: 20px;
}
#site-logo{
    display: flex;
    position: relative;
    align-items: center;
    align-content: center;
    top: -4.5px;
    width: 35px;
}
nav{
    display: flex;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#menu{
    display: flex;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 40px;
    text-decoration: none;
    
}
#menu li{
    display: flex;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 40px;
    text-decoration: none;

}
main{
    margin-left: 90px;
}
#nameless-cards-container{
    margin-top: 100px;
    z-index: 10;
}