/*
Theme Name: Derek Shidler
Author URI: http://derekshidler.com
Description: Derek Shidler is a clean minimal and responsive WordPress theme for a personal website. Developed using media queries, which makes it mobile and tablet friendly.
Text Domain: derekshidler.com
*/
:root {
	--white: #fff;
    --black: #000;
    --dark-gray: #252c37;
    --gold: #f8c61e;
}
* {
    box-sizing: border-box;
	color: var(--black);
    font-family: Avenir Next;
    text-decoration: none;
    font-weight: 400;
}
html {
    background: #e6f0dc;
}
body {
    margin: 0 auto;
    max-width: 1300px;
    width: 100%;
    padding: 0 2%;
}
header {
	position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: var(--dark-gray);
    z-index: 1;
    animation: slideInFromTop 1s ease-out forwards;
}
@keyframes slideInFromTop {
    from {
    	transform: translateY(-100%);
        /* Start off-screen above */
        opacity: 0;
        /* Optionally start transparent */
	}
    to {
        transform: translateY(0);
        /* End at its natural position */
        opacity: 1;
        /* Optionally end fully opaque */
    }
}
header h1 {
    margin: 0;
    padding-left: 2%;
	font-weight: 300;
    font-family: 'Modernline';
    font-size: 1.6rem;
    color: var(--gold);
}
form {
    float: right;
    position: fixed;
    top: 10px;
    right: 2%;
}
input {
    width: 14rem;
    border-radius: 5px;
    border-style: none;
    padding: 0.5rem;
}
input:focus {
    outline: none;
}
/******* Slideshow *******/
#logo {
    position: absolute;
    font-family: 'Modernline';
    font-size: 10vw;
    text-align: center;
    color: var(--gold);
    top: 30vh;
    left: 0;
    right: 0;
}
.ken-burns-slideshow {
	position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    list-style-type: none;
}
.ken-burns-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.2);
    animation: kenburns 24s linear infinite;
}
.ken-burns-slideshow .slide:nth-child(1) {
    animation-delay: 0s;
}
.ken-burns-slideshow .slide:nth-child(2) {
    animation-delay: 6s;
}
.ken-burns-slideshow .slide:nth-child(3) {
    animation-delay: 12s;
}
.ken-burns-slideshow .slide:nth-child(4) {
    animation-delay: 18s;
}
#slide1 {
    background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url("https://derekshidler.com/wp-content/uploads/2025/08/slide-1.png");
}
#slide2 {
    background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url("https://derekshidler.com/wp-content/uploads/2025/08/slide-2-scaled.jpg");
}
#slide3 {
    background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url("https://derekshidler.com/wp-content/uploads/2025/08/slide-3-scaled.jpg");
}
#slide4 {
    background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url("https://derekshidler.com/wp-content/uploads/2025/08/slide-4-scaled.jpg");
}
@keyframes kenburns {
	10% {
    	opacity: 1;
    }
    25% {
        opacity: 1;
        transform: scale(1);
    }
    40% {
        opacity: 0;
        transform: scale(1);
    }
}
/******* Scroll Wheel *******/
.scroll-downs {
	position: absolute;
	right: 0;
    bottom: 2rem;
    left: 0;
    margin: auto;
    width :34px;
    height: 55px;
}
.mousey {
	width: 3px;
    padding: 10px 15px;
    height: 35px;
    border: 2px solid var(--gold);
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
}
.scroller {
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background: var(--gold);
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15,.41,.69,.94);
    animation-iteration-count: infinite;
}
@keyframes scroll {
    0% {
        opacity: 0;
    }
    10% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(30px);
        opacity: 0;
    }
}
/******* Front Page *******/
main {
	margin-top: 105vh;
    position: relative;
}
.grid-container {
	display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    cursor: pointer;
}
.grid-item {
    text-align: center;
    -webkit-transition: background-color 0.4s ease-out;
    -moz-transition: background-color 0.4s ease-out;
    -o-transition: background-color 0.4s ease-out;
    transition: background-color 0.4s ease-out;
}
.grid-item:hover {
    transform: scale(1.02);
}
.grid-item h1 {
    font-size: 1.8rem!important;;
    padding: 0 0.2rem;
}
.grid-item img {
	max-width: 100%;
    height: auto;
    display: block;
    border-radius: 2rem;
}
article {
    animation: 1s fadeInUp;
}
@keyframes fadeInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}
footer p {
    font-size: 1rem !important;
}
/******* Subpages *******/
.single #wrapper, .error404 #wrapper {
    padding-top: 4rem;
    animation: 1s fadeInUp;
}
#wrapper h1 {
    font-size: 3rem;
    text-align: center;
}
.single h2 {
    font-size: 2.2rem;
    margin: 0 auto;
    font-weight: 500;
}
.single h3 {
  font-size: 1.6rem;
  margin: 0 auto;
  font-weight: 500;
}
.single #date {
    text-align: center;
}
.single p, .single li {
    font-size: 1.4rem;
}
.wp-block-kevinbatdorf-code-block-pro {
    z-index: -1;
}
.wp-block-code code {
    padding: 1rem;
}
code {
    background-color: var(--black);
    border-radius: 0.2rem;
    padding: 0 0.2rem;
    color: lawngreen;
}
.single a {
    color: blue;
}
.wp-block-image img {
    width: 400px;
    height: 400px;
    border-radius: 2rem;
    float: right;
    margin-left: 1rem;
    border: solid;
}
.wp-block-buttons .wp-block-button__link {
    background: var(--dark-gray);
    color: var(--gold);
    font-size: 2rem;
    border-radius: 2rem;
}
.wp-block-buttons .wp-block-button__link:hover {
    color: var(--white);
}
strong {
    font-weight: 600;
}
hr {
    width: 20rem;
}
#next-previous {
    font-size: 1.4rem;
    padding: 4rem 0;
}
#next-previous div:nth-child(even) {
    padding-top: 2rem;
}
footer hr {
 width: 100%;
}
/******* 404 *******/
.error404 p {
    font-size: 3rem;
}
/******* Search *******/
.search #wrapper {
	padding-top: 8rem;
}
@media all and (max-width: 900px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media all and (max-width: 600px) {
    .grid-container {
    	grid-template-columns: repeat(1, 1fr);
    	padding: 0 1rem;
    }
    form input {
        width: 8rem;
    }
    .wp-block-image img {
        display: none;
    }
}