/* Note to self: If you can't figure out what's what, open in a browser
and use Inspect */

/* ========== global site settings ========== */
* {
    box-sizing: border-box;
}

:root {
    --contentwidth: 1000px;
    --mainsitefont: "Kalam", sans-serif;
    --titlefont: "Kalam", sans-serif;
    --navbarfont: "Kalam", sans-serif;
    --mainfontcolor: #ffffff;
    --headerimage: url(/img/warmmaggnetheader.png);
    --background1: url(/img/backgrounds/pexels-jplenio-thunder-OG.jpg);
    --background2: #3C4456;
    --boxcolor: #101010;
    --linkcolor1: #ff96d1;
    --linkcolor2: rgb(0, 255, 76);
    --imgsubtitlecolor: rgb(252, 255, 209);
    --blognavboxcolor: #171B23;
    --blognavtextcolor: white;
    --blognavlinkhovercolor: rgb(255, 233, 92);
}

/* ========== layout settings ========== */

html {
    background-image: var(--background1);
    background-position: center;
    background-attachment: fixed;
    margin: 0px;
    padding: 0px;
}

body {
    margin-top: 0;
    margin-inline: 0 auto;
    margin-bottom: 0;
    max-width: 100%;
    overflow-x: hidden;
}

#container {
    margin: 0 auto;
    background-color: var(--background2);
    color: var(--mainfontcolor);
    max-width: var(--contentwidth);
}

.headimg {
    width: var(--contentWidth);
    height: 200px;
    background-image: var(--headerimage);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* ========== body content properties ========== */

main {
    max-width: calc(var(--contentwidth) - 10vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4vh;
    font-family: var(--mainsitefont);
    font-size: 1.2em;

}

article>p {
    margin-top: 2px;
}

.imagecontainer {
    color: var(--imgsubtitlecolor);
    text-align: center;
}

.imagecontainer img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 65%;
}

.titles {
    font-size: 1.5em;
    font-family: var(--titlefont);
    margin-bottom: 0;
}

p {
    overflow-wrap: anywhere;
}

ul {
    margin-top: 0;
    margin-bottom: 2vh;
    margin-right: 1vw;
    list-style: square;
}

/* ========== navigation bar properties ========== */
nav {
    width: 100%;
    background-color: var(--boxcolor);
}

nav>ul {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
}

.headlinks {
    color: white;
    font-size: 1.2em;
    font-family: var(--navbarfont);
    margin-top: 4px;
    margin-bottom: 10px;
    margin-left: 15px;
    padding: 4px;
    word-spacing: -4px;
}

.headlinks:link {
    color: white;
    text-decoration: none;
}

.headlinks:visited {
    color: white;
    text-decoration: none;
}

.headlinks:hover {
    animation-name: navlinkblink;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* ========== blog navigation properties ========== */
.blognav {
    background-color: var(--blognavboxcolor);
    
}

.blognavlinks {
    color: var(--blognavtextcolor);
    font-size: 1.2em;
    font-family: var(--navbarfont);
    margin-top: 4px;
    margin-bottom: 10px;
    margin-left: 15px;
    padding: 4px;
    word-spacing: -4px;
}

.blognavlinks:link {
    color: var(--blognavtextcolor);
    text-decoration: none;
}

.blognavlinks:visited {
    color: var(--blognavtextcolor);
    text-decoration: none;
}

.blognavlinks:hover {
    color: var(--blognavlinkhovercolor);
}

.blogdate {
    font-size: 1.5em;
    font-family: var(--navbarfont);
    text-align: center;
    margin-top: 0px;
}

/* ========== blog archive properties ========== */

.archivebanner {
    width: 100%;
}

/* ========== common link properties ========== */
a {
    font-family: var(--mainsitefont);
}
a:link {
    color: var(--linkcolor1);
    text-decoration: none;
}

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

a:hover {
    text-decoration: underline;
}

/* ========== footer properties ========== */

footer {
    background-color: var(--boxcolor);
    width: 100%;
    height: auto;
    padding: 10px;
    text-align: center;
    font-family: var(--navbarfont);
    word-spacing: -4px;
}

#gobackuplink {
    font-size: 1.2em;
}

#gobackuplink:hover {
    animation-name: linkbreathing;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* ========== project list properties ========== */
#projecttitle {
    margin-bottom: 0;
    word-spacing: -5px;
}

#projectsubtitle {
    margin-top: 0;
    font-style: oblique;
}

.projectlistitem {
    margin-bottom: 10px;
}

.projectlistitem>p {
    margin: 0;
}

.projectlistlinks {
    font-style: italic;
}

.projectlistlinks>a:link {
    color: var(--linkcolor2);
}

.projectlistlinks>a:visited {
    color: var(--linkcolor2);
}

/* ========== individual element properties ========== */

.centered {
    text-align: center;

}

.boxglowingborder {
    padding-top: 1vh;
    padding-bottom: 1vh;
    box-shadow: 0 0 10px 5px goldenrod;
}

.smalltext {
    font-size: 0.7em;
}

/* ========== animations ========== */

@keyframes navlinkblink {
    0% {
        color: yellow;
        border-style: solid;
        border-width: 1px;
        border-color: white;
    }

    50% {
        color: yellowgreen;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0);
    }

    100% {
        color: yellow;
        border-style: solid;
        border-width: 1px;
        border-color: white;
    }
}

@keyframes linkbreathing {
    0% {
        color: red;
        text-shadow: 0 1px 1px white;
    }

    50% {
        color: black;
        text-shadow: 0 1px 1px white;
    }

    100% {
        color: red;
        text-shadow: 0 1px 1px white;
    }
}

/* ========== small device properties ========== */

@media screen and (max-width: 800px) {
    :root {
        --contentWidth: 90vw;
    }

    main {
        font-size: 1em;
        padding-left: 10vw;
        padding-right: 10vw;
    }

    #projectlistcontainer {
        padding-left: 5px;
        padding-right: 5px;
    }

    .projectlistitem {
        list-style: none;
    }
}