/* External stylesheet for Gabriel Comer's site, CGS2820:11936 */
/* Used by every page: index, resume, portfolio, newsletter, contact */

/* ***** Box sizing ***** */
*, *::before, *::after {box-sizing:border-box}
/* padding and borders are included in an element's width, so sizes stay consistent */

/* ***** Elements ***** */
body {max-width:1000px; margin:auto; font-family:Garamond, Georgia, serif;
      background-image:url('images/background.jpg'); background-repeat:no-repeat;
      background-size:cover; background-attachment:fixed; background-color:#1a2350}
/* center page on screen; one optimized blue background image fills the window
   without repeating, and the solid color shows if the image can't load */

h1 {color:whitesmoke; text-align:center}

h2 {color:gold; border-bottom:2px solid red; padding-bottom:4px}

img {max-width:100%; height:auto}
/* for Responsive Website Design */

hr {width:60%; height:5px; background-color:red; border:none}

header {background-color:#1a2350}

main {color:whitesmoke; background-color:rgba(10, 15, 50, 0.6); padding:10px 25px; font-size:20px}
/* whitesmoke text on a see-through dark blue so it stays readable */

aside {color:gold; font-size:17px; font-weight:bold; text-align:center; padding:10px}

footer {color:gold; background-color:#1a2350; text-align:center; padding:10px; font-size:16px}

/* ***** Hyperlink pseudo-rollover (order matters: link, visited, hover, active) ***** */
a:link {color:pink}
a:visited {color:plum}
a:hover {color:gold; text-decoration:underline}
a:active {color:whitesmoke}

/* ***** Navigation: unselected, hover, selected ***** */
nav {display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:14px 10px;
      background-image:linear-gradient(#2b3a7a, #1a2350);
      border-top:3px solid gold; border-bottom:3px solid gold}
/* links sit in one centered row and wrap onto new lines on small screens */

nav a:link, nav a:visited {color:whitesmoke; text-decoration:none; font-size:19px;
      letter-spacing:1px; text-transform:uppercase; padding:8px 18px;
      border:2px solid rgba(255, 215, 0, 0.5); border-radius:20px;
      background-color:rgba(255, 255, 255, 0.05);
      transition:background-color 0.2s, color 0.2s, transform 0.2s}
/* unselected (normal): rounded outlined buttons */

nav a:hover {color:#1a2350; background-color:pink; border-color:pink;
      text-decoration:none; transform:translateY(-2px)}
/* hover: fills pink and lifts slightly */

nav a.selected, nav a.selected:hover {color:#1a2350; background-color:gold;
      border-color:gold; font-weight:bold; transform:none}
/* selected: the page you are on stays gold */

/* ***** IDs ***** */
#wrapper {border:2px solid gold}

#banner {width:100%; height:250px; object-fit:cover; display:block}

#headshot {float:right; margin:0 0 10px 15px}

#star {display:block; margin:auto; clear:both}

#resume-icon {width:7%; display:block; margin:auto}
#resume-icon:hover {opacity:0.6}

abbr {text-decoration:underline dotted; cursor:help}
/* dotted underline shows there is a tooltip; hover to see the full name */

address {font-style:normal; text-align:center}

/* ***** Classes ***** */
.scaled {display:block; margin:10px auto; border:3px solid gold; border-radius:6px}

.important {font-weight:bold}

.dates {color:gold; font-style:italic}

/* Resume page */
.resume-heading {text-align:center; margin-bottom:20px}
.resume-heading h1 {margin-bottom:5px; font-size:44px}

.resume-columns {display:grid; grid-template-columns:1fr 2fr; gap:30px}
/* two columns: narrow sidebar on the left, main details on the right */

.resume-columns ul {padding-left:22px}
.resume-columns li {margin-bottom:6px}

/* Portfolio page */
.portfolio-intro {text-align:center}

.portfolio-grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:25px; margin:25px 0}
/* desktop: two full columns */

.portfolio-grid figure {position:relative; margin:0; padding:10px; background-color:#1a2350;
      border:3px solid gold; border-radius:6px; text-align:center}
/* relative positioning: the tag inside is placed relative to this box */

.portfolio-grid figure img {display:block; width:100%; height:auto; border-radius:4px}
/* whole image always shows, it only scales */

.portfolio-grid figure:hover {border-color:pink}

.portfolio-grid figcaption {font-size:17px; margin-top:10px}

.tag {position:absolute; top:18px; left:18px; background-color:gold; color:#1a2350;
      font-size:14px; font-weight:bold; padding:3px 10px; border-radius:4px}
/* absolute positioning: label sits on the top-left corner of each image */

#back-to-top {position:fixed; bottom:20px; right:20px; background-color:gold;
      color:#1a2350; font-weight:bold; text-decoration:none; padding:10px 14px;
      border-radius:6px; border:2px solid #1a2350; z-index:10}
#back-to-top:hover {background-color:pink}
/* fixed positioning: button stays in the window corner while scrolling */

/* Stack the resume columns on small screens */
@media (max-width:700px) {
	.resume-columns {grid-template-columns:1fr}
	#headshot {float:none; display:block; margin:auto}
}

/* Phones and small windows: one vertical column */
@media (max-width:600px) {
	.portfolio-grid {grid-template-columns:1fr}
	main {padding:10px 12px}
	nav {gap:8px}
	nav a:link, nav a:visited {font-size:15px; padding:6px 12px}
	#resume-icon {width:15%}
}