/**************************************/
/* General */
/**************************************/

 /* necessary for the background/main image of the index page to take up the full screen, regardless of screen size*/
body, html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    /* removes the awkward slight margin at the right of the page, but setting the .row's margin-right as 0 is a better solution
    as "overflow-x: hidden" causes the navbar to overlap with the vertical scrollbar */
    /*overflow-x: hidden; */
}

body {
    /*font-family: 'Libre Baskerville', serif;*/
    font-family: 'Open Sans', sans-serif;
}

 /* removes the awkward slight margin at the right of the page that makes the bottom scrollbar appear (caused by the .row element's
 property which gives it a margin-right of -15px */
.row {
    margin-right: 0;
}

 /* makes the content hidden under the navbar visible by pushing all content down with padding-top */
.content-beginning {
    /* margin-top: 70px; */
    padding-top: 70px;
}

.flash-message {
    margin-top: 50px;
    position: relative;
    margin-bottom: -120px;
    z-index: 1000;
}

/* .page-divider gives the pager divider (aka the "-----" and "-----" next to the title of a section)*/
.page-divider {
  overflow: hidden;
  text-align: center;
}

.page-divider:before,
.page-divider:after {
  /*background-color: #000;*/
  /* background-color: #383838; */
  background-color: #dfdfdf;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  /*width: 8%;*/
  width: 6%;
}

.page-divider.short:before,
.page-divider.short:after {
    width:3%;
}

.page-divider:before {
  right: 0.5em;
  margin-left: -50%;
}

.page-divider:after {
  left: 0.5em;
  margin-right: -50%;
}

  /* adds boldness/thickness to the page divider line */
.page-divider.strong:before,
.page-divider.strong:after {
    height: 2px;
}

 /* makes the columns in a row with the class "eql-hgt" have equal heights. To be used to vertically center a column's text
 to match the height of the image of the adjacent column*/
.eql-hgt {
    overflow: hidden; 
}
.eql-hgt > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

 /* vertically center a text in a column or inside whatever container or div */
.v-center {
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}

.fade-in-text, .delay-fade-in-text {
    opacity: 0;
    /*font-size: 21px;*/
    /*margin-top: 25px;*/
    /*text-align: center;*/

    /*-webkit-transition: opacity 2s ease-in;*/
    /*   -moz-transition: opacity 2s ease-in;*/
    /*    -ms-transition: opacity 2s ease-in;*/
    /*     -o-transition: opacity 2s ease-in;*/
    /*        transition: opacity 2s ease-in;*/
    -webkit-transition: opacity 0.7s ease-in;
       -moz-transition: opacity 0.7s ease-in;
        -ms-transition: opacity 0.7s ease-in;
         -o-transition: opacity 0.7s ease-in;
            transition: opacity 0.7s ease-in;
}

.fade-in-text.load, .delay-fade-in-text.load {
    opacity: 1;
}

/**************************************/
/* INDEX PAGE */
/**************************************/

 /* makes the background image / main image inherit the height of the browser (body/html) and cuts off all excess pixels of the 
 image*/
#intro_photo {
    height: inherit;
    overflow: hidden;
}

 /* the background image / main image of the index page */
.background {
    /* background: url("../images/California_beach.jpg"); */
    background: url("../images/Osaka_Tower.jpeg");
    /* background: url("../images/osaka_trip_blurred.jpeg"); */
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
    height: 100%;
    text-align: center;
}



 /* makes the transparent, darker layer above the picture (for better overlay word legibility) */
