body {
    margin: 0;
    padding: 0;
    --theme-color-primary: rgba(255, 255, 255, 1);
    --theme-color-secondary: black;
    --theme-accent: #09448c;
    background-color: var(--theme-color-primary);
    color: var(--theme-color-secondary);
    font-size: 1.5rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding:2rem;
    height:100%;
}
@media screen and (prefers-color-scheme:dark) {
    body {
        --theme-color-primary: rgba(0, 0, 0, 1);
        --theme-color-secondary: white;
        --theme-accent: #2db1f3;
    }
}
a{
    text-decoration: none;
    color:var(--theme-accent);
}
hr{
    width:100%;
    color:transparent;
}
#url{
    width:100%;
    padding:0.5rem;
    border-radius:0.5rem;
}
#notes{
    display:flex;
    flex-direction: column;
    max-width:1200px;
}

.note{
    color: var(--theme-color-secondary);
    width:100%;
    display:flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    padding-bottom: 1rem;
    
}
.poster{
    display:flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    width:20rem;
    max-width:20rem;
    margin:0;
    margin-right:1rem;
    word-wrap: break-word;
    
}
.poster * {
    margin:0;
}
.poster img {
    width:15rem;
}
.note>*{
    margin:1rem;
}