/* vars */

:root {
    --bg1: #000000;
    --bg2: #1A1A1A;
    --ebbg: #101010;
    --ebwhite: #F0F0F0;
    --eblightgrey: #98A080;
    --ebgrey: #889090;
    --ebpurple: #7038D0;
    --cpurple: #8f63db;
    /* better contrast than ebpurple */
    --cbg: #2C2C2C;
    /* for alternating rows */

}

@font-face {
    font-family: "Motherish";
    src: url('Motherish-Medium.otf') format('opentype');
}

html,
body {
    color-scheme: dark;
    color: white;
    margin: 0;
    font-family: Motherish;
}

html {
    height: 100%;
    background: linear-gradient(-45deg, var(--bg1), var(--bg1) 25%, var(--bg2) 25%, var(--bg2) 50%, var(--bg1) 50%, var(--bg1) 75%, var(--bg2) 75%, var(--bg2) 100%, var(--bg1) 100%);
    background-size: 400px 400px;
    animation: blitz-gradient 30s linear reverse infinite;
    background-attachment: fixed;
}

body {
    background: 
        linear-gradient(to top right, rgba(149, 0, 255, 0.113) 0%, rgba(0, 0, 0, 0) 80%),
        linear-gradient(to bottom left, rgba(255, 102, 0, 0.113) 0%, rgba(0, 0, 0, 0) 80%);
    background-attachment: fixed;
    min-height: 100%;
}

@keyframes blitz-gradient { /* 10 points to you if you can guess why it's called that */
    100% {
        background-position: 400px 400px;
    }
}


p {
    line-height: 1.4rem;
}


#main {
    width: 80%;
    margin: auto;
    padding: 10px;
    padding-top: 50px;
}


/* EB borders */

fieldset {
    background-color: var(--ebbg);
    border-radius: 5px;
    border: none;
}

table {
    background-color: var(--ebbg);
    border-radius: 5px;
    /* border: 1px solid white; */
    box-shadow: 0 0 0 3px var(--ebgrey), 0 0 0 6px var(--ebwhite), 0 0 0 9px var(--ebgrey), 0 0 0 10px var(--ebbg);
    margin: 10px auto;
    border-collapse: collapse;
    /* border-spacing: 10px; */
}

th,
td {
    border: 1px solid var(--ebwhite);
    /* border-radius: 5px; */
    /* box-shadow: 0 0 0 3px var(--ebgrey), 0 0 0 6px var(--ebwhite), 0 0 0 9px var(--ebgrey), 0 0 0 10px var(--ebbg); */
    padding: 10px;
}

.alternatingrows:nth-child(even) {
    background-color: var(--cbg);
}

.lilbox,
.codeblock,
.boxbutton,
.imgbox {
    box-shadow: 0 0 0 3px var(--ebgrey), 0 0 0 6px var(--ebwhite), 0 0 0 9px var(--ebgrey), 0 0 0 10px var(--ebbg);
    margin: 10px auto;
}

.bigbox {
    box-shadow: 0 0 0 5px var(--eblightgrey), 0 0 0 10px var(--ebwhite), 0 0 0 15px var(--eblightgrey), 0 0 0 16px var(--ebbg);
    margin: 16px auto;
    margin-left: 6px;
    margin-right: 6px;
}

.codeblock {
    margin-left: 15px;
    margin-right: 15px;
    font-family: "Lucida Console", "Courier New", monospace;
}

.codehighlight {
    color: var(--ebpurple)
}

legend {
    background-color: var(--ebbg);
    font-family: Motherish;
}

#navmaster {
    border-radius: 0;
    border: none;
    margin-bottom: 7px;
    margin-left: -3px;
    position: fixed;
    width: 100%;
    box-shadow: 0 0 0 3px var(--ebgrey), 0 0 0 6px var(--ebwhite), 0 0 0 9px var(--ebgrey), 0 0 0 10px var(--ebbg);
}

a {
    color: var(--cpurple);
}

a:visited {
    color: var(--cpurple);
}

a:hover {
    background-color: var(--ebpurple);
    color: var(--ebwhite);
}


/*Dropdown*/

.dropdownbutton,
.drop2button,
.drop3button {
    border: none;
    color: var(--ebpurple);
    text-decoration: none;
    cursor: pointer;
}

.dropdownbutton:hover,
.drop2button:hover,
.drop3button:hover {
    background-color: var(--ebpurple);
    color: var(--ebwhite);
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdowncontent {
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--ebgrey), 0 0 0 6px var(--ebwhite), 0 0 0 9px var(--ebgrey), 0 0 0 10px var(--ebbg);
    background-color: var(--ebbg);
    border-radius: 5px;
    border: none;
    padding: 10px;
    margin-top: -20px;
    margin-left: -12px;
}

.dropdown:hover .dropdowncontent {
    display: block;
}

.drop2content,
.drop3content {
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 2;
    box-shadow: 0 0 0 3px var(--ebgrey), 0 0 0 6px var(--ebwhite), 0 0 0 9px var(--ebgrey), 0 0 0 10px var(--ebbg);
    background-color: var(--ebbg);
    border-radius: 5px;
    border: none;
    padding: 10px;
    margin-top: -50px;
    margin-left: 140px;
}