.layer {
    /* background-color: rgba(20,30,10,0.2); */
    background-color: rgba(20,30,10,0.08);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.intro-div {
    background-color: #121212;
    color: #dfdfdf;
}

.intro-text-div {
    user-select: none;
}

.intro-title-div {
    position: relative;
    top: calc(35% - 2vw);
}

.intro-greeting-text {
    position: relative;
    color: white;
    /*top: 35%;*/
    top: calc(35% - 2vw);
    /* font-size: calc(10px + 1.5vw); */
    /* font-size: min(calc(10px + 1.5vw), 40px); */
    font-size: min(calc(18px + 2vw), 40px);
    font-style: italic;
}

.intro-text {
    position: relative;
    color: white;
    /*top: 35%;*/
    top: calc(35% - 2vw);
    /* font-size: calc(30px + 5.0vw); */
    /* font-size: min(calc(30px + 5.0vw), 100px); */
    font-size: min(calc(20px + 4.0vw), 100px);
    line-height: 1.0;
}

.intro-text span {
    display: inline-block;
}

 /* makes the subtitle (smaller font just below the "Hello!" introduction title) */
.intro-subtitle {
    position: relative;
    color: white;
    /*top: 32%;*/
    /* top: calc(32% - 2vw); */
    top: calc(36% - 2vw);
    /* font-size: min(calc(20px + 0.95vw), 50px); */
    font-size: min(calc(12px + 1.4vw), 30px);
    margin-top: min(20px, calc(5px + 1vw));
}

 /* selects each of the index page's sections (after the main picture) */
.intro-section {
    text-align: center;
    padding: 4em 0;
}

.ind-blue-section {
    /*background-color: #cce2e2;*/
    /* background-color: #e1e7f2; */
    background-color: #292e36;
}

 /* selects the picture in the "About Me" section. */
.about-pic {
    /* makes the picture circular */
    border-radius: 50%;
    /* sets image dimension */
    width: 17em;
    height: 17em;
    /*width: 15em;*/
    /*height: 15em;*/
}

 /* selects the thumbnail picture of the "About Me" section */
.about-pic.thumbnail {
    /* sets the background color of the picture's frame/border */
    /*background-color: #97c3c4;*/
    /*background-color: #d0d7e2;*/
    background-color: #bac3d1;
}

 /* centers image (duh) */
.center-image {
    /*display: block;*/
    margin-left: auto;
    margin-right: auto;
    /*width: 50%;*/
}

 /* Gives top and bottom margin/space to the sections of the index page, after the landing/main picture */
.vert-spaced {
    margin-top: 1em;
    margin-bottom: 1em;
}

 /* Gives more top and bottom margin/space to the sections of the index page, after the landing/main picture */
.vert-spaced-2 {
    margin-top: calc(15px + 1.5vw);
    margin-bottom: calc(15px + 1.5vw);
}

 /* style of the text in the "About Me" section */
.about-text {
    text-align: left;
    position: relative;
    /*top: 30%;*/
    /* the line height "centers" the text vertically and also makes the text easier to see */
    line-height: calc(25px + 1vw);
    /* font-size: calc(15px + 0.6vw); */
    font-size: min(calc(15px + 0.6vw), 25px);
}

.my-bg-pic {
    /* makes the picture circular */
    border-radius: 20%;
    /* sets image dimension */
    width: 22em;
    height: 18em;
    /*max-width: 22em;*/
    /*max-height: 18em;*/
    /*min-width: 10em;*/
    /*min-height: 7em;*/
    margin-top: 30px;
}

.my-bg-text {
    text-align: left;
    position: relative;
}

.my-bg-subtitle {
    color: #4ba330;
}

.my-bg-title {
    line-height: 1.3em;
    color: #3d76d3;
}

.my-bg-content {
    line-height: 1.6em;
    /* color: #3a3a3a; */
    color: #dfdfdf;
}

.my-skill-pic {
    /* makes the picture circular */
    border-radius: 20%;
    /* sets image dimension */
    /*width: 13em;*/
    /*height: 13em;*/
    width: calc(6em + 3vw);
    height: calc(6em + 3vw);
    margin-top: 30px;
    background-color: #ededed;
}

.my-skill-text {
    text-align: left;
    position: relative;
    display: block;
}

.my-skill-subtitle {
    /*font-size: calc(12px + 0.5vw);*/
    color: #4ba330;
}

.my-skill-title {
    /*font-size: calc(16px + 0.7vw);*/
    line-height: 1.3em;
    color: #3d76d3;
    text-align: center; 
    font-weight: bold; 
    margin-top: 0;
}

.my-skill-content {
    line-height: 1.6em;
    /* color: #3a3a3a; */
    color: #dfdfdf;
}

/**************************************/
/* RESUME PAGE */
/**************************************/

 /* makes the resume pdf file take up the whole page, and the page's scroll up/down becomes the pdf scroll up/down. Neat! */
.resume-div{
    /*opacity:0.8;*/
    /*background-color:#ccc;*/
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

.resume {
    width: 100%;
    height: 100%;
}

.content-beginning-resume {
    padding-top: 50px;
}

.resume-div-center-btn {
    position: relative;
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
}

.resume-btn-desc {
    display: none;
}

.resume-btn-desc-active {
    display: block;
    position: absolute;
    top: 46%;
    left: 50%;
    margin-top: -9.5px;
    margin-left: -124.7px;
}

.resume-btn-div {
    display: none;
}

.resume-btn-div-active {
    display: block;
    /*position: relative;*/
}

.resume-btn {
    display: none;
}

.resume-btn-active {
    display: inline-block;
    position: absolute;
    top: 54%;
    left: 50%;
    margin-left: -84.9px;
    margin-top: -23px;
}


/**************************************/
/* ABOUT PAGE */
/**************************************/
#about-intro-photo {
    height: 500px;
    overflow: hidden;
}

.about-background {
    /*background: url("../images/Santa_Barbara.jpg");*/
    /*background: url("../images/thinking.jpg");*/
    background: url("../images/thinking.jpg");
    /*background: url("../images/MP_Cropped.jpg");*/
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
    width: 100%;
    height: 100%;
    /*height: 642px;*/
    text-align: center;
    /* removes weird margins added by having "padded" grid */
    /*margin-right: -15px;*/
    /*margin-left: -15px;*/
}

.about-intro-text {
    position: relative;
    color: white;
    top: 35%;
    /* font-size: calc(30px + 5.5vw); */
    font-size: min(calc(20px + 5.5vw), 100px);
    line-height: 1em;
}

/**************************************/
/* PORTFOLIO PAGE */
/**************************************/

.portfolio-background {
    background: url("../images/destiny.jpg");
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
    height: 100%;
    text-align: center;
}

.portfolio-div {
    background-color: #121212;
}

.portfolio-section-title {
    color: #adadad;
}

.portfolio-section-subtitle {
    color: #919191;
}

 /* makes it so that the bootstrap columns move onto a new row if the 12 column spaces have been filled, or if the inclusion
 of the new column will exceed that 12 column space. Also used outside of the portfolio page (in the index page, "My background"
 sections, for example). */
.flex {
	display: flex;
	flex-wrap: wrap;
}
.small {
    font-size: 18px;
    color: #7c7c7c;
}

.portfolio-thumbnail {
    background-color: #292e36;
    border: 1px solid #292e36;
}

.portfolio-thumb-fx {
    box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
    transition: all .2s linear;
}

.portfolio-thumb-fx:hover {
    box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
    transform: translate3D(0, -2px, 0);
}

.portfo-thumb-limit {
    max-height: 230px;
    overflow-y: hidden;
}

.thumbnail .portfolio-thumb-caption {
    /* color: #dfdfdf; */
    color: #8d8d8d;
}

.imageresource {
    position: center;
}

 /* Centers the Modal */
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
 /* code centering the modal ends*/
 
 /* sets maximum modal image width/height according to the screen size */
.modal-dialog {
    /*width: 90%;*/
    /* the width: auto makes it so that the modal-dialog div's width is adjusted to become that of the imagepreview div
    contained within*/
    width: auto;
    height: 90%;
}

.imagepreview {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}

.modal .close {
    /*padding-left: 20px;*/
    color: white;
}
 /* code that sets modal image dimensions according to screen width ends */
 
 /* "overflow: visible" keeps the scroll bar visible while "padding-right: 0 !important" overrides .modal-open's default element 
 inline style of "padding-right: 17px" */
.modal-open {
    overflow: visible;
    padding-right: 0 !important;
}

 /* Portfolio Show Page Styles */
.portfolio-show-img {
    width: 100%;
}

 /* the descriptive text below the blog show page main image */
.portfolio-img-desc {
    /* font-size: calc(14px + 0.4vw); */
    font-size: min(calc(14px + 0.4vw), 18px);
    font-style: italic;
    margin-top: 10px;
    margin-bottom: 0;
}

/**************************************/
/* PORTFOLIO NEW / EDIT PAGE */
/**************************************/

.new-edit-portfolio-div {
    height: 100%;
    background-color: #121212;
    color: #dfdfdf;
    /* background-color: #222222; */
}

.new-edit-portfolio-div select {
    /* background-color: #121212; */
    background-color: #222222;
    border: 1px solid #787878;
    color: #dfdfdf;
}

.new-edit-portfolio-div input {
    /* background-color: #121212; */
    background-color: #222222;
    border: 1px solid #787878;
    color: #dfdfdf;
    color-scheme: dark;
}

.new-edit-portfolio-div textarea {
    /* background-color: #121212; */
    background-color: #222222;
    border: 1px solid #787878;
    color: #dfdfdf;
}

/**************************************/
/* PORTFOLIO SHOW PAGE */
/**************************************/

.portfolio-show-div {
    background-color: #121212;
    min-height: 100%;
}

.portfolio-date {
    font-size: 15px;
    /*width: 60%; */
    width: 70%; 
    margin: 10px auto 0 auto;
    padding-bottom: 0;
    /* color: gray; */
    color: #ababab;
}

.portfolio-title {
    /*font-size: 50px;*/
    /* font-size: calc(20px + 1.8vw); */
    font-size: min(calc(20px + 1.8vw), 50px);
    font-weight: 700;
    /*width: 60%; */
    width: 70%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #dfdfdf;
}

/* the div containing the body */
.portfolio-body-div {
    /*width: 60%;*/
    width: 70%;
    margin: 25px auto;
    color: #a3a3a3;
}

.portfolio-body {
    margin: 30px 0;
    /* font-size: calc(15px + 0.4vw); */
    font-size: min(calc(15px + 0.4vw), 20px);
    /* line-height: calc(20px + 1.1vw); */
    line-height: min(calc(20px + 1.1vw), 40px);
}

 /* gives the paragraphs found inside the .portfolio-body div have more spaces between the paragraphs */
.portfolio-body p {
    /*margin-bottom: 20px;*/
    /* margin-bottom: calc(10px + 0.7vw); */
    margin-bottom: min(calc(10px + 0.7vw), 30px);
}

.portfolio-body img {
    width: 100%;
}

.form-control.textarea-lg {
    height: 12vw;
}

/**************************************/
/* Blog PAGE */
/**************************************/

.blog-background {
    /*background: url("../images/Santa_Barbara_Cropped.jpg");*/
    /*background: url("../images/thinking.jpg");*/
    background: url("../images/MP_Cropped.jpg");
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
    width: 100%;
    height: 100%;
    /*height: 642px;*/
    text-align: center;
}

.blog-div {
    background-color: #121212;
}

.blog-title {
    /*font-size: 50px;*/
    /* font-size: calc(20px + 1.8vw); */
    font-size: min(calc(20px + 1.8vw), 50px);
    font-weight: 700;
    /*width: 60%; */
    width: 70%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    color: #dfdfdf;
}

.blog-subtitle {
    position: relative;
    color: white;
    top: 32%;
    font-size: calc(15px + 1.3vw);
    line-height: 1.5em;
}

.blog-thumbnail {
    /* background-color: #292e36;
    border: 1px solid #292e36; */
    background-color: #121212;
    border: 1px solid #121212;
}

.blog-thumb-fx {
    /*box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);*/
    transition: all .2s linear;
}

.blog-thumb-fx:hover {
    box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
    /*transform: translate3D(0, -2px, 0);*/
    transform: translate3D(0, -4px, 0);
}

.thumbnail .blog-thumb-caption {
    color: #8d8d8d;
}

.blog-show-img {
    display: block;
    margin: auto;
    width: 100%;
}

.blog-img {
    display: block;
    margin: auto;
    width: 100%;
}

 /* the descriptive text below the blog show page main image */
.blog-img-desc {
    /* font-size: calc(14px + 0.4vw); */
    font-size: min(calc(14px + 0.4vw), 18px);
    font-style: italic;
    margin-top: 10px;
    margin-bottom: 0;
}

/**************************************/
/* BLOG NEW / EDIT PAGE */
/**************************************/

.new-edit-blog-div {
    height: 100%;
    background-color: #121212;
    color: #dfdfdf;
    /* background-color: #222222; */
}

.new-edit-blog-div select {
    /* background-color: #121212; */
    background-color: #222222;
    border: 1px solid #787878;
    color: #dfdfdf;
}

.new-edit-blog-div input {
    /* background-color: #121212; */
    background-color: #222222;
    border: 1px solid #787878;
    color: #dfdfdf;
    color-scheme: dark;
}

.new-edit-blog-div textarea {
    /* background-color: #121212; */
    background-color: #222222;
    border: 1px solid #787878;
    color: #dfdfdf;
}

/**************************************/
/* BLOG SHOW PAGE */
/**************************************/

.blog-show-div {
    background-color: #121212;
    min-height: 100%;
}

 /* the category - date description above the title of the blog show page */
 .blog-categ-date {
    font-size: 15px;
    /*width: 60%; */
    width: 70%; 
    margin: 10px auto 0 auto;
    padding-bottom: 0;
    /* color: gray; */
    color: #ababab;
}

/* the div containing the body */
.blog-body-div {
    /*width: 60%;*/
    width: 70%;
    margin: 25px auto;
    color: #a3a3a3;
}

 /* the body/content portion of the blog show page */
.blog-body {
    margin: 30px 0;
    /* font-size: calc(15px + 0.4vw); */
    font-size: min(calc(15px + 0.4vw), 20px);
    /*line-height: 35px;*/
    /* line-height: calc(20px + 1.1vw); */
    line-height: min(calc(20px + 1.1vw), 40px);;
}

 /* gives the paragraphs found inside the .blog-body div have more spaces between the paragraphs */
.blog-body p {
    /*margin-bottom: 20px;*/
    /* margin-bottom: calc(10px + 0.7vw); */
    margin-bottom: min(calc(10px + 0.7vw), 30px);
}

 /* preserves the video's proper ratio even as the browser window changes in size. */
.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 51%;
}
 /* makes the iframe (i.e. video element) within the "aspect-ratio" class div take up the whole div */
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
}

