@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@700');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One');
@import url('https://fonts.googleapis.com/css2?family=VT323');

/*Body*/
a, a:visited {text-decoration: none; color: #000000; border-bottom: 1px dotted #FA6607; background-color: transparent;}
a:hover, a:visited:hover {text-decoration: none; color: #FA6607; border: none;}
body {width: 100%; font: 13px Calibri, sans-serif; color: #000000; text-align: justify; line-height: 18px; justify-content: center; margin: 0 auto; padding: 0; background: linear-gradient(rgba(255,255,255,0), rgba(149,132,109,0.5)) fixed, url(https://cmackinnon.com/img/wbg.png) fixed #e0d4c5; -webkit-text-size-adjust: none;}
blockquote {border-left: none; margin: 5px 12px 8px 12px; padding: 0 10px 0 10px; text-align: justify;}
hr {border: 1px dashed #FA6607; margin: 0; padding: 0px; opacity: 0.4;}
li {list-style-type: none; background-image: url(https://cmackinnon.com/img/gear.gif); background-position: 16px 5px; background-repeat: no-repeat; padding: 2px 0px 0px 32px; margin: 0; line-height: 16px;}
li ul {list-style-type: none; background-position: 16px 5px; background-repeat: no-repeat; background-image: url(https://cmackinnon.com/img/li.gif); padding: 1px 32px 0px 32px; margin: 0; line-height: inherit;}
table, th {font-weight: normal; font-size: 14px;}

/*Formatting*/
.alternating {background: url(https://cmackinnon.com/img/uoe.png); padding: 0 2px 0 6px; line-height: 30px; clear: both;}
.alternates {background: url(https://cmackinnon.com/img/uoa.png); padding: 0 0 0 6px; line-height: 24px; clear: both;}
.arrowdown {color: #000000; display: inline-block; padding: 0 0 4px 0;}
.arrowleft {color: #000000; display: inline-block; padding: 0 0 4px 0; rotate: 45deg;}
.arrowright {color: #000000; display: inline-block; padding: 0 0 4px 0; rotate: -45deg;}
.bg {background-color: rgba(189,159,135, 0.2);}
.box {display: flex;}
.cal {width: 220px; border-collapse: collapse; text-align: center; margin: 0; font-size: 11px; font-family: Inconsolata, sans-serif;}
.cal tr:nth-child(even) {background-color: #e0d4c5; height: 12px;}
.cal tr:nth-child(odd) {background-color: #e6dcd0; height: 12px;}
.content {text-align: justify; margin: 0; padding: 0 40px 0 40px; background: url(https://cmackinnon.com/img/uw.png) top no-repeat #E7E1D5;}
.footer {line-height: 50px; display: block; clear: both; color: #e0d4c5; padding: 0 0 0 20px;}
.iconmenu {width: 18px; padding: 6px 4px 0 4px; vertical-align: middle;}
.icon {width: 16px; padding-right: 6px; vertical-align: middle;}
.leftbar {float: left; display: inline-block; width: 49%; margin: 0 5px 0 0; vertical-align: top; clear: both;}
.menu {width: 41px; height: 40px; font: 11px VT323, monospace; color: #FA6607; word-spacing: -2px; letter-spacing: -0.4px; line-height: 10px; text-transform: uppercase; padding: 5px 0 5px 0; margin: 0 1.4px 20px 4px; text-align: center; float: left; vertical-align: top; background-color: rgba(189,159,135, 0.2); border-radius: 0 0 15px 15px;}
.menu:hover {color: #000000; background-color: rgba(234,107,57, 0.2);}
.rightbar {display: inline-block; width: 49%; margin: 0 0 0 5px; vertical-align: top; clear: both;}
.rows1 {width: 31%; display: inline-block; margin: 0 10px 0 0; vertical-align: top; line-height: inherit;}
.rows2 {width: 31%; display: inline-block; margin: 0 10px 0 10px; vertical-align: top; line-height: inherit;}
.rows3 {width: 31%; display: inline-block; margin: 0 0 0 10px; vertical-align: top; line-height: inherit;}
.section {width: 100%; background-color: rgba(189,159,135, 0.1); border-bottom: 1px dotted #FA6607; margin: 0; padding: 4px 4px 0 4px;}
.taothomet {font: 15px 'Alegreya Sans SC'; width: 106px; float: left; text-align: center; letter-spacing: 0.1px; border-radius: 15px; margin: 1px; height: 20px; padding: 4px 0 4px 0;}
.titlebar {bottom; width: 100%; height: 100px; min-height: 100px; padding: 0; margin: 0; border-bottom: 1px solid #FA6607; border-radius: 15px 15px 0 0; background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(img/s-header.png); position: relative;}
.wrapper {width: 840px; background: #E7E1D5; margin: 100px auto; padding: 0; border-radius: 20px; text-align: left; box-shadow: 3px 3px 6px #AE9A89;}

/*Looks*/
.arrow::before {font-size: 14px; content: "\25B6 "; color: #FA6607; padding: 0 4px 0 4px; line-height: unset;}
.bar::before {content: "\2507"; color: #FA6607;}
.characters {font: 16px Barlow Condensed, sans-serif; font-weight: 500; line-height: 24px;}
.cog {background-image: url(https://cmackinnon.com/img/li.gif); background-position: 4px 5px; background-repeat: no-repeat; padding: 4px 0px 0px 16px; margin: 0;}
.description {font: 14px Barlow Condensed, sans-serif; line-height: inherit;}
.diction {font: 11px Inconsolata, sans-serif; letter-spacing: -0.6px; word-spacing: -0.5px; line-height: inherit;}
.gear {background-image: url(https://cmackinnon.com/img/gear.gif); background-position: 8px 5px; background-repeat: no-repeat; padding: 4px 0px 0px 24px; margin: 0;}
.header {font: 42px Barlow Condensed, Impact, sans-serif; color: #FA6607; padding: 0 0 10px 0; margin: 0;}
.heading {font: 22px Rubik Mono One, sans-serif; color: #000000; padding: 0px 4px 0 0; line-height: 28px;}
.hl {color: #FA6607; line-height: inherit;}
.imgright {float: right; padding: 0;}
.imgright a {border: 0;}
.label {font: 8px 'Press Start 2P', system-ui; color: #FA6607; padding: 0px; line-height: unset; word-spacing: -1.5px;}
.large {font: 40px 'VT323', monospace; color: #FA6607; line-height: inherit;}
.medium {font: 22px 'VT323', monospace; line-height: unset;}
.miscellaneous {font: 12px Inconsolata, sans-serif; line-height: inherit;}
.name {font: 18px Barlow Condensed, sans-serif; line-height: inherit;}
.pill {font: 15px Alegreya Sans SC, sans-serif; color: #FA6607; letter-spacing: 0.8px; word-spacing: 1px; margin: 0; padding: 1px 8px 1px 8px; border-radius: 10px; background-color: rgba(189,159,135, 0.2); vertical-align: middle;}
.preview {width: 220px; height: 90px; border-radius: 25px; margin: 0 auto; padding: 10px 0 0 0; text-align: center; text-shadow: -1px -1px 0 #FFCBA1, 1px -1px 0 #FFCBA1, -1px 1px 0 #FFCBA1, 1px 1px 0 #FFCBA1; font-weight: bold;}
.quote {line-height: inherit;}
.quote::before {content: "\275D"; color: #FA6607; padding: 0 2px 0 2px;}
.quote::after {content: "\275E"; color: #FA6607; padding: 0 2px 0 2px;}
.script {font: 11px Inconsolata, sans-serif; padding: 0; line-height: inherit;}
.short {line-height: 12px; margin: 0;}
.short .script {margin-bottom: 10px;}
.sheet {width: 220px; float: right; font: 10px Inconsolata, sans-serif; line-height: 10px;}
.sheet img {width: 220px; vertical-align: center;}
.sheet a {border: 0;}
.small {font: 12px 'VT323', monospace; line-height: inherit;}
.stats {height: 20px; font: 17px Alegreya Sans SC, sans-serif; color: #FA6607; letter-spacing: 0.2px; text-align: right; margin: 2px 0 6px 0; padding: 2px 10px 2px 10px; border-radius: 15px; background-color: rgba(189,159,135, 0.2); line-height: unset;}
.statsimg {width: 32px; display: inline-block; text-align: center;}
.subheading {font: 22px Barlow Condensed, sans-serif; color: #000000; line-height: 30px;}
.subtitle {font: 17px Barlow Condensed, sans-serif; margin: 0; padding: 0 0 10px 0; display: inline-block; line-height: unset;}
.title {font: 48px Rubik Mono One, sans-serif; color: #FA6607; letter-spacing: 3px; padding: 0; margin: 0; text-shadow: -1px -1px 0 #FFC79B, 1px -1px 0 #FFC79B, -1px 1px 0 #FFC79B, 1px 1px 0 #FFC79B; line-height: unset; position: absolute; bottom: 10px; left: 20px;}

/*Locations*/
.location {width: 119px; float: left; font-size: 25px; font-family: Barlow Condensed, sans-serif; color: #000000; background-color: #e0d4c5; margin: 0; padding: 8px 4px 0 6px; border-right: 1px dotted #FA6607; vertical-align: top; line-height: unset;}
.locations {width: 121px; height: 24px; float: left; display: block; font: 11px Inconsolata, sans-serif; margin: 0 4px 0 1px; line-height: 24px; word-spacing: -2px;}
.map {opacity: 0.8; display: block; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); text-align: center; z-index: 1; margin: 0; padding: 0;}
.map1 {font: 10px Alegreya Sans SC, sans-serif; color: #FFFFFF; letter-spacing: 0.7px; line-height: 7px; text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;}
.map2 {font: 10px Alegreya Sans SC, sans-serif; color: #FA6607; letter-spacing: 0.7px; line-height: 7px; text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;}
.map3 {font: 10px Alegreya Sans SC, sans-serif; color: #BD9F87; letter-spacing: 0.7px; line-height: 7px; text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;}
.map4 {opacity: 0.2; font: 30px Rubik Mono One, sans-serif; color: #FA6607; text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;}
.map5 {opacity: 0.8; font: 20px Rubik Mono One, sans-serif; color: #FFFFFF; text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;}
.marker {width: 26px; height: 24px; float: left; display: inline-block; font: 20px Inconsolata, sans-serif; margin: 0 0 0 4px; text-align: center; line-height: 24px;}

/*Gallery*/
.arrows {font-size: 22px; font-family: Barlow Condensed, sans-serif; width: 100%; text-align: center; border: none;}
.arrows a, .arrows a:visited {text-decoration: none; color: #FA6607; text-align: center; margin: 0; padding: 2px; word-spacing: 5px; border-bottom: 0;}
.arrows a:hover, .arrows a:hover:visited {text-decoration: none; color: #000000; border-bottom: 0;}
.art {display: grid; grid-template-columns: repeat(6,auto); grid-gap: 10px; margin: 0; width: 100%; justify-content: center;}
.art img {width: 80px; height: 100px; cursor: pointer; object-fit: cover;}
.art a, .art a:visited {text-decoration: none; font-size: 22px; font-family: Barlow Condensed, sans-serif; line-height: 0px; color: #FA6607; border: none; border-radius: 10px; padding: 6px; background-color: rgba(189,159,135, 0.2); background-size: 200px;}
.art a:hover, .art a:hover:visited {text-decoration: none; line-height: 0px; color: #000000; border: none; border-radius: 10px; padding: 6px; background-color: #FA6607; background-size: 200px;}

/*Poppers*/
.navmenu {font: 20px Barlow Condensed, sans-serif; line-height: 28px; height: 100%; width: 0; position: fixed; z-index: 2; top: 0; left: 0; background: linear-gradient(rgba(149,132,109,0.1), rgba(224,212,197, 0.1)) fixed, url(https://cmackinnon.com/img/wbg.png) fixed #e0d4c5; overflow-x: hidden; transition: 0.4s; padding: 0; margin: 0; box-shadow: 3px 3px 6px #AE9A89;}
.navmenu .close {color: #FA6607; border: none; position: absolute; top: 5px; right: 10px; font-size: 32px; margin-left: 20px;}
.open {position: fixed; top: 5px; left: 5px; color: #FA6607; font-size: 42px; font-weight: bold; cursor: pointer; padding: 10px 15px; border: none; background: transparent; z-index: 1;}
#main {transition: margin-left .5s; padding: 16px;}
#top {height: 60px; font-size: 60px; font-weight: bold; color: #FA6607; position: fixed; bottom: 25px; right: 25px; z-index: 10; padding: 0; border: 0; justify-content: center; background: transparent; cursor: pointer;}

.lightbox {display: none; position: fixed; z-index: 999; top: 0; bottom: -10px; left: 50%; transform: translateX(-50%); padding: 50px; margin: 0; border: 0; background: rgba(224,212,197,0.98); text-align: center;}
.lightbox:target {display: block; width: 100%; height: 100%;}