:root {
    --primary: #EB8383;
    --muted: #E0BDB6;
    --main: #F5EADC;
    --grey: #413c3c;
  }


body {
    background-color: var(--main);
    background-image: url('bg.svg');
    background-attachment: fixed;
    font-family: Helvetica;
    font-size: 0.8rem;
    color: var(--grey);
}

.container {
    height: 500px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.full {
    height: fit-content;
    position: relative;
}

.flexr {
    display: flex;
    flex-direction: row;
}

.flexc {
    flex-direction: column;
}

.p-15 {
    padding: 15px;
}

.f-r {
    float:right
}

.f-l {
    float:left
}

.bg-light {
    background-color: #F2F0E9 !important;
}

.hr-1 {
    border: 1px solid var(--primary);
    opacity: unset;
}


.w-80 {
    width: 800px !important;
}


.focus-img {
    width: 40%;
    max-width: 250px;
    max-height: 390px;
    object-fit: cover;
    margin-right: 9px;
}


.border-r {
    border-radius: 15px;
}


.profile {
    display: flex;
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 15px;
    height: fit-content;
    width: 100%;
    line-height: 1.2rem;

}

.profile div {
    align-self: flex-start;
    width: 28%;
    text-align: right;
    padding-right: 15px;
}

h2 {
    margin: unset;
    text-align: left;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bolder;
    font-size: large;
    color: var(--primary);
    font-style: italic;
    line-height: 1.5rem;
    border-bottom: 1px solid var(--muted);
}

a {

    color: var(--muted);
    text-decoration: none;
    float: right;
    font-family: Helvetica;
    font-style: normal
}

a:hover {

    color: var(--primary);
    text-decoration: none;
    float: right;
    font-family: Helvetica;
}


.button a {

    color: var(--main);
    background-color: var(--primary);
    font-family: Helvetica;
    font-style: bold;
    text-align: center;
    position: fixed;
    right: 100px;
    bottom: 50px;
    padding: 10px 40px;
}

.button a:hover {

    color: var(--grey);
    background-color: var(--muted);
}



h3 {
    margin: unset;
    margin-right: -15px;
    text-align: right;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bolder;
    font-size: x-large;
    color: var(--muted);
    font-style: italic;
}

.playing::before {
    content: "current read // ";
    font-weight: lighter;
}

.playing {
    margin: 0 10px -6px 0;
    text-align: right;
    font-family: 'Times New Roman', Times, serif;
    font-weight: ;
    font-size: medium;
    color: var(--primary);
    letter-spacing: 0.1em;
    font-style: italic;
    font-weight: bold;
    background-color: var(--main);
    padding-top: 2px;
}

.gallery {
    display: flex;
    column-gap: 8px;
    flex-wrap: nowrap;
    justify-content: end;
    text-align: right;
}

.gallery img {
    border-bottom: 3px solid var(--primary);
    max-width:100px
}

.cap {
    font-size: smaller;
    letter-spacing: 2px;
    margin: unset;
    padding: 0 6px 5px 0;
}

.games {
    margin-top: 10px;
    display: flex;
    column-gap: 4px;
    row-gap: 4px;
    flex-wrap: wrap;
    justify-content: end;
    text-align: right;
}

.games div {
    padding: 2px;
    border: 1px solid var(--muted);
}

/* Badges */

.badge {
    width: 3rem;
    padding: 2px 5px;
    display: block;
    font-size:smaller;
    text-align: center;
    border-radius: 10px;
    margin-right: 5px;
}

/* Switch */
.sw {
    color: #fff !important;
    background-color: #d65858 !important;
}

/* Steam */
.spc {
    color: #ffffff !important;
    background-color: #9097bd !important;
}

/* PC */
.pc {
    color: #6e6969 !important;
    background-color: #e2d8d8 !important;
}

/* DS */
.ds {
    color: #483838 !important;
    background-color: #ffd7d7 !important;
}

/* Android */
.handy {
    color: #f8fff9 !important;
    background-color: #567f59 !important;
}

/* Status */
.perf {
    color: #d98004 !important;
    background-color: #ffffff !important;
}

.perf::before, .perf::after {
    content: "★";
}

.fin {
    color: #817c6a !important;
    background-color: #d8e994 !important;
}

.read {
    color: #fff3f3 !important;
    background-color: #92a0c5 !important;
}

.hold {
    color: #fff !important;
    background-color: #daab4e !important;
}

.back {
    color: #fff !important;
    background-color: #5e5353 !important;
}

.drop {
    color: #b6b6b6 !important;
    background-color: #600e0e !important;
}

/* table */

th {
    color: var(--primary);
    border-bottom: 1px solid var(--muted);
    font-family: 'Times New Roman', Times, serif;
    font-size: larger;
    font-style: italic;
}

td {
    vertical-align: top;
    border-bottom: 1px dotted var(--primary);
}

.dataview th {
    cursor: pointer;
 }
 .dataview th.no-sort {
    font-style: unset;
    pointer-events: none;
 }
 .dataview th::after, 
 .dataview th::before {
    font-style: unset;
  transition: color 0.2s ease-in-out;
  font-size: 1.2em;
  color: transparent;
 }
 .dataview th::after {
    font-style: unset;
    margin-left: 3px;
    content: '\025B8';
 }
 .dataview th:hover::after {
    font-style: unset;
    color: inherit;
 }
 .dataview th.dir-d::after {
    font-style: unset;
    color: inherit;
    content: '\025BE';
 }
 .dataview th.dir-u::after {
    font-style: unset;
    color: inherit;
    content: '\025B4';
 }