/**************************************/
/* CONTACT PAGE */
/**************************************/

/*.contact-jumbo {*/
/*background: #358CCE;*/
/*background: #528dea;*/
/*color: #FFF;*/
/*border-radius: 0px;*/
/*}*/
/*.jumbotron-sm { padding-top: 24px;*/
/*padding-bottom: 24px; }*/
/*.jumbotron small {*/
/*color: #FFF;*/
/*}*/
/*.contact-jumbo-text-div {*/
/*    padding-left: 140px;*/
/*}*/

.contact-background {
    /*background: url("../images/SB_crop_blur1.jpg");*/
    /*-webkit-filter: blur(2px);*/
    /*filer: blur(2px);*/
    background: url("../images/Santa_Barbara_Cropped.jpg");
    /*background: url("../images/MP_Cropped.jpg");*/
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
    width: 100%;
    height: 100%;
    /*height: 642px;*/
    /*text-align: center;*/
}

.contact-intro-text {
    position: relative;
    color: white;
    top: 35%;
    font-size: min(calc(20px + 5.5vw), 100px);
    line-height: 1em;
}

.contact-subtitle {
    position: relative;
    color: white;
    top: 32%;
    font-size: calc(15px + 1.3vw);
    line-height: 3em;
}

.contact-text {
    padding-left: calc(11vw);
}

 /* selects each of the index page's sections (after the main picture) */
