/*
Theme Name: Matt Blank 2024
Author: Matt Blank
*/

/***** MAIN *****/
html, body {margin: 0; padding: 0; height: 100%; width: 100%; background: #ECECE7 url('/wp-content/uploads/background-light.png'); color: #222; font-family: "DM Sans", sans-serif; font-size: 20px; font-weight: 300; line-height: 33px}
@font-face {font-family: 'thunder_light'; src: url('fonts/thunder-lightlc-webfont.woff2') format('woff2'), url('fonts/thunder-lightlc-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'thunder_extrabold'; src: url('fonts/thunder-extraboldlc-webfont.woff2') format('woff2'), url('fonts/thunder-extraboldlc-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
a {color: #007BFF; text-decoration: none}
a:hover {text-decoration: underline}
h1, h2, h3, h4 {margin: 0; padding: 0;}
h1 {font-family: 'thunder_extrabold'; font-size: 12vw; line-height: 7vw; text-shadow: 10px 10px 60px rgba(0, 0, 0, 0.02); font-weight: 200}
h2 {font-family: 'thunder_extrabold'; font-size: 70px; text-transform: uppercase; line-height: normal; font-weight: 200}
h3 {font-size: 25px; font-weight: 600}
h4 {font-family: 'thunder_light'; font-size: 40px; text-transform: uppercase; font-weight: 200; color: #FC2A7C; font-style: italic}
.wrapper {width: 100%}
.content {max-width: 900px; padding: 80px 40px; box-sizing: border-box; margin: auto}


/***** HERO *****/
.fullscreen-container {position: relative; width: 100%; height: 100vh; background-image: url('/wp-content/uploads/background-hero.jpg'); background-size: cover;}
.overlay-text {position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: #ffffff; padding: 20px; border-radius: 10px; text-transform: uppercase; font-family: 'thunder_light'; font-size: 4vw; line-height: normal}
.overlay-text p {margin: 0; padding: 0}
.contact {width: 100%; text-align: center}
.contact ul {list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; justify-content: center;}
.contact li {display: table-cell; vertical-align: middle}
.contact li img {height: 48px; width: auto; border-radius: 0}
.tooltip {position: relative; display: inline-block;}
.tooltip .tooltiptext {visibility: hidden; font-size: 12px; color: #fff; background: #000; font-weight: bold; text-align: center; border-radius: 8px; padding: 5px 20px; bottom: 100%; left: 50%; transform: translateX(-50%); position: absolute; z-index: 1; box-sizing: border-box; white-space: nowrap; margin-bottom: 5px}
.tooltip:hover .tooltiptext {visibility: visible;}
.topbar {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; z-index: 1000; border-radius: 200px; transition: background 0.5s ease; -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(0, 0, 0, 0.1); padding-bottom: 0}
.topbar .contact ul {display: flex; justify-content: center; gap: 28px; list-style: none; margin: 0; padding: 0;}
.topbar .contact li {display: inline-block;}


/***** MICROSOFT *****/
.microsoft {background: #111 url('/wp-content/uploads/background-black.png'); color: #f5f5f5}
.microsoft img {transition: transform .25s}
.microsoft img:hover {transform: scale(1.07)}
.info {margin-bottom: 30px}
.info img {float: left; margin-right: 10px}
.info h3 {float: left; margin-top: -3px}
.date {font-size: 18px; clear: both}
.tldr {font-size: 25px; padding: 20px; box-sizing: border-box; background: #222 url('/wp-content/uploads/background-dark.png'); border-radius: 12px; margin-bottom: 40px; line-height: normal; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15); font-weight: 200}
.gallery ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0;}
.gallery img {width: 100%; height: auto; border-radius: 6px}
.lightbox {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 80vw; display: none; z-index: 9999; background-color: rgba(0, 0, 0, 0.85);}
.lightbox-title {color: white; text-align: center; margin-top: 40px; font-size: 15px;}


/***** TIMELINE *****/
.previouswork {text-align: center; margin-bottom: 80px; position: relative; z-index: 888;}
.previousworkcontent {background: #ECECE7 url('/wp-content/uploads/background-light.png'); color: #111; padding: 10px 40px; box-sizing: border-box; margin: auto; text-align: center; border-radius: 12px; font-size: 50px; border: 3px solid #000; display: inline-block; font-size: 22px; font-weight: 400}
.previouswork h2 {font-size: 50px; font-weight: 100; margin-bottom: -5px}
*, *::before, *::after {box-sizing: border-box}
.timeline {position: relative; width: 100%; margin: 0 auto; float: left; padding-top: 80px; padding-bottom: 40px}
.timeline::after { content: ''; position: absolute; width: 3px; background: #111; top: 0; bottom: 0; left: 50%; margin-left: -1px}
.timeline .content {padding: 0 40px; max-width: 1400px}
.container {position: relative; background: inherit; width: 50%; margin-bottom: 80px}
.container.left {left: 0}
.container.right {left: 50%}
.container::after {content: ''; position: absolute; width: 24px; height: 24px; top: 7px; right: -12px; background: #000; z-index: 1; border-radius: 24px; border: 6px solid #ECECE7}
.container.right::after {left: -12px}
.container .date {font-size: 14px; font-weight: bold; color: #676767; width: 100%; margin-bottom: 12px; float: left}
.container.left .date {text-align: right}
.container .content {position: relative; box-sizing: border-box; top: 8px; margin-right: 20px}
.container.right .content {margin-left: 20px; margin-right: 0}
.container .content .logo img {width: auto; height: 28px; margin-bottom: 8px}
.container .content .logo.dennis img {width: auto; height: 42px}
.container .content img {width: 100%; height: auto}
.container .content h3 {margin: 0; padding: 0; margin-bottom: -12px}


/***** FOOTER *****/
.footer {background: #111 url('/wp-content/uploads/background-black.png'); color: #f5f5f5; display: flex; padding-bottom: 60px}
.about {display: flex; align-items: flex-start}
.about img {max-width: 260px; height: auto; border-radius: 20px; margin-right: 30px}
.about h2 {font-size: 50px; font-weight: 400}


/***** iPad *****/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
	   only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
  h1, .microsoft h2 {font-weight: 400}
}



/***** MOBILE *****/
@media (max-width: 767.98px) {
html, body {font-size: 18px; line-height: 28px}	
h3 {font-size: 22px}
.container {padding-left: 0; width: 100%; margin-bottom: 40px;}
.container.right {left: 0%;}
.container.left::after, .container.right::after {left: 14px;}
.timeline {margin-top: 0; padding-top: 24px; padding-bottom: 0;}
.timeline .container .content {margin-right: 0; border-bottom: 1px solid #ccc; padding: 0; padding-bottom: 20px;}
.timeline .container:last-child .content {border-bottom: none; padding-bottom: 0;}
.container.right .content {margin-left: 0;}
.timeline::after, .container::after {display: none;}
.container.left .date {text-align: left;}
.previousworkcontent {padding: 0; border: none; font-size: 20px}
.previouswork {margin-bottom: 20px;}
.content {padding: 24px;}
.gallery ul {grid-template-columns: repeat(1, 1fr);}
.about {display: block; text-align: center;}
.about img {margin-right: 0; margin-bottom: 20px; max-width: 200px}
.aboutcontent {text-align: left;}
.footer {padding-top: 24px; padding-bottom: 90px;}
.fullscreen-container {background-position: 75% 0}
.overlay-text {top: 15%; font-size: 9vw; padding: 0; text-shadow: 0 0 20px rgba(0, 0, 0, 0.2)}
h1 {font-size: 20vw; line-height: 12vw; font-weight: 400; text-shadow: 0 0 20px rgba(0, 0, 0, 0.2);}
.topbar {padding: 5px 10px}
.microsoft h2 {font-weight: 400; font-size: 50px}
.tldr {font-size: 20px}
.info img {height: 20px}
}