@charset "UTF-8";
/*
::||||||||||||||||||||||::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::||||||||||||||||||||||::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::||||||||||||||||||||||::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::||||||||||||||||||||||::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::||||||||||||||||||||||:::::::::================::::::::::::===========::::::::::::::
::::||||||||||||||||||:::::::::::===============::::::::::::::==========::::::::::::::
::::||||||||||||||||||:::::::::::=============:::::::::::::::::=========::::::::::::::
::::||||||||||||||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::|||||||||||||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
::::::||||||||||||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::|||||||||||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
::::::::||||||||||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
::::::::||||||||||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::|||||||||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
::::::::::||||||||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::::|||||||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
::::::::::::||||||||||:::::::::::=======================================::::::::::::::
:::::::::::::|||||||||:::::::::::=======================================::::::::::::::
::::::::::::::||||||||:::::::::::=======================================::::::::::::::
:::::::::::::::|||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
::::::::::::::::||||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::::::::::|||||:::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::::::::::::||::::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::::::::::::||::::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::||||::::::||::::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::||||::::::||::::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::||||::::::||::::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::||||::::::||::::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::||||::::::||::::::::::::======:::::::::::::::::::::::::::======::::::::::::::
:::::::::||||||||||||:::[[[]]]:::=============:::::::::::::::::=========:::[[[]]]:::::
:::::::::||||||||||||:::[[[]]]:::===============::::::::::::::==========:::[[[]]]:::::
:::::::::||||||||||||:::[[[]]]:::================::::::::::::===========:::[[[]]]:::::

    =============================
    ======Personal Website=======
    =============================
    [[[[[[[[[[[[[[[]]]]]]]]]]]]]]
    Designed by: Jonathan Hackner
    [[[[[[[[[[[[[[[]]]]]]]]]]]]]]
    {{{{{{{{{{{{{{{}}}}}}}}}}}}}}
    {{{{{{{{{{{{{{{}}}}}}}}}}}}}}
    ======For Web Design 2=======
    {{{{{{{{{{{{{{{}}}}}}}}}}}}}}
    {{{{{{{{{{{{{{{}}}}}}}}}}}}}}
    :::::::::::::::::::::::::::::
    This project is for::::::::::
    Professor Ian Besler:::::::::
    SMC Web Design 2 Class:::::::
    Personal Work Website::::::::
    Fall 2020 Semester:::::::::::
    :::::::::::::::::::::::::::::
    =============================
    ======Personal Website=======
    =============================
*/
/* NOTE: @import CSS stylesheet copied from Adobe Fonts. */
@import url("https://use.typekit.net/pib0mdg.css");

