body {
    background-image: url(/assets/Fabric.png);
}
main {
    margin: 0px 120px 0;
    background-color:hsla(0, 0%, 0%, 0.5);
    filter: blur(4px);
    height: 100vh;
}
footer {
    background-image: url(/assets/bar.png);
    background-size: contain;
    background-repeat: round;
    background-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 8px;
    position: absolute;
    left: 230px;
    right: 230px;
    bottom: 10px;
    height: 2.5rem;
    font-family: 'SanFrancisco';
    font-size: 12px;
    line-height: 12px;
    color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
content {
    background-image: url(/assets/long_bar.png);
    background-size: contain;
    background-repeat: round;
    background-color:hsla(0, 0%, 0%, 0.5);
    border-radius: 8px;
    position: absolute;
    top: 165px;
    left: 230px;
    right: 230px;
    font-family: 'SanFranciscoThin';
    font-size: 12px;
    line-height: 20px;
    color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
#nav {
    background-image: url(/assets/bar.png);
    background-size: contain;
    background-repeat: round;
    background-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 8px;
    position: absolute;
    top: 10px;
    left: 230px;
    right: 230px;
    font-family: 'SanFrancisco';
    font-size: 12px;
    line-height: 12px;
    color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
@font-face {
    font-family: "SanFrancisco";
    src : url("/assets/fonts/SF-Pro-Display-Regular.otf") format("opentype");
}
@font-face {
    font-family: "SanFranciscoThin";
    src : url("/assets/fonts/SF-Pro-Display-Thin.otf") format("opentype");
}
html {
    font-family: 'SanFrancisco';
    font-size: 12px;
}