/*
Theme Name: DOB's Theme for dereksstudio.net from 2026
Description: A Theme that uses CSS Grid, and facilitates posts for blogging
Author: Derek O'Brien

*/
/* Telex */
@import url("https://fonts.googleapis.com/css2?family=Telex&display=swap");
/* Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* Neuton */
@import url("https://fonts.googleapis.com/css2?family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&display=swap");
.neuton-extralight {
  font-family: "Neuton", serif;
  font-weight: 200;
  font-style: normal;
}

.neuton-light {
  font-family: "Neuton", serif;
  font-weight: 300;
  font-style: normal;
}

.neuton-regular {
  font-family: "Neuton", serif;
  font-weight: 400;
  font-style: normal;
}

.neuton-bold {
  font-family: "Neuton", serif;
  font-weight: 700;
  font-style: normal;
}

.neuton-extrabold {
  font-family: "Neuton", serif;
  font-weight: 800;
  font-style: normal;
}

.neuton-regular-italic {
  font-family: "Neuton", serif;
  font-weight: 400;
  font-style: italic;
}

/* Layout */
/* Header */
/* Contact Form */
/* Posts */
/* Footer */
/* Widget */
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: rgb(32, 32, 32);
}

.container {
  max-width: 90rem;
  margin: 0 auto;
}

h1 {
  font-family: "Neuton", serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: rgb(0, 90, 180);
}

h2 {
  font-family: "Neuton", serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: rgb(48, 48, 49);
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.25rem;
  color: rgb(0, 0, 0);
  margin-bottom: 0.75rem;
}

p {
  font-size: 1rem;
  font-weight: 400;
  color: rgb(0, 0, 0);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

a {
  font-size: inherit;
  color: inherit;
  font-family: inherit;
  text-decoration: none;
}

ul, ol {
  list-style-position: inside;
  margin-bottom: 0.75rem;
}

.google-ad {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-top: rgb(166, 166, 166) 1px solid;
  border-bottom: rgb(166, 166, 166) 1px solid;
}
.google-ad .ad-hdg {
  font-size: 0.75rem;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  color: rgb(153, 153, 153);
  text-align: center;
}

/* || Front page */
/* Section 1 - Banner Image
   Section 2 - Intro
   Section 3 - Gallery
   Section 4 - Recent blog posts */
.frontpage-section1 {
  background-color: rgb(37, 34, 34);
  height: 90vh;
  background-attachment: fixed;
  display: flex;
  align-items: end;
  background-size: cover;
}

.frontpage-section2 {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2rem;
  margin: 0 auto;
  width: 100%;
}
.frontpage-section2 .container {
  max-width: 70rem;
}
.frontpage-section2 .container h1 {
  color: rgb(241, 204, 36);
  margin-bottom: 1rem;
}
.frontpage-section2 .container p {
  color: rgb(248, 246, 235);
}

.frontpage-section3 {
  background-color: rgb(228, 229, 233);
  padding: 2rem 0.5rem;
}
.frontpage-section3 .container h1 {
  margin: 0.75rem;
}

.frontpage-section4 {
  background-color: rgb(240, 242, 246);
  padding: 1rem;
}
.frontpage-section4 .container h1 {
  margin: 0.75rem;
}

/* || Heading */
.heading {
  width: 100%;
  background-color: rgb(222, 249, 248);
  border-top: 1px solid rgb(0, 90, 180);
  border-bottom: 1px solid rgb(0, 90, 180);
  padding: 1rem 0;
}
.heading .container {
  text-align: center;
}
.heading .container h1 {
  color: rgb(0, 90, 180);
}

/* || Layouts with a main section and sidebar */
.main-and-sidebar {
  padding: 2rem 1rem;
}
.main-and-sidebar .container {
  display: grid;
}
.main-and-sidebar .container .main {
  margin-bottom: 0;
}

.wrapper-bg1 {
  background: rgb(255, 255, 255);
}

.wrapper-bg2 {
  background-color: rgb(245, 241, 237);
}

/* || Layouts with no sidebar */
.main-only .container .main .current-page {
  padding: 1rem 1rem;
}

/* Other screen widths */
@media screen and (min-width: 60rem) {
  .main-and-sidebar .container {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 22rem;
  }
  .main-and-sidebar .container .main {
    margin-bottom: 0;
  }
  .main-and-sidebar .container .main-sidebar-border {
    border-right: 1px solid rgb(224, 224, 224);
    padding: 0 1rem 0 1rem;
  }
  .main-only .container .main .current-page {
    padding: 1rem 1rem;
  }
}
header {
  background-color: rgb(240, 250, 255);
  width: 100%;
  position: relative;
}
header .container {
  align-items: center;
  padding: 0.5rem 1rem;
  display: flex;
}
header .container .logo {
  flex-grow: 1;
}
header .container .hamburger {
  fill: rgb(20, 20, 20);
  cursor: pointer;
}
header .container .hamburger:hover {
  fill: rgb(72, 190, 241);
}

/* Nav Menu */
.nav-menu {
  display: block;
  background-color: rgb(0, 8, 8);
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  z-index: 10;
}
.nav-menu #nav-menu-row1 {
  display: flex;
  flex-direction: row-reverse;
}
.nav-menu #nav-menu-row1 .cancel-icon {
  cursor: pointer;
  fill: rgb(255, 255, 255);
}
.nav-menu #nav-menu-row1 .cancel-icon:hover {
  fill: rgb(241, 204, 36);
}
.nav-menu #nav-menu-row2 {
  display: flex;
  justify-content: center;
}
.nav-menu #nav-menu-row3 {
  display: flex;
  justify-content: center;
}
.nav-menu #nav-menu-row3 .social-icons a svg {
  fill: rgb(231, 231, 231);
}
.nav-menu #nav-menu-row3 .social-icons a svg:hover {
  fill: rgb(241, 204, 36);
}
.nav-menu #nav-menu-row4 {
  display: flex;
  justify-content: center;
}
.nav-menu #nav-menu-row4 .search-box {
  width: 100%;
  margin: 1rem auto;
}
.nav-menu #nav-menu-row4 .search-box .searchbar {
  background-color: rgb(233, 226, 226);
  display: flex;
  height: 2rem;
  width: 80%;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgb(255, 255, 255);
  margin: 0 auto;
}
.nav-menu #nav-menu-row4 .search-box .searchbar .icon-in-searchbar {
  fill: rgb(41, 41, 41);
  cursor: pointer;
  height: 100%;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-menu #nav-menu-row4 .search-box .searchbar .search-input {
  position: relative;
  height: 100%;
  width: calc(100% - 2rem);
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-menu #nav-menu-row4 .search-box .searchbar .search-input input {
  background-color: rgb(233, 226, 226);
  width: 100%;
  height: 100%;
  border: none;
  font-family: "Telex", Arial, Helvetica, sans-serif;
}
.nav-menu ul {
  list-style: none;
  line-height: 2.5;
  margin: 1rem auto;
}
.nav-menu ul li {
  text-align: center;
}
.nav-menu ul li a {
  color: rgb(255, 255, 255);
}
.nav-menu ul li a:hover {
  color: rgb(241, 204, 36);
}