@-webkit-keyframes sub-navbar {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
@-moz-keyframes sub-navbar {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
@-o-keyframes sub-navbar {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
@keyframes sub-navbar {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
/* NOTE: Scrollbar Hide Issue creating inconsistent page width from index to sub-pages solved from: https://www.reddit.com/r/FirefoxCSS/comments/cg0wy5/how_to_remove_scrollbar_in_firefox_68/ */
:root {
  scrollbar-width: none !important;
}
/* NOTE: * box-sizing referenced from Stack Overflow and W3Schools. */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
html, body {
  margin:0;
  padding:0;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: #09182E;
  color: #DBCACA;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar {
  display: none;
}
ul, li {
  padding: 0;
  margin: 0;
}
a {
  color: #DBCACA;
  text-decoration: none;
}
a:hover {
color: #B99D82;
transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
a:active {
color: #B99D82;
}
hr {
  border-style: solid;
  border-width: 5px;
  border-image-source: radial-gradient(rgba(199, 54, 92, 0.78), rgba(91, 11, 201, 0.79));
  border-image-slice: 600;
  filter:  blur(16.45px);
}
#project_background_image {
  background: linear-gradient(rgba(199, 54, 92, 0.78), rgba(91, 11, 201, 0.79)), url("https://media.timeout.com/images/101588357/image.jpg") no-repeat center center fixed;
  width: 100%;
  height: 100%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
/* NOTE: Adobe Sans Pro, Adobe Source Code Pro, and Tussilago CSS (family, weight, and font-style) copied from Adobe Fonts. */
/* NOTE: Header markup referenced from W3Schools. */
.header_custom {
  top: 0;
  overflow: hidden;
  display: table;
  width: 100%;
  margin: 0;
}
#header {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 1%;
  padding-bottom: 1%;
  background-color: #09182E;
}
#header li {
font-size: 200%;
padding-right: 5%;
padding-left: 5%;
display: inline-block;
}
#header ul {
  text-align: center;
}
#header a {
  text-decoration: none;
  color: #DBCACA;
}
#header a:hover {
color: #B99D82;
transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
#header a:active {
color: #B99D82;
}
.header_items {
  font-family: source-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
}
#header_title {
  font-family: tussilago, sans-serif;
  font-weight: 900;
  font-style: normal;
}
/* NOTE: Gradient Animation Edited from source by Ian Forrest Gradient Animtor CSS Generator
(his design was inspired by Mailchimp's Email Design Guide Gradient at the top of the page:
https://mailchimp.com/email-design-guide/):
https://www.gradient-animator.com/, https://www.ianforrest.com/ */
#sub-navbar {
  background: linear-gradient(245deg, #c7365c, #5b0bc9);
  background-size: 400% 400%;
  -webkit-animation: sub-navbar 29s ease infinite;
  -moz-animation: sub-navbar 29s ease infinite;
  -o-animation: sub-navbar 29s ease infinite;
  animation: sub-navbar 29s ease infinite;
  width: 100%;
  height: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  font-family: source-sans-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  overflow: hidden;
}
#sub-navbar ul {
  text-align: center;
}
#sub-navbar li {
font-size: 133.3333333333%;
display: inline-block;
padding-right: 2%;
padding-left: 2%;
}
#sub-navbar a {
  text-decoration: none;
  color: #DBCACA;
}
#sub-navbar a:hover {
color: #B99D82;
transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
#sub-navbar a:active {
color: #B99D82;
}
/* NOTE: Footer-index and Footer positioning at bottom well as structure adjustments from referenced information: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ */
.footer-index {
  font-family: source-sans-pro, sans-serif;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  background-color: #09182E;
  margin: 0;
  position: absolute;
  bottom: 0;
  padding: 2%;
}
.footer {
  font-family: source-sans-pro, sans-serif;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  background-color: #09182E;
  margin: 0;
  bottom: 0;
  padding: 2%;
}
.home_billboard {
  font-family: source-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: 250%;
  margin-top: 4%;
}
.projects_billboard {
  background-color: white;
  margin:0;
  padding:0;
  display: inline-block;
}
 #pr1 {
   width: 33.3333333333%;
   height: 90vh;
   float: left;
   display: inline-block;
   background-image: linear-gradient(rgba(199, 54, 92, 0.78), rgba(91, 11, 201, 0.79)), url("https://images.squarespace-cdn.com/content/v1/54d03b54e4b0007714b70191/1551282795661-WW7EMRH4L0IOC8PNPNYB/ke17ZwdGBToddI8pDm48kFTEgwhRQcX9r3XtU0e50sUUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcjVvFZn3_1TpSINbj1p15LLAjcj6UHNkQOuDz3gO52lBvccB2t33iJEaqs_Hdgp_g/food.png?format=1500w");
   margin-bottom: 2%;
 }
 #pr2 {
   width: 33.3333333333%;
   height: 90vh;
   float: left;
   display: inline-block;
   background-image: linear-gradient(rgba(199, 54, 92, 0.78), rgba(91, 11, 201, 0.79)), url("https://images.squarespace-cdn.com/content/v1/54d03b54e4b0007714b70191/1551282796543-8WBB7V7EB2QSNJU0YFCK/ke17ZwdGBToddI8pDm48kFTEgwhRQcX9r3XtU0e50sUUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcjVvFZn3_1TpSINbj1p15LLAjcj6UHNkQOuDz3gO52lBvccB2t33iJEaqs_Hdgp_g/outside.png?format=1500w");
   margin-bottom: 2%;

 }
 #pr3 {
   width: 33.3333333333%;
   height:100vh;
   float: left;
   height: 90vh;
   display: inline-block;
   background-image: linear-gradient(rgba(199, 54, 92, 0.78), rgba(91, 11, 201, 0.79)), url("https://images.squarespace-cdn.com/content/v1/54d03b54e4b0007714b70191/1551282571214-WICHN1Q5T1050VF2TNKM/ke17ZwdGBToddI8pDm48kPTrHXgsMrSIMwe6YW3w1AZ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p52bY8kZn6Mpkp9xtPUVLhvLurswpbKwwoDWqBh58NLxQZMhB36LmtxTXHHtLwR3w/buns.png?format=1500w");
   margin-bottom: 2%;
 }
 .projects-style-links {
   font-family: source-sans-pro, monospace;
   font-weight: 900;
   font-style: normal;
    color: #DBCACA;
 }
