/*
 * Copyright 2022 Benjamin Paul Suntrup. All rights reserved.
 */

@font-face {
  font-family: "Pacifico";
  src: url("Pacifico/Pacifico-Regular.ttf");
}

:root {
	font-family: arial, sans-serif;
    box-sizing: border-box;
    font-size: 1em;
    --color-green: #5fc45c;
    --color-dark-green: #336600;
    --color-yellow: #e6e796;
    --color-text-bkgd: linear-gradient(to bottom,  #343434 0%, #1b1b1b 100%);
    --color-light-text: white;
    --color-dark-yellow: #c2c456;
    --color-light-yellow: #dfe0b1;
    --color-social-media: #c46a56;
    --max-width: 10in;
    --center-width: min(var(--max-width), calc(100% - 2em ));
}

*,
::before,
::after {
    box-sizing: inherit;
}

body {
    background: linear-gradient(to bottom, var(--color-green) 0%, var(--color-dark-green) 100%);
    background-attachment: fixed;
}

body a:link {
    color: azure;
}

body a:visited {
    color: grey;
}

body a:hover {
    color: azure;
    text-decoration: none;
}

body a:active {
    color: blue;
}

header {
    font-family: "Pacifico";
}

h1 {
    background: var(--color-yellow);
    background-image: radial-gradient(circle, 
                         var(--color-dark-yellow),
                         var(--color-yellow),
                         var(--color-light-yellow));
    text-align: center;
    border-radius: 0.2em;
}

h1 img {
    height: 1.6em;
}

nav {
    --vert-padding: 0.3em;
    border: 2px black;
    font-weight: bolder;
    font-size: 1.2rem;
}

nav ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

nav a {
    display: block;
    padding: var(--vert-padding) 0.6em;
    background-color: var(--color-dark-yellow);
    text-align: center;
}

nav li {
    /*display: inline;*/
    display: block;
}

nav li + li {
    margin-top: .4em;
}

nav a {
    text-decoration: none;
}

nav a:link {
    color: white;
}
nav a:visited {
    color: grey;
}
nav a:hover {
    color: black;
}

nav a:active {
    font-size: 1.2em;
}

.social-media {
    background-color: var(--color-social-media);
}

.social-media:visited {
    color: white;
}


.center {
    margin: 0 auto;
    max-width: var(--center-width);
}

main {
    background: var(--color-text-bkgd);
    margin: 1em 0;
    border-radius: 1em;
    border-color: var(--color-dark-yellow);
    border-width: 2px;
    border-style: solid;
}

/* clear bottom of that figure */
main::after {
    display: block;
    content: " ";
    clear: both;
}


main p {
    border-radius: 1em;
    padding: 0 0.75em;
    margin: 0;
    margin-top: 1em;
    display: block;
    color: var(--color-light-text);
}

figure {
    margin-left: 0;
    margin-right: 0;
    margin-inline-start: 1em;
    margin-inline-end: 1em;
}

.center-img {
    /*float: left;*/
    margin: 0;
    display: block;
    width: 100%;
    border-radius: 1em 1em 0 1em;
}

figcaption {
    font-size: .6rem;
    background-color: var(--color-light-yellow);
    text-align: center;
    margin-left: 50%;
    border-radius: 0 0 0.8em 0.8em;
}

footer {
    font-size: .8rem;
    text-align: center;
    color: white;
}

footer a:visited {
    color: azure;
}

@media(min-width: 5in) {
    nav ul {
        padding-inline-start: 2em;
    }

    nav li {
        display: inline-block;
    }

    nav a {
        border-radius: 0.2em;
    }

    figure {
        float: left;
        margin-inline-start: 0;
        margin-inline-end: 0;
        margin: 1em;
        --figwidth: min(25vw, 4in); /* 4in is half the max width of the thing */
    }

    .center-img {
        width: var(--figwidth);
    }

    figcaption {
        margin-left: calc(var(--figwidth) / 2);
        width: calc(var(--figwidth) / 2);
    }
}