.nav-hide {
  left: -100%;
  transition: left 1s;
}

.nav-show {
  left: 0;
  transition: left 1s;
}

@media screen and (min-width: 36rem) {
  .nav-menu {
    width: 50%;
  }
  .nav-hide {
    left: -50%;
  }
}
@media screen and (min-width: 48rem) {
  .nav-menu {
    width: 33.3%;
  }
  .nav-hide {
    left: -33.3%;
  }
}
@media screen and (min-width: 64rem) {
  .nav-menu {
    width: 25%;
  }
  .nav-hide {
    left: -25%;
  }
}
#contact {
  padding: 1rem;
  background-color: rgb(233, 228, 228);
}
#contact h1 {
  margin: 0.75rem;
  color: rgb(0, 90, 180);
}

.contact-grid {
  display: block;
  width: 100%;
}

.contact-form-part input {
  font-family: "Poppins";
  width: 100%;
  background: rgb(233, 238, 237);
  box-shadow: none;
  border: 1px solid rgb(0, 0, 0);
  outline: none;
  padding: 0.5rem 0.75rem;
  font-size: 1.125rem;
  color: rgb(69, 71, 73);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}
.contact-form-part textarea {
  font-family: "Poppins", sans-serif;
  max-width: 100%;
  min-width: 100%;
  background: rgb(233, 238, 237);
  box-shadow: none;
  border: 1px solid rgb(0, 0, 0);
  outline: none;
  padding: 0.5rem 0.75rem;
  font-size: 1.125rem;
  min-height: 12rem;
  color: rgb(69, 71, 73);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}
.contact-form-part input[type=submit] {
  color: rgb(230, 230, 230);
  border: 1px solid rgb(0, 0, 0);
  width: 16rem;
  background: rgb(59, 59, 59);
  cursor: pointer;
  margin: 1rem 0;
}
.contact-form-part input[type=submit]:hover {
  background: rgb(230, 230, 230);
  color: rgb(59, 59, 59);
}