.projects-style-links a {
   color: #DBCACA;
   text-decoration: none;
 }
 .projects-style-links a:hover {
 color: #B99D82;
 transition-timing-function: ease-in-out;
 -moz-transition-timing-function: ease-in-out;
 -webkit-transition-timing-function: ease-in-out;
 -o-transition-timing-function: ease-in-out;
 -moz-transition-timing-function: ease-in-out;
 -webkit-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 }
 .projects-style-links a:active {
 color: #B99D82;
 }

.projects_billboard-content {
  width: 100px;
  height: auto;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
}
/* NOTE: Markup for structure for table to reach full width and top of webpage from: https://www.sitepoint.com/community/t/make-divs-touch-edge-of-page/256566 */
.home_billboard-exercises {
  font-family: source-code-pro, monospace;
  font-weight: 500;
  font-style: normal;
  font-size: 100%;
  margin-top: 4%;
  margin-bottom: 1%;
  text-align: center;
  color: white;
  display:table;
  width:100%;
  table-layout:fixed;
  border-spacing:0 0;
}
.bill_cont-bod-pr {
  font-family: source-sans-pro, monospace;
  font-style: normal;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 4%;
  margin-bottom: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  color: black;
  font-size: 122%;
  background-color: #FCFCF9;
  border-radius: 10px;
  color: black;
}
.bill_cont-bod-pr-txt {
  margin-bottom: 2%;
  text-justify: auto;
  text-align: justify;
  margin-left: 13%;
  margin-right: 13%;
}
.bill_bod-pr-text-head-t-head {
  font-weight: 900;
  text-align: center;
  margin-top: 4%;
  margin-bottom: 4%;
}
.bill_bod-pr-text-head-t-subhead {
  font-family: tussilago, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  margin-top: 4%;
  margin-bottom: 4%;
}
.bill_bod-pr-text-head-t-subhead-initial {
  font-weight: 600;
  font-style: normal;
  text-align: center;
  margin-top: 4%;
  margin-bottom: 4%;
}
.bill_bod-pr-text-head-t-subhead-subhead {
  font-weight: 400;
  text-align: center;
  margin-top: 4%;
  margin-bottom: 4%;
}
.project_credits {
  font-weight: 400;
  text-align: center;
  margin-top: 4%;
  margin-bottom: 4%;
}
/* NOTE: Initial knoledge for image width and positioning supplemented by reference URIs: https://html.com/attributes/img-width/, https://stackoverflow.com/questions/12695726/image-goes-beyond-container-div-bounds/12695815 */
.bill_bod-pr-text-head-img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.bill_bod-pr-text-head-img-caption {
  margin-top: 1%;
  margin-bottom: 2%;
  text-justify: auto;
  text-align: justify;
  margin-left: 13%;
  margin-right: 13%;
  font-size: 75%;
  font-style: italic;
}
.bill_bod-pr-text-head-img-social {
  width: 100%;
  box-shadow: 0.025px 0.025px 0.5215px grey;
}
#home_billboard-jonhackner {
  font-family: tussilago, sans-serif;
  font-weight: 900;
  font-style: normal;
}
#home_billboard-checkout-one {
  font-family: tussilago, sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #DBCACA;
}
#home_billboard-checkout-two {
  text-decoration: none;
  font-family: tussilago, sans-serif;
  font-weight: 900;
  font-style: normal;
}
.video {
  width: 100%;
  margin: 0;
  padding: 0;
}