.contact-section {
    /*text-align: center;*/
    padding: 4em 0;
}

.contact-body-div {
    background-color: #121212;
    min-height: calc(100% - 500px);
}

.contact-well {
    background-color: #222222;
    border: 1px solid #3b3b3b;
}

.contact-well label {
    color: #dfdfdf;
}

.contact-well input {
    background-color: #121212;
    border: 1px solid #787878;
    color: #dfdfdf;
}

.contact-well textarea {
    background-color: #121212;
    border: 1px solid #787878;
    color: #dfdfdf;
}

.contact-well .input-group-addon {
    background-color: #282828;
    border: 1px solid #787878;
}

.contact-well .glyphicon-envelope {
    background-color: #282828;
    color: #b5b5b5;
}

/**************************************/
/* NAV BAR */
/**************************************/

.navbar {
    background-color: transparent;
    border: none;
    /*transition: background-color 0.5s ease 0s;*/
}

.navbar-inverse.solid {
    /* background-color: #72a4c9; */
    /* background-color: #373e48; */
    background-color: #424a56;
    border-color: #5982a0;
}

/* main navbar background color and border color */
/*.navbar-inverse {*/
/*    background-color: #72a4c9;*/
    /* the below code renders the navbar transparent... may be useful later... */
    /* maybe i can use JS to add a class to the navbar to make it transparent until we scroll past a certain point,
    after which the navbar will become "sticky" and stick to the top of the page */
