/* Defaults */
:root {

    /* Variables */
    --bg: #000;
    --bg-transparent: rgba(0,0,0,0.5);
    --bg-transparent-80: rgba(0,0,0,0.8);
    --bg-transparent-20: rgba(0,0,0,0.2);
    --fg: #fff;
    --fg-transparent: rgba(255,255,255,0.5);
    --transparent: rgba(0,0,0,0);
    --accent: #996bd2;

    /* Properties */
    background-color: var(--bg);
    color: var(--fg);
    font-family: "Open Sans", sans-serif;
}
::selection {
    color: var(--bg);
    background: var(--fg);
}

a {
    text-decoration: none;
    color: var(--fg);
}
table {
    display: inline-block;
    text-align: left;
    font-family: "Montserrat", sans-serif;
}
td {
    padding: 0.5em 1em;
    font-size: x-large;
}
td:first-child {
    font-weight: bolder;
}
td:nth-child(2) {
    font-family: "Montserrat Light", sans-serif;
    font-style: italic;
}
table caption {
    font-size: xx-large;
}

progress {
    -webkit-appearance: none;
    appearance: none;
}
progress[value] {
    appearance: none;
    height: 1em;
    border: none;
}
progress::-webkit-progress-bar {
    overflow: hidden;
}

progress::-webkit-progress-value {
    background: linear-gradient(90deg, #57d6f3, #74dcd3);
}

progress::-moz-progress-bar {
    background: linear-gradient(90deg, #57d6f3, #74dcd3);
}
hr {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.25);
}

/* Nav */
nav {
    /*display: inline;*/
    user-select: none;
    background-color: var(--bg);
    padding: 1em;
}
nav #logo {
    font-family: "Montserrat Light", sans-serif;
    font-size: 24pt;
    /*transition: opacity 200ms;*/
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: .25em;
    margin-top: .25em;
}
/*nav #logo:hover {*/
/*    opacity: 50%;*/
/*    cursor: pointer;*/
/*}*/
nav #logo img {
    /*background-color: #00ff00;*/
}
nav #logo span {
    margin-left: .25em;
}
nav #navbar {
    list-style-type: none;
    float: right;
    margin-right: 2em;
    margin-top: 1.5em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
nav #navbar li {
    display: inline;
}
nav #navbar .selected, nav a:hover {
    background-color: var(--fg);
    color: var(--bg);
}
nav #navbar a {
    padding: 0.5em 1em;
    border-radius: 2em;
    display: inline-block;
    transition: all 100ms;
    margin: 0 0.5em;
}
nav #themeToggle {
    display: inline-block;
    background-repeat: no-repeat;
    min-height: 24px;
    min-width: 24px;
    filter: invert();
    border: none;
    background-color: var(--transparent);
    transition: opacity 250ms;
    margin-left: 1em;
    cursor: pointer;
}
nav #themeToggle:hover {
    opacity: 50%;
}

/* Main */
main {
    user-select: none;
    opacity: 0;
    transition: opacity 250ms ease-in;
}
main.loaded {
    opacity: 1;
}
main.unloaded {
    opacity: 0;
}
/* Footer */
footer {
    /*position: absolute;*/
    width: 100%;
    bottom: 0;
    user-select: none;
    padding: 5em 0;
    opacity: 75%;
    transition: all 250ms;
}
footer:hover {
    opacity: 100%;
}
footer #socials {
    list-style-type: none;
    padding: 1em;
    display: inline-block;
}
footer #socials li {
    display: inline-block;
    padding: 1em;
    margin: 0 1em;
    background-color:  var(--transparent);
    border-radius: 4em;
    border: solid var(--fg) 2px;
    transition: all 250ms;
    opacity: 80%;
}
footer #socials li:hover {
    background-color: var(--fg);
    opacity: 100%;
}
footer #socials li:hover .social-icon {
    filter: none;
}
footer .social-icon {
    display: block;
    background-repeat: no-repeat;
    min-height: 32px;
    min-width: 32px;
    filter: invert();
}
footer #copyright {
    display: block;
    font-weight: lighter;
}
footer {
    display: block;
    text-align: center;
}
footer #madeWithLoveOrSomething {
    font-size: 8pt;
    /*font-style: italic;*/
}
#landing {
    padding: 20em;
    text-align: center;
    background-image: url("../assets/gallery/landing.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 80%;
    transition: opacity 250ms;
}
#landing:hover {
    opacity: 100%;
}
p a {
    color: var(--accent);
}

#socials li {
    cursor: pointer;
}
@media only screen and (max-width: 800px) {
    nav {
        /*text-align: center;*/
        /*align-content: center;*/
    }
    nav #navbar {
        display: block;
        float: none;
    }
    nav #navbar a {
        display: block;
        font-size: x-large;
        margin: 0.5em 0;
    }
    nav #navbar li {
        text-align: center;
        align-content: center;
    }
}