#center {
    margin: 30px auto;
    width: 960px;
    height: 630px;
}

#main {
    display: flex;
    flex-direction: row;
}

#title {
    width: 100%;
    background: var(--darkest);
    font-family: var(--title);
    font-size: 32px;
    padding: 0 20px;
    margin-left: 22px;
    text-align: right;
    text-transform: uppercase;
    text-shadow: 3px 3px 3px var(--shadow);
    transform: skew(-20deg);
    box-shadow: 3px 3px 5px var(--shadow);
}

#nav {
    width: 100%;
    background: var(--shadow);
    font-family: var(--title);
    font-size: 20px;
    padding: 5px 20px 10px 10px;
    margin-left: 8px;
    text-align: right;
    transform: skew(-20deg);
    box-shadow: 3px -3px 5px var(--accent);
}

#nav>a {
    margin: 0 10px;
}

#side {
    width: 225px;
}

.pic {
    width: 100%;
    box-shadow: 8px 8px var(--shadow);
    margin-bottom: 10px;
}

#basic {
    padding: 10px 5px;
    width: 225px;
    font-family: antonio;
}

#basic>.entry>a {
    color: var(--accent);
    font-weight: 700;
    transition: 0.5s ease-in-out;
}

#basic>.entry>a:hover {
    color: var(--lightest);
}

.field {
    font-size: 9px;
    font-family: var(--tiny);
    background: var(--darkest);
    max-width: 225px;
    padding: 4px 5px;
    transform: skew(-20deg);
    color: var(--lightest);
    text-transform: uppercase;
    border-top: 1px solid var(--darkest);
}

.entry {
    padding: 3px 10px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: right;
    transform: skew(-20deg);
    width: 100%;
}

#linebox {
    width: 60px;
    height: 610px;
    margin: 10px auto;
    overflow-y: auto;
}

.line {
    width: 45px;
    border: solid 1px var(--accent);
    padding: 3px;
    transition: 0.5s ease-in-out;
    margin: 5px 3px;
}

.line:hover {
    border: solid 1px var(--midtone);
}

#content {
    width: 650px;
    height: 625px;
    padding: 10px;
    margin: 10px 20px 10px 0;
    text-align: justify;
    font-size: 12px;
    overflow-y: scroll;
}

.ref {
    text-align: right;
    font-style: italic;
    font-weight: 700;
    font-size: 9px;
    color: var(--darkest);
    text-transform: uppercase;
}

#extra, #powerset {
    display: flex;
}

.left {
    width: 45%;
    padding: 10px;
}

.right {
    width: 60%;
    background-color: var(--shadow);
    padding: 10px;
}

#powerset {
    padding: 10px;
    margin: 10px 0;
}

.headline {
    font-family: var(--title);
    font-size: 18px;
    padding: 5px;
    transform: skew(-20deg);
    border-bottom: 1px solid var(--lightest);
}

li {
    list-style: none;
}

.ex {
    text-indent: 20px;
}

.ex::before {
    content: '-';
    margin-right: 5px;
    color: var(--lightest);
}

.item, .skill, .ex {
    font-size: 10px;
    text-transform: uppercase;
}

.lock::before, .key::before, .spades::before {
    font-family: 'cappuccicons';
    margin-right: 10px;
    color: var(--accent);
}

.lock::before {
    content: '\eb6a';
}

.key::before {
    content: '\eb41';
    ;
}

.spades::before {
    content: '\ec8e';
}