/*    border-color: #5982a0;*/
/*}*/

 /* collapsed (hamburger) navbar border-color */
/*.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {*/
/*    border-color: #5982a0;*/
/*}*/

/* main navbar font color */
.navbar-inverse .navbar-brand {
    color: #e4e4e4;
    font-size: 20px;
    padding-top: 11px;
    padding-bottom: 0px;
}

/* main navbar brand font color */
.navbar-inverse .navbar-nav>li>a {
    color: #e4e4e4;
    font-size: 18px;
}

/* main navbar collapse (hamburger) icon border-color (transparent/non-existent at start) */
.navbar-inverse .navbar-toggle {
    border: none;
    /*border-color: #72a4c9;*/
}

/* main navbar collapse (hamburger) icon border-color (gets color once we scroll past a certain point) */
.navbar-inverse .navbar-toggle.solid {
    border-color: #72a4c9;
}

.nav-brand {
    font-size: 30px;
}

/* main navbar collapse (hamburger) background-color on hover (transparent white at start) */
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/*.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover.solid {*/
/*    background-color: rgba(255,255,255,0.2);*/
/*}*/

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    /*border-color: #101010;*/
    border-color: rgba(255, 255, 255, 0.2);
}

/* makes the navbar icons bigger, but also creates some unneccessary padding to top and bottom */
/*.navbar-icon {*/
/*    font-size: 25px;*/
/*}*/


