/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }

/* GWIP Start */
:root {
  --darkgrey: #222;
  --middlegrey: #999;
  --yellow: #FFD90C;
}

* { font-family: 'Ruda', sans-serif; box-sizing: border-box; }

body {
    background-color: #222; background: var(--darkgrey) url(https://guyswithiphones.com/style/bg-pattern.png) 0 0 repeat; color: white;
}

a#toplink, .m-next a, .m-back a { color: white; }
.m-up a { color: darkorange; }
a, #bottomnav .m-next a, .m-up a:hover { text-decoration: none; color: var(--yellow); }
a:hover, a#toplink:hover, #bottomnav .m-next a:hover { color: var(--middlegrey); }

header {
    padding: 10px 0 10px 20px; height: 100px;
}
nav.fixed { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 50px; padding: 10px 0; background: var(--darkgrey) url(https://guyswithiphones.com/style/bg-pattern.png) 0 0 repeat; box-shadow: 0 0 3px #000; border-bottom: 1px dashed #555; }

#navlogo { display: inline-block; position: relative; width: 300px; }
nav.fixed #navlogo { display: none; }

#toplink { display: none; }
#bottomnav #toplink { display: block; margin-left: 20px; }
nav.fixed #toplink { display: inline-block; margin: 10px 0 0 20px; }

#logo { width: 277px; height: 45px; }
#counter { position: absolute; top: 37px; left: 180px; text-transform: uppercase; font-size: 10px; }

nav ul { display: flex; gap: 20px; padding-top: 15px; margin-right: 20px; }
nav.fixed ul { padding: 10px 0 0 0; float: right; }
nav ul span { color: var(--middlegrey); }

#bottomnav { padding: 15px 0 15px 0; text-align: right; background: var(--darkgrey) url(https://guyswithiphones.com/style/bg-pattern.png) 0 0 repeat; box-shadow: 0 0 3px #000; border-top: 1px dashed #555; border-bottom: 1px dashed #555; }
#bottomnav nav ul { padding-top: 0; }

section { margin: 0 20px 20px 20px; }
section.main {}

section#page {}
section#page h2, section h2 { margin: 0 0 15px 0; font-size: 1.4rem; margin: 0 0 1rem 0; color: var(--yellow); text-transform: uppercase; }
section#page h3 { font-size: 1em; margin: 0 0 10px 0; }
section#page article h3:before { content: '▪ '; }
section p, section#page p { font-family: "Lucida Grande","Verdana",sans-serif; font-size: 14px; margin: 0 0 30px 0; max-width: 80%; line-height: 1.5; }

article { position: relative; }
article.imglist ul { display: flex; gap: 10px; flex-wrap: wrap; }
article.imglist li { position: relative; display: block; width: 300px; height: 300px; overflow: hidden; background: var(--darkgrey) url(https://guyswithiphones.com/style/pattern.gif) 0 0 repeat; }
article.imglist li a img { position: relative; top: 0; z-index: 100; }
article.imglist li .coms { position: absolute; bottom: 5px; left: 7px; z-index: 200; }
article.imglist li .coms a svg { height: 16px; width: auto; filter: drop-shadow(1px 1px 2px rgb(0,0,0,0.3)); }
article.imglist li .coms a.disqcount { position: relative; top: -4px; margin: 0 0 0 5px; color: rgba(255,255,255,0.7); text-shadow: 1px 1px 2px rgba(0,0,0,0.35); }
article.imglist li .pubs { position: absolute; display: inline-block; bottom: 7px; right: 7px; z-index: 20; text-align: right; font-size: 0.7em; color: var(--middlegrey); }
.coms:hover + a.ims img { animation: move 0.5s ease forwards; }
@keyframes move {0%{top: 0px;} 100%{top: -30px;}}

.next-square { overflow: hidden; background-image: none!important; background-color: transparent!important; }
.next-square a { background: rgba(0,0,0,0.2); color: #444; font-size: 3rem; font-weight: 700; letter-spacing: -2px; text-transform: uppercase; display: block; width: 300px; height: 300px; padding: 220px 0 0 150px; }
.next-square a:hover { color: #666; }

.bigimghead, .publishedat, .bigimgtxt { position: absolute; left: 0; padding: 0.4rem 0.4rem 0.4rem 2rem; background-color: rgba(0,0,0,0.30); }
.bigimghead { bottom: 6.5rem; font-size: 1.4rem; }
.bigimghead a { color: var(--yellow); }
.bigimgtxt { bottom: 4.5rem; font-size: 1rem; }
.publishedat { bottom: 2rem; font-size: 1rem; }
.post-edit-link { margin: 0 0 0 1rem; color: orangered; }

.overlay { width: 100%!important; height: auto!important; }
.bigimage { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 0; }

aside { display: none; }
aside h3 { padding: 0 10px; text-transform: uppercase; }
.cats { margin: 0.5rem 0; }
.cats:nth-of-type(2) { margin: 2rem 0 0 0; }
.cats a {
    display: block;
    margin: 0 0 7px 0;
    padding: 3px 10px;
    font-size: 1em;
    color: #FFF;
    background-color: #282828;
    box-shadow: 1px 1px 2px #181818;
    transition: background-color 0.6s ease-out;
}
.cats a:hover { color: #222; background-color: #FFD800; }
#stickylink { display: block; text-align: right; margin: 1rem 0 0 0; }

.slider { overflow: hidden; }
.swiper { height: 130px; }
.swiper-slide img { width: 99px; height: 99px; border: 1px solid #333; }
.swiper-slide.currentslide img { width: 99px; height: 99px; border: 1px solid var(--yellow); }
.swiper-pagination-bullet { background-color: var(--yellow)!important; }

footer { padding: 20px 20px 50px 20px; color: var(--middlegrey); background-color: rgba(0,0,0,0.30); border-top: 1px dashed #555; border-bottom: 1px dashed #555; }
footer p.footerlinks { display: flex; gap: 0 20px; margin-bottom: 20px; }

/* #disqus_thread a { color: #FFD90C; } */

#upload h2 { font-size: 1.4rem; margin: 1.2rem 0 1rem 0; color: var(--yellow); text-transform: uppercase; }
#upload form {}
#upload input#email { display: block; margin: 0 0 1rem 0; padding: 5px 10px; width: 285px; font-size: 1.2rem; background-color: #333; color: #FFF; border: 2px solid #999; }
#upload input#next { font-size: 1.2rem; background-color: var(--yellow); color: #333; border: none; cursor: pointer; border-radius: 5px; padding: 5px 10px; }

.dropzone { position: relative; background-image: linear-gradient(145deg, #333333 25%, #444444 25%, #444444 50%, #333333 50%, #333333 75%, #444444 75%, #444444 100%); background-size: 69.74px 48.83px; border: 2px dashed #666; }
.dropzone .dz-preview.dz-image-preview { background-color: transparent; }
.dropzone .dz-message .dz-button { font-size: 1.4rem; }
#page-drop .dropzone input { position: absolute; top: 10px; left: 10px; z-index: 100; width: 7rem; font-size: .8rem; background-color: #333; color: #FFF; border: 2px solid #444; }

.completeyear { display: flex; gap: 7px; flex-wrap: wrap; margin: 1rem 0 1rem 0; font-size: 1rem; }
.completeyear a, li.amonth a { display: inline-block; padding: 3px 5px; background-color: #222; color: #999; border-radius: 5px; }
.completeyear a:hover, .completeyear a.ayear, li.amonth a:hover { background-color: var(--yellow); color: #333; }
.bybgr { position: absolute; z-index: 999; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.70); }
.bigyears { margin: 0; position: absolute; z-index: 1000; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; font-weight: 700; letter-spacing: -6px; }
a:hover .bigyears { color: black; }
.topsnumber { bottom: 7px!important; background-color: var(--yellow); color: #333; border-radius: 50%; width: 25px; height: 25px; text-align: center; padding-top: 5px; font-weight: bold; mix-blend-mode: screen; }

.monthlist { margin-bottom: 2rem; }
li.amonth { width: auto!important; height: auto!important; }


@media (max-width: 600px) {
    #counter { width: 77px; height: 10px; overflow: hidden; }
    #bottomnav nav { display: flex; justify-content: space-between; }
    .next-square { display: none!important; }
    .bigimghead, .publishedat, .bigimgtxt { padding: 0.4rem 0.4rem 0.4rem 1rem; }
    .bigimghead { bottom: 3.55rem; font-size: 1rem; }
    .bigimgtxt { bottom: 1.9rem; font-size: 0.7rem; }
    .publishedat { bottom: 0.3rem; font-size: 0.7rem; }
}

@media (min-width: 600px) {
    #navlogo { width: 350px; }
    nav { display: flex; justify-content: space-between; }
    nav.fixed #toplink { display: block; }
    section.main { display: grid; grid-template-columns: 1fr 200px; gap: 20px; }
    aside { display: block; }
}