.drop2:hover .dropdownbutton,
.drop3:hover .dropdownbutton {
    background-color: var(--ebpurple);
    color: var(--ebwhite);
}

.drop2:hover .drop2content,
.drop3:hover .drop3content {
    display: block;
    background-color: var(--ebbg);
    color: var(--ebwhite);
}

.row {
    display: flex
}

.column {
    flex: 50%;
    padding: 1%;
}

iframe {
    border: 1px solid var(--ebwhite);
}

button {
    background-color: var(--ebbg);
    border-radius: 5px;
    border: none;
    padding: 5px;
    color: var(--ebwhite);
    text-decoration: none;
    padding-top: 10px;
    margin: 10px 12px;
    font-family: Motherish;
    box-shadow: 0 0 0 3px var(--ebgrey), 0 0 0 6px var(--ebwhite), 0 0 0 9px var(--ebgrey), 0 0 0 10px var(--ebbg);
    cursor: pointer;
}

button:hover {
    background-color: var(--ebpurple);
}

input[type="number"] {
    font-family: monospace;
}

input[type="file"] {
    display: none;
}

.fileupload {
    box-shadow: 0 0 0 3px var(--ebgrey), 0 0 0 6px var(--ebwhite), 0 0 0 9px var(--ebgrey), 0 0 0 10px var(--ebbg);
    border-radius: 5px;
    display: inline-block;
    padding: 10px;
    margin: 10px auto;
    cursor: pointer;
}

.fileupload:hover {
    background-color: var(--ebpurple);
}

.boxbutton {
    background-color: var(--ebbg);
    border-radius: 5px;
    border: none;
    padding: 5px;
    color: var(--ebwhite);
    text-decoration: none;
    padding-top: 10px;
    margin: 10px 12px;
}

.boxbutton:visited {
    color: var(--ebwhite)
}

.boxbutton:hover {
    background-color: var(--ebpurple);
}

.imgbox {
    border-radius: 5px;
    border: none;
    padding: 0px;
    overflow: hidden;
}

img {
    vertical-align: top;
}

.icon {
    height: 20px;
    width: 20px;
    margin-top: -3px;
    /* center aligns */
}

.ruletitle {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ruletitletext {
    flex-grow: 0;
}

.ruletitleline {
    flex-grow: 1;
    margin-left: 1%;
    height: 1px;
    background-color: var(--ebgrey);
}

#contentblock {
    display: flex;
    gap: 5%;
    padding: 1%
}

@media(max-width: 991px) {
    #contentblock {
        display: block;
    }
}

#contentmain {
    flex: 75%;
    display: flex;
    flex-direction: column;
    margin: 0%;
}

/* make it 100% of width on mobile devices */
@media(max-width: 991px) {
    #contentmain {
        flex: 100%;
    }
}

#sidebar {
    flex: 15%;
    /* display: flex; */
    /* flex-grow: 0; */
    position: sticky;
    top: 0;
    align-self: flex-start;
}

/* not sticky on mobile devices */
@media(max-width: 991px) {
    #sidebar {
        position: unset;
    }
}

/* make it hidden on mobile devices */
/* @media(max-width: 991px) {
    #sidebar {
        display: none;
    }
} */

.hgrow {
    width: 100%;
    box-sizing: border-box;
}

a.t88x31,
a.t88x31:hover,
a.t88x31:active {
    text-decoration: none;
    background-color: inherit;
}

a.t88x31 img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

.project-entry {
    display: flex;
    gap: 5%;
    padding: 1%
}

@media(max-width: 991px) {
    .project-entry {
        display: block;
    }
}

.project-text {
    flex: 50%
}

.project-image {
    flex: 50%
}

.project-links {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

@media(max-width: 991px) {
    .project-links {
        flex-direction: column;
        width: fit-content;
        text-align: center;
        margin: auto;
    }
}

@media(max-width: 991px) {
    .content-desktop {
        display: none;
    }
}

@media(min-width: 991px) {
    .content-mobile {
        display: none;
    }
}

.text-article {
    padding-left: 15%;
    padding-right: 15%;
    text-wrap: pretty;
}

/* Don't include the article column padding for mobile screens */
@media(max-width: 991px) {
    .text-article {
        padding-left: unset;
        padding-right: unset
    }
}

#expandimg {
    display: none;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-color: rgba(0, 0, 0, 0.7);
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}

.gallery-item {
    /* flex-basis: 26%; */
    margin: 10px;
    position: relative;
    display: flex;
}

.gallery-image {
    width: 100%;
    max-width: 15em;
    margin: auto;
}

.gallery-hover {
    visibility: hidden;
    background-color: var(--ebbg);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    border-radius: 5px;
    border: none;
    width: max-content;
    margin: -5px;
    padding: 10px;
}

.gallery-item:hover .gallery-hover {
    visibility: visible;
}