.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

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

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.wrapper {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

#header {
    //background-image: url("images/overlay.png"), url("../../images/Smooth-3.jpg");
    background-image: url("images/overlay.png"), url("../../images/leaves.jpg");
}

#header .main-title {
    color: white;
    font-weight: 800;
}

.title {
    font-weight: 800;
}

.subtitle {
    font-weight: 500;
}

.image.thumb.thumb-github:after {
    margin: -1.25em 0 0 -7em;
    content: "View source on GitHub";
}

.image.thumb.thumb-site:after {
    margin: -1.25em 0 0 -5.5em;
    content: "View in Browser";
}

.image.thumb.thumb-na:after {
    margin: -1.25em 0 0 -7em;
    content: "Source unavailable";
}

.image.thumb.thumb-appstore:after {
    margin: -1.25em 0 0 -7em;
    content: "View on App Store";
}

body {
}

h3 {
    font-weight: 600;
}

p.row-icons {
    font-size: 20px;
    //padding-top: 5px;
}

p.tech {
    padding-top: 10px;
    font-size: 10px;
    font-weight: 700;
    //color: black;
}

a {
    color: #787878;
}

span {
    font-family: sans-serif;
}

.contact-icon {
    margin-bottom: 20px;
}

.main-button {
    margin-top: 5px;
    border-width: 0px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px,
        rgba(0, 0, 0, 0.1) 0px -3px 0px inset,
        rgba(9, 30, 66, 0.05) 0px 0px 0px 1px;
    text-align: left;
}

.button-text {
    text-align: center;
}

.thumb {
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

header {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 54px 55px,
        rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
        rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

/* a.fa-swift:hover {
  color: orangered;
}

a.fa-sketch:hover {
  color: orange;
}

a.fa-database:hover {
  color: black;
}

a.fa-html5:hover {
  color: orangered;
}

a.fa-css3-alt:hover {
  color: cornflowerblue;
}

a.fa-js:hover {
  color: gold;
}

a.fa-node-js:hover {
  color: green;
}

a.fa-bootstrap:hover {
  color: purple;
}

a.fa-mailchimp:hover {
  color: black;
} */