.posts-in-front-page-grid,
.posts-in-box-grid {
  display: grid;
  gap: 1.25rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.post-in-front-page,
.post-in-box {
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  width: 100%;
  border-radius: 0.5rem;
}
.post-in-front-page h2,
.post-in-box h2 {
  color: rgb(39, 38, 38);
  padding: 0.5rem 0;
}
.post-in-front-page h2:hover,
.post-in-box h2:hover {
  color: rgb(72, 190, 241);
}

.post-text-container {
  padding: 0.75rem;
}

.post-in-front-page .post-date,
.post-in-box .post-date,
.current-post .post-date {
  font-size: 1rem;
  font-weight: 300;
  color: rgb(160, 160, 160);
}

.post-in-front-page .excerpt,
.post-in-box .excerpt {
  color: rgb(110, 110, 110);
}
.post-in-front-page .post-full a,
.post-in-box .post-full a {
  margin: auto;
  text-decoration: none;
  color: rgb(64, 59, 78);
}
.post-in-front-page .post-full a:hover,
.post-in-box .post-full a:hover {
  color: rgb(72, 190, 241);
}
.post-in-front-page .categories,
.post-in-box .categories {
  display: flex;
  flex-wrap: wrap;
  margin: 0.75rem 0;
  font-family: "Poppins", serif;
}
.post-in-front-page .categories .category,
.post-in-box .categories .category {
  margin: 0.5rem 0;
}
.post-in-front-page .categories .category a,
.post-in-box .categories .category a {
  text-decoration: none;
  white-space: nowrap;
  margin-right: 1rem;
  font-size: 1rem;
  color: rgb(77, 59, 56);
}
.post-in-front-page .categories .category a:hover,
.post-in-box .categories .category a:hover {
  color: rgb(72, 190, 241);
}

.current-post {
  padding: 0;
}
.current-post h1 {
  margin-bottom: 1rem;
}
.current-post .categories {
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}
.current-post .categories .category {
  margin: 0.5rem 0;
}
.current-post .categories .category a {
  text-decoration: none;
  white-space: nowrap;
  margin-right: 1rem;
  font-size: 1rem;
  color: rgb(77, 59, 56);
}
.current-post .categories .category a:hover {
  color: rgb(72, 190, 241);
}

.wp-block-image figcaption {
  font-size: 1rem;
  font-style: italic;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(100, 107, 107);
}

/* Search results */
.search-result {
  border-bottom: 1px solid rgb(224, 224, 224);
  padding: 0.5rem 0;
}
.search-result h2 {
  font-size: 2rem;
  color: rgb(39, 38, 38);
}
.search-result h2:hover {
  color: rrgb(72, 190, 241);
}
.search-result .post-date {
  font-size: 1rem;
  color: rgb(160, 160, 160);
}

.search-result:last-child {
  border-bottom: none;
}

/* Other screen widths */
@media screen and (min-width: 45rem) {
  .posts-in-front-page-grid,
  .posts-in-box-grid {
    display: grid;
    gap: 1.25rem;
    margin: 0;
  }
  .posts-in-front-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 80rem) {
  .posts-in-front-page-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .posts-in-box-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
footer .footer-normal {
  font-size: 1.125rem;
  color: rgb(140, 140, 140);
  margin-bottom: 0.5rem;
}
footer .widget-footer-grid {
  display: block;
}
footer .widget-footer {
  padding: 1rem;
}
footer .footer-highlighted {
  color: rgb(224, 224, 224);
}
footer .footer-highlighted a {
  font-size: inherit;
  text-decoration: none;
  color: rgb(240, 176, 60);
}

@media screen and (min-width: 40rem) {
  footer .widget-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
.sidebar {
  background: rgb(255, 255, 255);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.widget-sidebar {
  margin: 0 0 1.5rem 0;
}
.widget-sidebar h2 {
  color: rgb(0, 0, 0);
  margin-bottom: 0.75rem;
  font-size: 2rem;
}
.widget-sidebar ul {
  list-style: none;
}
.widget-sidebar li {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  color: rgb(0, 0, 0);
}
.widget-sidebar a {
  text-decoration: none;
  font-size: 1.125rem;
  color: rgb(77, 59, 56);
}
.widget-sidebar a:hover {
  color: rgb(10, 163, 197);
}/*# sourceMappingURL=style.css.map */