/* media query for when the screen is ABOVE a certain width/size */
@media (min-width: 800px) {
    .portfolio-background {
        /* change portfolio background image position when screen width is bigger */
        /*background: url('../images/kid_me.png');*/
        background-position: center -180px;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    /* restricts the height (and size) of the blog show image if it's too big and we are on a larger screen */
    /*.blog-show-img {*/
    /*    max-height: 40em;*/
    /*    width: initial;*/
    /*}*/
}


/*@media (max-width: 500px) {*/
@media (max-width: 700px) {
    /* change index background image when screen width is smaller */
    .background {
        background: url('../images/Mission_Peak.jpg');
        background-position: center center;
        background-size: cover;
    }
    
    /* centers text in the index page when screen width is smaller */
    .intro-div div {
        margin: 0 auto;
    }
    
    /* reduces awkward space between "Hi! I'm" and "Henry Chang" in the intro text when screen is thinner */
    /* also, adds more distance between the intro title text and the intro subtitle text*/
    .intro-text {
        line-height: calc(50px + 0.5vw);
        /* margin-bottom: calc(30px + 0.5vw); */
    }

    .intro-subtitle {
        /* position: relative;
        color: white; */
        /*top: 32%;*/
        /* top: calc(32% - 2vw); */
        top: calc(34.3% - 2vw);
        font-size: min(calc(18px + 0.95vw), 50px);
    }
    
    .intro-section .intro-to-port-h3 {
        line-height: 45px;
        margin-top: 0;
    }
    
    /* changes the width of the portfolio show page's title, date, and body to be 90% when screen width is smaller */
    .portfolio-body-div, .portfolio-date, .portfolio-title {
        width: 90% !important;
    }
    
    /* changes the blog background image when the screen width is small enough */
    .blog-background {
        background: url('../images/sb_sunset_vert.jpg');
        /*background: url('../images/sb_sunset_horiz.jpg');*/
        /*background: url('../images/sb_clouds.jpg');*/
        background-position: center center;
        background-size: cover;
    }
    
    /* changes the width of the blog show page's title, date, and body to be 90% when screen width is smaller */
    .blog-body-div, .blog-categ-date, .blog-title {
        width: 90% !important;
    }
    
    /*.index-to-port-btn {*/
    /*    margin-top: 10px;*/
    /*}*/
    
    /* change contact page background image when screen width is smaller */
    .contact-background {
        background: url('../images/kid_me.png');
        background-position: center center;
        background-size: cover;
    }
    
    /* changes the form width in the new/edit forms for the blog and portfolio pages if the screen width is small */
    .fill-out-form {
        width: 90% !important;
    }
    
}