@import url('normalize.css');
@import url('navigation.css');

/* CSS Variables */
:root {
  --background: #d8d8d8; /* background color */
  --contentWidth: 1440px; /* main content width */
  --header: 70vh; /* header height */
  --footer: 125px; /* footer height */
  --nav-background: rgb(43, 61, 97); /* navigation background color */
  --nav-posistion: sticky; /* static, sticky */
  --nav-hover-color: rgb(9, 173, 202);
  --nav-link-color: #fff;
  --color-handydude-orange: #f8931f;
  --color-handydude-blue: #2b99e4;
}

/* Site */
.bg-striped { color: black; padding: 1rem; }
.site { display:flex; flex-direction:column; height:100vh; background-color: var(--background); position: relative; }
.site-content { flex:1 0 auto; width:100%; padding:0 1em 1em; max-width: var(--contentWidth); margin: auto; }
.site-content .fullwidth { width: 100vw; margin:1rem 0 1rem calc(-50vw + 50%); }
.site-content .fw-cont { max-width: var(--contentWidth); padding: 0 .5em 1.15em; }
.flex-cont { display: flex; flex: 1 1 auto; justify-content: space-evenly; gap: 1rem; }
.flex-column { flex-direction: column; }

/* Pages */
hr { border: 1px dashed gainsboro; margin: 1rem 0 -.25rem; }
section { margin-block: 1rem; }
ul:not(.menu) { margin-inline-start: 1.5rem; column-count: 2; }
:where(img.captcha, input:not([type="checkbox"])), textarea { width: 100%; border: 1px solid gainsboro; padding: .25rem .75rem; border-radius: 5px; }
input[type="checkbox"] { height: 1rem; width: auto; }
form :where(input[type="text"], input[type="email"], input[type="tel"], textarea) { margin-block-start: .35rem; }
textarea { height: 100px; resize: vertical; min-height: 200px; }
.captcha { border:1px solid gainsboro; padding:.25rem; margin-bottom:.5rem; }
#CaptchaCode { height: 45px; position: relative; top: -4px; }
#submit { background-color: #f8931f; color: whitesmoke; border: 1px solid gainsboro; border-radius: 30px; padding-block: .45rem; width: 200px; }
#submit:hover { cursor: pointer; background-color: #f9e0cd; color: #4a100d; }
a#quote { text-decoration: none; background-color: #f8931f; color: whitesmoke; border: 1px solid gainsboro; padding: .35rem 1rem; border-radius: 33px; font-size: 1.15rem; display: block; width: 100%; text-align: center; }
a#quote:hover { cursor: pointer; background-color: #f9e0cd; color: #4a100d; }

/* Header */
header { min-height: 700px; background-image: linear-gradient(to right,hwb(100 100% 0%) 60%, var(--color-handydude-orange) 40%); display: flex; }
header .house-icon { margin-block-end: 3rem; }
header :where(.title-top, .title-bottom) { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 6rem; letter-spacing: 7px; }
header .title-bottom { margin-block-start: -3rem; color: var(--color-handydude-orange); }
header .sub-title { font-size: 3rem; font-weight: 500; }
header .banner-image { position: relative; margin-block-start: 50px; }
header .banner-accent { width: 100px; height: 100px; border: 10px solid; border-color: transparent transparent var(--color-handydude-orange) var(--color-handydude-orange); position: absolute; top: 500px; left: -30px; }
header .banner-image img { margin-block: 1rem; box-shadow: 9px -3px 20px 1px #00000057; border-radius: 100px 0 100px 0; }

/* Navigation */
#nav-cont{max-width:var(--contentWidth);margin: 0 auto;}

/* Content */
p { font-size: clamp(.92rem, 1.75vw, 1.1rem); margin-block: 1rem; }

/* Checkboxes */
.container{ display:block; position:relative; padding-left:35px; cursor:pointer; user-select:none; }
.container input{ position:absolute; opacity:0; cursor:pointer; height:0; width:0; }
.checkmark{ position:absolute; top:0; left:0; height:25px; width:25px; background-color:#eee; }
.container:hover input~.checkmark{ background-color:#ccc; }
.container input:checked~.checkmark{ background-color:#2196f3; }
.checkmark:after{ content:""; position:absolute; display:none; }
.container input:checked~.checkmark:after{ display:block; }
.container .checkmark:after{ left:8px; top:4px; width:8px; height:15px; border:solid #fff; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* Footer */
footer { background:rgb(74, 89, 116); padding:1rem; margin: 0; }
footer section { min-height: var(--footer); position: relative; color: silver; }
footer section .tag { color: #9d9a9a; right: 1vw; bottom: -1rem; position: absolute; }
footer section .tag a { color: gainsboro; }

/* Helper Classes */
.aligned-center { display: grid; place-items: center; height: 100%; padding-inline: .5rem; }
.hide { display: none; }
.img-responsive { display:block; max-width:100%; height:auto; }
.center { margin-inline: auto; }
.right { margin-left:auto; }
.left { margin-right:auto; }
.shadow { box-shadow:2px 1px 5px 1px hsl(0, 0%, 78%); }
.box-shadow { box-shadow:4px 2px 4px 0px #B8B8B8; }
.border { border: 1px solid gainsboro; }
.border, .border-drop-shadow { border:1px solid hsl(0, 0%, 88%); padding:.25rem .5rem; margin-bottom: .5rem; }
.border-drop-shadow { box-shadow:3px 3px 3px -1px hsl(0, 0%, 72%); box-sizing:border-box; }
.border-top-bottom  { border-top:1px solid gainsboro; border-bottom:1px solid gainsboro; padding:.75rem; }
.radius-10 { border-radius:10px; padding:1rem; }
.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-justify { text-align:justify; }
.text-large { font-size: 1.5rem; }
.orange-red { font-size: 2rem; color: orangered; }
.brown { color: brown; }
.bg-white { background-color: white; }
.no-wrap { white-space: nowrap; }
.space-around { justify-content: space-around; }
.flex-1 { flex: 1 1; }
.flex-2 { flex: 2 1; }
.basis-200 { flex-basis: 200px; }
.mrbt { margin-block-end: 1rem; }
.mrbs { margin-block-start: 1rem; }

/* Default Page */
#g2.grid-cont { display: grid; gap: .75rem; grid-auto-columns: 1fr; grid-template-areas: 'one' 'two' 'three' 'four' 'five'; }
#g2 > .bg-striped:nth-child(1) { grid-area: one; background-color: white; }
#g2 > .bg-striped:nth-child(2) { grid-area: two; background-color: white; }
#g2 > .bg-striped:nth-child(3) { grid-area: three; background-color: white; }
#g2 > .bg-striped:nth-child(4) { grid-area: four; background-color: white; }
#g2 > .bg-striped:nth-child(5) { grid-area: five; background-color: white; }

@media screen and (max-width: 1500px) {
  header { display: none; }
}

@media screen and (min-width: 1020px) {
  #g2.grid-cont {
    grid-template-areas:
    'one one one one'
    'two two three three'
    'four four five five';
  }
}

@media screen and (max-width: 875px) {
  header .mainTitle { font: impact; text-shadow: -1px 4px 0px #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; }
  #home-cont { flex-direction: column; }
  #contact-form { flex-direction: column; }
}

@media screen and (max-width: 500px) {
  ul { column-count: 1 !important; }
}