html, 
body {
    height: 100%;
    /* background:rgb(10, 10, 10); */
    /* background: rgb(42, 42, 42); */
    /* background: hsl(240, 34%, 35%); */
    /* most recent background colorbelow */
    /* background: hsl(220, 55%, 15%); */
    background-image: url("../images/mtn-img-tersius-van-rhyn.jpg");
    background-position: top left;
    background-size: cover;
    background-repeat:  no-repeat;
    background-attachment:  fixed; 
    /* color: rgb(255, 249, 239); */
    /* color: hsl(235, 100%, 90%); */
    color: white;
}
nav {
    font-size: 20px;
    width: 100%;
    padding: 15px;
}
h1 {
    /* color:hsl(42, 61%, 71%); */
    letter-spacing: 1px;
}
main {
    scroll-padding-top: 5rem;
}
figcaption,
span,
label,
.port-link {
    font-family: 'Nunito',sans-serif;
    font-size: 115%;
    line-height: 2rem;
    letter-spacing: 0.9px;
}
svg, .icon {
    margin-bottom:5px;
}
figure {
    padding: 2%;
    /* margin: 1% 5% 5% 5%; */
}
figcaption {
    display: block;
}
input, 
textarea {
    /* background: rgb(255, 234, 201) !important; */
    background: rgb(228, 228, 228);
    box-shadow: 1px 1px 10px 3px rgb(49, 49, 49);
}
h3 {
    color: rgb(255, 221, 128);
    margin: 6% 0 0 5%;
}
h5 {
    opacity: 0.6;
    margin: 2% 1% 1% 1%;
}
form {
    flex-shrink: 4rem;
}
/* Specifying font size and format for footer.*/
footer {
    /* height: 10%; */
    max-height: 15%;
    min-height: 3%;
    flex-shrink: 0;
    opacity: 0.85;
    /* background: black; */
    background:hsl(240, 14%, 15%);
    /* box-shadow: 0 -20px 30px 5px rgb(0, 0, 0); */
    padding: 2% 0 2% 0;
    margin: 0;
    text-align: center;
}
/* when page scrolled, navbar sticks to top, transition to dark gray background */
.scroll-nav {
    /* background: rgb(36, 36, 36); *//* dark gray */
    /* background: rgb(23, 21, 42);  */
    /* background: hsl(246, 50%, 10%);  */
    background: hsl(254, 20%, 5%); 
    /* background:rgb(13, 13, 13); */
    opacity: 0.9;
    transition: 0.85s ease-in-out;
}
/* when page not scrolled, transparent background */
.top-nav {
    background: none;
    transition: 0.8s ease-in-out;
}
.wrapper {
    flex: 1 0 auto;
}
/*allow containers to span entire viewport */
.container-fluid {
    padding: 0px;
    margin: 0px;
} 
.about-container {
    /* background: rgb(23, 21, 42); */
    opacity: 0.97;
    /* height: 60%; */
    height: auto;
    width: 100%;
    /* margin: 5% 0 */
    margin: 0;
    padding: 5% 2% 30% 2%;
    scroll-padding: 6rem 0 0 0;
    /* background:hsla(220, 60%, 20%, 0.2); */
}
.about-me-p {
    font-size: 1.6rem;
    /* padding: 2%; */
    width: 80%;
    /* line-height: 32px; */
    /* color:rgb(226, 199, 136); */
    /* was color below most recently */
    /* color: rgb(255, 221, 128); */
}
.contact-container {
    height: 75%;
    margin: auto;
    /* margin: 20% auto 5% auto; */
    /* overflow-y: scroll; */
}
.contact-content {
    margin: 20% auto 10% auto;
}
.btn {
    /* background:hsl(0, 0%, 5%); */
}
.nav-link {
    padding: 10px 0 0 0;
    margin: 2%;
    text-align: right;
}
.portfolio-container {
    width: 100%;
    /* margin: 5% 0 8% 0; */
    padding: 3% 5% 5% 5%;
    scroll-margin-top: 4rem;
    /* was color below this most recently */
    /* background-color: hsl(200, 55%, 15%); */
    /* background: rgb(23, 21, 42); original blue */
    /* background: hsl(245, 35%, 10%); */
    background: hsl(220, 50%, 10%);
    opacity: 0.97;
}
.portfolio-h2 {
    /* text-align: center; */
    margin: 2%;
    font-size: 2.3rem;
    letter-spacing: 1px;
}
.port-figure {
    height: auto;
    padding: 0;
    margin: 5%;
}
.port-img {
    max-height: 600px;
    width: auto;
    transition: 0.25s ease-in-out;
    margin: 1% 0;
}
.port-img:hover {
    background-color: white;
    opacity: 0.85;
}
.tech-span {
    font-family: 'Nunito',sans-serif;
    font-size: 110%;
    line-height: 28px;
    letter-spacing: 0.9px;
    display: inline-block;
    /* background: hsl(0, 0%, 0%); */
    background: hsl(5, 50%, 5%);
    color: rgb(240, 240, 240);
    /* was color below this most recently */
    /* color: hsl(45, 100%, 75%); */
    /* border: 3px solid rgb(122, 105, 56); */
    /* border: 3px solid hsl(45, 38%, 25%); */
    border: 3px solid hsl(45, 45%, 25%);
    margin: 3px 2px;
    padding: 3px 6px;
    border-radius: 20px;
}
.port-link {
    display: inline-block;
    text-decoration: none;
    /* color: rgb(237, 237, 237); */
    color: hsl(45, 50%, 96%);
    /* background:rgb(46, 44, 42); */
    /* background:rgb(26, 26, 26); */
    /* border: solid rgb(245, 245, 245) 1px; */
    border: solid hsl(45, 50%, 96%) 1px;
    margin: 5px 5px 8px 5px;
    padding: 3px 8px;
}
.port-link:hover {
    text-decoration: underline;
    /* color: rgb(255, 221, 128);  */
}
.contact-h2 {
    font-size: 2.3rem;
}
/* Changing the appearance for just my name at the top. */
#name {
    color:rgb(226, 199, 136);
    font-size: 28px; 
    letter-spacing: 1px; 
    margin: 0 2%;
}
.footer-links {
    color:rgb(255, 249, 239); 
    font-size: 1.4rem;
    /* margin: 10px 7px 7px 7px; */
    margin: 0.8%;
    padding: 5px;
    opacity: 0.8;
    /* opacity: 0.95; */
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

.footer-links:hover {
    opacity: 1;
}
#about-me-card {
    padding: 2rem;
    /* width: clamp(300px, 70%, 800px); */
}
#contact-submit-btn {
    font-family: 'Nunito', sans-serif;
    background:hsl(0, 0%, 5%);
    border: 1px solid hsla(0, 0%, 94%, 0.5);
}
#contact-submit-btn:hover {
    background: hsl(0, 0%, 10%);
    color: white;
}
#work-day {
    margin-bottom: 5%;
}
.hide {
    display: none;
}
#call-to-action-btn {
    padding: 1rem;
    margin-top: 2rem;
    font-size: x-large;
    filter:saturate(1.25);
    font-weight: bold;
    background: rgb(255, 221, 128);
    color:hsl(0, 0%, 10%);
    /* most recent color below */
    /* background: hsl(230, 95%, 60%); */
    /* background: hsl(234, 90%, 55%); */
    /* color: white;  */
}