/* general layout */
.wrapper {
    width:80%;  
    margin:2em auto;
    display:flex;
    flex-direction: column;
}

nav {
    /*position:absolute; gotta solve the puzzle of right-align again, maybe grid layout?*/ 
	right:0;
	height:3em;
    grid-column: 3;
    column-span:all;
    grid-row: 1;
}

header {
    display:grid;
    grid-template-columns: repeat (3fr,2fr,2fr);
    grid-auto-rows:minmax(1em,auto);
}

main { width: 70%; padding-left:2em; padding-right:1em; padding-bottom:2em; }

/* general text */
body { text-align: left; font-family:Verdana, Geneva, sans-serif; color:#484850;}
a { text-decoration: none; color:#224ab1; border-bottom: 2px solid #224ab1;}
a:hover { color: #c47869; border-bottom-color:#AAAAEE;}
main h1 { font-family:"Lucida Console", Monaco, monospace; color:#B85A47; font-size:2.25em; }
.title { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; color:#484850; font-size:2em; font-weight:bold; }
.title::first-letter { color:#224ab1; font-size:133%;}
footer { font-size:0.8em; width: 65%; }
main h1, main h2 { margin:0.6em 0 0.4em 0;}

main li a {
    border:none;
}

/* navbar styles */

nav ul {
    display:flex;
}

nav li {
    list-style:none;
    margin-left:0.2em;
    background-color:#4f7193;
    padding:0.4em 0.7em 0.4em 0.7em;
}

nav li a {
    color:#ffffff;
    text-decoration:none;
    border:none;
}

nav li a:hover {
    color:#ffffff;
}

nav li:hover { background-color:#465b70; }

/* header format */
.title {
	/*margin-top:4em;*/
	/*margin-bottom:1em;*/
	padding-top:1em;
	padding-left:2em;
	border-left: 0.6em solid #c47869;
	background-color:#cfd3e0;
    grid-column:1;
    grid-row:2;
}

/* Generic UI Styling */
button {
    border:0.2em solid #c47869;
    background-color: #ffffff;
    border-radius: 0.2em;
}

button:hover:enabled {
    background-color:#c47869;
    color:#ffffff;
}

/* Gallery CSS */

#gallery-frame img {
    width:25em;
    height:25em;
    box-shadow: 0 0 1em #c47869;
}

#gallery-frame {
    margin:0 5em;
}

#gallery-content {
    display:flex;
}

.button-stack {
    display:flex;
    flex-direction: column;
    margin-top:10em;
    margin-left:2em;
}

.button-stack button {
    margin:0.7em;
}

#gallery-frame div {
    display:flex;
}

.img-infobox {
    margin-left:3em;
    flex-direction: column;
}

/* not using animations for now, but will leave these in for when I can figure it out */
.fade-in {
    animation-duration: 2s;
    animation-name:fadein;
}

.fade-out {
    animation-duration: 2s;
    animation-name:fadeout;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}