/* Theme Name: Plitka. Tiles. Kündölük 3.1 (2012). */
body { margin:0; background:#1e1e1e; color:#fff; font:300 15px/1.6 "Open Sans", "Segoe UI", sans-serif; }
a { color:#5ad1d1; text-decoration:none; } a:hover { color:#fff; }
#head { padding:30px 40px 10px; }
#head h1 { margin:0; font-weight:300; font-size:46px; letter-spacing:-1px; text-transform:lowercase; }
#head h1 a { color:#fff; }
#head .tag { color:#aaa; }
#nav { padding:0 40px 20px; font-size:13px; text-transform:lowercase; }
#nav a { color:#aaa; margin-right:22px; font-size:20px; } #nav a.current, #nav a:hover { color:#fff; }
#main { padding:0 40px 30px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows:150px; gap:8px; }
.tile { position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; color:#fff; overflow:hidden; background-size:cover; background-position:center; }
.tile:hover { outline:3px solid #fff; color:#fff; }
.tile b { font-weight:600; font-size:15px; line-height:1.25; position:relative; }
.tile small { font-size:11px; opacity:.85; position:relative; text-transform:lowercase; }
.tile.wide { grid-column:span 2; } .tile.tall { grid-row:span 2; }
.tile.photo-tile:before { content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(0,0,0,.65)); }
.c0 { background-color:#00a3a3; } .c1 { background-color:#e3a21a; } .c2 { background-color:#d0393e; } .c3 { background-color:#5a3c99; } .c4 { background-color:#2d89ef; } .c5 { background-color:#00a300; }
.single { max-width:720px; background:#fff; color:#222; padding:30px 40px; }
.single h2 { font-weight:300; font-size:34px; line-height:1.2; margin:0 0 6px; color:#111; }
.single .date { color:#888; font-size:13px; text-transform:lowercase; }
.single a { color:#00a3a3; }
.photo img { max-width:100%; height:auto; display:block; } .photo span { color:#888; font-size:12px; }
.comments { margin-top:24px; border-top:4px solid #00a3a3; padding-top:10px; }
.comments .c { margin:0 0 12px; } .comments .c b { font-weight:600; }
.navigation { grid-column:1/-1; display:flex; justify-content:space-between; padding:12px 0; text-transform:lowercase; }
.pagebox { max-width:720px; background:#2a2a2a; padding:24px 30px; }
#foot { padding:20px 40px 40px; color:#777; font-size:12px; }
@media (max-width:600px) { #head, #nav, #main, #foot { padding-left:14px; padding-right:14px; } .tile.wide { grid-column:auto; } .single { padding:20px 16px; } }