/* MAIN CSS */

@import url('variables.css');

@font-face {
    font-family: 'Interlope';
    src: url(/assets/fonts/Interlope-Regular.woff) format(woff);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}i

html {
  scroll-behavior: smooth;
}

::selection {
    background: var(--accent);
    color: var(--text)
}

/* BASEBOX */
.basebox {
    width: 50%;
    min-height: calc(100vh - 250px);

    margin: 0;
    padding: 0.5rem 1rem 1rem 1rem;

    
    font-family: Georgia, serif;
    color: var(--text);

    background-color: var(--basebox);
}

/* NAV */
#nav {
    height: 250px;
    width: 50%;
    padding-bottom: 0.5rem;
    padding-right: 1rem;

    align-content: flex-end;

    text-align: right;
    background-image: url(/assets/backgrounds/nav.png);
    background-size:cover;
    background-position: center;
}

#nav a {
    font-family: serif;
    font-size: 1rem;
    text-decoration: underline 1px dotted;
    letter-spacing: 1px;

    color: var(--accent);
    background: var(--text);
}

    
#nav a:hover {
    font-style: italic;

    color: var(--text);
    background: var(--accent);
}

#directory a {
    padding: 0.125rem;
    font-size: 1rem;
    text-decoration: underline 1px dotted;
    letter-spacing: 1px;

    color: var(--text);
    background: var(--accent);
    border: 1px dotted var(--text);
}

#directory a:hover {
    font-style: italic;

    color: var(--accent);
    background: var(--text);
}

/* SECTION */
section {
    margin: 1.5rem 0;
}

/* ABSOLUTE LEFT AND ABSOLUTE RIGHT SECTION */
.left-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 2;
    margin: 1rem 0 0 0;
}

.date-right {
    margin: 0;
    font-size: 1rem;
}

.h2-left, .ud-right {
    margin-top: 0;
}

.date-right, .ud-right {
    font-family: serif;
    font-weight: bold;
    text-align: right;
}

.ud-right {
    font-size: 1.25rem;
}

.img-right {
    text-align: right;
    width: 40%;
    height: 40%;
}

/* CENTERED SECTION */
.center {
    text-align: center;
}

.img-center {
    display: block;
    width: 300px;
    margin: auto auto 0.5rem auto;
    border: 1px dotted var(--border);
    object-fit: contain;
}

.center p {
    margin: 0.25rem;
}

.last-a {
    display: inline-block;
    margin: 0 0 0.5rem 0;
}

/* TWO COLUMNS */
.two-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.column {
    flex-direction: column;
}

/* BORDER BOX */
.borderbox {
    padding: 0 0.5rem;
    border: 1px solid var(--text);
}

/* IMG SCROLL */
.img-scroll {
    min-width: auto;
    height: 25vh;
    overflow-x: scroll;
    white-space: nowrap;
    scrollbar-width: none;
}

.img-scroll img {
    height: 90%;
    padding: 3px;
    margin: 2px;
    border: 1px dotted var(--text);
    object-fit: contain;
}

/* FOOTER */
footer {
    margin-top: 5rem;
    text-align: right;
}

footer a, footer p {
    margin: 0.5rem 0;
    font-family: serif;
    font-size: 1rem;
    line-height: 1;
}

/* BASIC TEXT STYLES */
p, a, span {
    margin: 0.5rem 0 1rem 0;
    line-height: 1.75;
}

a {
    text-decoration: none;
    color: var(--link)
}

a:hover {
    text-decoration: underline 1px dotted;
}

.sub {
    margin: 0.25rem 0;
    font-size: 0.80rem;
}

.uppercase {
    text-transform: uppercase;
}

.article {
    margin: 0;
    font-family: Georgia, serif;
    text-transform: capitalize;
}

.shrine {
    margin: 0;
    font-size: 1.75rem;
    font-family: serif;
    font-weight: bold;
    font-style: italic;
    text-transform: lowercase;
    letter-spacing: 1px;
}

ul.basic, ul.no-symbol, ol {
    margin: 0 0 0.5rem 1.5rem;
}

ul.basic li, ul.no-symbol li {
    line-height: 1.75;
    margin-bottom: 0;
}

ul.basic {
    list-style-type: disc;
}

ul.basic ul.basic {
    list-style-type: circle;
}

ul.no-symbol {
    margin: 0 0 0.5rem 0;
    list-style: none;
}

ul.no-symbol li::marker {
    content: none;
}

dt { 
    font-size: 1rem;
    font-style: italic;
    letter-spacing: 1px;
	background: linear-gradient(to right, var(--accent), var(--basebox));
	padding: 0.25rem 0.25rem;
	color: var(--text);
}

dd {
    margin: 0 0 1.5rem 1.5rem;
    line-height: 1.75;
}

textarea {
    display: block;
    width: 30%;
    margin: 1rem auto;
}

/* DETAILS */
details.basic > summary {
    margin: 0.25rem 0;
    font-family: Georgia, serif;
    text-transform: lowercase;
    line-height: 1.75;
    cursor: pointer;
}

details.basic > summary:hover {
    text-decoration: underline 1px dotted;
}

details.basic > p {
    margin: 0.5rem 0;
    line-height: 1.75;
}

details.cw {
    margin: 0;
    font-size: 0.85rem;
}

details.cw > summary {
    font-family: Georgia, serif;
    text-transform: lowercase;
    line-height: 1.75;
    color: red;
    cursor: pointer;
}

details.cw > summary:hover {
    text-decoration: underline 1px dotted;
}

details.cw > p {
    line-height: 1.75;
}

/* HEADINGS */
h1, h2, h3, h4 {
    margin: 1rem 0;
    letter-spacing: 2px;
    text-transform: lowercase;
}

h2, h3, h4 {
    font-family: serif;
    font-style: italic;
    font-weight: 600;
}

h1 {
    padding: 0.5rem;
    font-family: 'Interlope', serif;
    font-size: 2.5rem;
    text-align: right;
    background: linear-gradient(to left, var(--accent), var(--basebox));
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.25rem;
}


/* TABLE */
table, th, td {
    border: 1px dotted var(--text);
    border-collapse: collapse;
}

table {
    margin: auto 1rem;
    box-sizing: border-box;
    table-layout: fixed;
}

table p {
    margin: 0.25rem 0;
    line-height: 1.5;
}

table img {
    margin: 0.25rem 0;
    vertical-align: middle;
    transform: scale(1)
}

table img:hover {
    transition: transform 0.5 ease;
    transform: scale(1.1)
}

td.description {
    width: 100%;
}

td, th {
    padding: 0 0.25rem;
}

/* IMG */
img {
    pointer-events: auto;
}

.site-button {
    margin: 0.5rem auto 0 auto;
}

/* OTHER ELEMENTS */
hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 2px dotted var(--text);
}

hr.trapezoid {
    border: none;
    border-top: 20px ridge var(--basebox);
    border-right: 20px solid transparent;
    width: 50%;
}


/* MOBILE */
@media screen and (max-width: 1200px){
    .basebox {
        width: 70%;
    }

        #nav {
        width: 70%;
    }
}

@media screen and (max-width: 800px){
    .basebox {
        width: 100%;
        height: fit-content;
        margin: 0 auto; 
    }

    #nav {
        width: 100%;
        margin: 0 auto;        
    }
}