/*
COLOR PALETTE
https://coolors.co/f7fff7-343434-2f3061-ffe66d-a1c6d7
#f7fff7ff; -- almost white
#343434ff; -- dark gray - almost black
#2f3061ff; -- blue dark
#ffe66dff; -- yellow
#a1c6d7ff; -- blue light
*/


/* Global styles
----------------------------------------------*/
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
body{
    color: #343434ff;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
img {
    width: 300px;
}
a {
    color: rgb(250, 209, 3);
}
a:hover {
    text-decoration: none;
}
h1 {
    font-size: 100px;
    line-height: 1;
}
h2 {
    font-size: 45px;
}
h1, h2 {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    margin: 0;
    transition: 0.3s;
}
h1:hover, h2:hover {
    color: rgb(255, 255, 255)

}
.content-wrap {
    max-width: 800px;
    width: 85%;
    margin: 0 auto;
    padding: 10px 0;
}
h3 {
    margin-bottom: 0;
    font-size: 30px;
}
.item-details h3 + p {
    font-style: italic;
}

.item-details h3 ~ p {
    margin: 0;
}
.divider > section {
    border-bottom: 1px dashed #343434ff;
    padding: 25px 0;
}
.divider > section:last-of-type {
    border-bottom: none;
}

/* Menubar Button Styles */
.barbuttoncontainer {
  display: block;
  cursor: pointer;
  position: fixed;
  top: 25px;
  right: 50px;

  z-index: 3;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
  background-color: #818181;

}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
  background-color:#818181;
}


/* Profile
----------------------------------------------*/
header.main {
    /* background: rgb(59, 165, 33); */
    /* background: rgb(7, 26, 2); */
    /* background-image: url(../images/visax-unsplash.jpg);
    background-size: cover;
    background-position: bottom left;
    padding-bottom: px; */
    display: block;
    position: fixed;
    max-width: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1;
    top: 25px;
    color: rgb(0, 0, 0);
}

header {
    display: block;
    position: relative;
    max-width: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1;
    top: 25px;
    padding-bottom: 33px;
}


/* Projects
----------------------------------------------*/
.projects {
    height: 100vh;
    background: #f7fff7ff;
    background-image: url(../images/DrewOrdwayHalfDome_reduced.jpg);
    background-size: cover;
    background-position: bottom left;
    padding-bottom: px;
}
.projects a{
    color: #2f3061ff;
}
.projects .btn{
    color: #f7fff7ff;
    background: #2f3061ff;
    text-decoration: none;
    padding: 8px;
    border-radius: 4px;
    display: inline-block;
}
.projects .btn:hover{
    background: #2f3061cc;
    /* background: rgba(47, 48, 97, 0.80); */
}
.project-item {
    overflow: hidden;
    border-bottom: 1px dashed #343434ff;
    padding: 25px 0;
}
.project-item h3 {
    margin-top: 0;
}


/* Work Experience
----------------------------------------------*/
.work-experience {
    background: #a1c6d7ff;
}


/* detail-page
----------------------------------------------*/
.detail-page {
    background-size:100vmax;
    background-position: top left;
    padding-bottom: 100px;
}
.detail-page p {
    width: 80%;
}

.detail-page span.emphasis {
    font-weight: bold;
    font-size: 20px;
}
.detail-page p em {
    font-weight: bold;
    font-size: 17px;
    font-style: normal;
}

.about {
    background-image: url(../images/yellow-paper.png);
}

.spanem {
    background:rgb(255, 255, 255);
}

.spanem img {
    width: 700px;
    max-width: 90vw;
}

.spanem h1 img {
    width: 300px;
}

#squeeze {
    width: 300px;
}

/* Contact Info
----------------------------------------------*/
footer {
    background: rgb(24, 24, 24);
    color: #f7fff7ff;

}
.contact-list {
    list-style-type: none;
    padding: 0;
}
.contact-list a {
    padding: 15px;
    display: inline-block;
}


/* Responsive
----------------------------------------------*/
/* set properties that apply only to large screens */
@media screen and (min-width:750px){
    .project-item img {
        float: left;
        margin-right: 20px;
    }
    .job-item {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 20px;
    }
    header, footer {
        text-align: center;
    }
    .contact-list {
        display: flex;
        justify-content: center;
    }
}
/* Revise h1 h2 headlines and contacts links for small screen */
@media screen and (max-width:749px){
    header{
        width:100%;
    }
    h1 {
        font-size: 75px;
        line-height: 0.9;
        margin-bottom: 20px;
    }
    h2 {
        line-height: 1;
    }
    .contact-list a {
        padding: 5px;
    }
}
/* Adapting text color when pencils in background photo overlap */
@media screen and (max-width:580px){
    .detail-page .item-details {
        /* background-color: #f0ffff44; */
        /* border-radius: 25px; */
        /* padding-left: 20px; */
        color: azure;
    }
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #242424; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}

/* Tooltip styling*/
  .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    font-size: 15px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;


    /* Position the tooltip */
    position: fixed;
    right: 15em;
    z-index: 1;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }



/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}