/* gooseinmyshorts.com — common styles used by every page: fonts, base type, links, header strip, navbar, content column, footer.
   Port of the 2013 look (old/css/common.css + main.css): black on white, links #0060c0 with a translucent underline, orange hover, PT Sans.
   Page-specific rules live next to this file: cards.css, video.css, dark.css, button.css, index.css, project.css, projects.css, travel.css, error.css. */

@font-face{font-family:"PT Sans"; src:local("PT Sans"), url("../fonts/PTS55F_W.woff") format("woff"); font-weight:normal; font-style:normal}
@font-face{font-family:"PT Sans"; src:local("PT Sans Italic"), url("../fonts/PTS56F_W.woff") format("woff"); font-weight:normal; font-style:italic}
@font-face{font-family:"PT Sans"; src:local("PT Sans Bold"), url("../fonts/PTS75F_W.woff") format("woff"); font-weight:bold; font-style:normal}
@font-face{font-family:"PT Sans"; src:local("PT Sans Bold Italic"), url("../fonts/PTS76F_W.woff") format("woff"); font-weight:bold; font-style:italic}

*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0; background:#fff; color:#000; font-family:"PT Sans", Arial, sans-serif; font-size:17px; line-height:1.4; text-align:center}
p{margin:10pt 0 0}
h1, h2, h3{margin:0}
img{border:0; max-width:100%; height:auto}

/* links: solid translucent underline = leaves the page (blog convention) */
a{color:#0060c0; text-decoration:none; border-bottom:1px solid rgba(0,96,192,.27)}
a:visited{color:#6040a0; border-bottom-color:rgba(96,64,160,.27)}
a:hover{color:#ff8f00; border-bottom-color:rgba(255,143,0,.27)}
a:focus-visible, button:focus-visible{outline:2px solid #ff8f00; outline-offset:2px}
a.img{border:0; display:inline-block; line-height:0}
a.large{font-size:40pt; border-bottom-width:2px; line-height:1.15; display:inline-block}
.large{font-size:40pt; line-height:1.15}
.mono{font-family:"PT Mono", Consolas, "Courier New", monospace}
code{font-family:"PT Mono", Consolas, "Courier New", monospace; font-size:.92em; white-space:nowrap; margin:0 2px; padding:0 5px; border:1px solid #ddd; border-radius:3px; background:#f8f8f8}

/* header strip (the old wallpaper) and the section title inside it */
#topheader{width:100%; height:70px; background:#fff url("../images/site/bg.jpg") repeat-x center bottom / 1024px 70px; text-align:left}
#topheader h1{font-size:clamp(32px, 6vw, 52pt); line-height:1.1; text-align:center; color:#062c51; margin:0 16px}

/* navbar: 14pt items, the active one bold in a thin bordered box */
.navbar{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14pt; font-size:14pt; line-height:22px; margin:0; padding:4px 37px 5px; white-space:nowrap}
.navbar-item{color:#0060c0; border-bottom:1px solid rgba(0,96,192,.27)}
.navbar-item.first{margin-right:16px}
.navbar-item.active{font-weight:bold; border:1px solid #ADCBCE; border-radius:2px; padding:2px 4px 4px; margin-top:-2px; background:rgba(255,255,255,.5)}
.navbar-item.active a{color:#111; border:0}
.navbar-item.active a:hover{color:#ff8f00}

/* content column */
.content{max-width:1100px; margin:0 auto; padding:0 37px; text-align:left}
.center-title{text-align:center}

/* footer */
.sign{margin:20pt 10pt 20pt; text-align:right; color:#444}

@media (max-width:560px){
  body{font-size:16px}
  .navbar{padding:6px 16px 5px; gap:2px 12px; font-size:16px}
  .navbar-item.first{margin-right:4px}
  .content{padding:0 16px}
  a.large, .large{font-size:30px}
}