@font-face {
    font-family: 'source_serif_pro_black';
    src: url('../fonts/sourceserifpro-black-webfont.woff2') format('woff2'),
         url('../fonts/sourceserifpro-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'source_serif_pro_bold';
    src: url('../fonts/sourceserifpro-bold-webfont.woff2') format('woff2'),
         url('../fonts/sourceserifpro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'source_serif_pro_extralight';
    src: url('../fonts/sourceserifpro-extralight-webfont.woff2') format('woff2'),
         url('../fonts/sourceserifpro-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'source_serif_pro_light';
    src: url('../fonts/sourceserifpro-light-webfont.woff2') format('woff2'),
         url('../fonts/sourceserifpro-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'source_serif_pro_regular';
    src: url('../fonts/sourceserifpro-regular-webfont.woff2') format('woff2'),
         url('../fonts/sourceserifpro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'source_serif_pro_semibold';
    src: url('../fonts/sourceserifpro-semibold-webfont.woff2') format('woff2'),
         url('../fonts/sourceserifpro-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
    margin: 0;
    padding: 0;

    font-family: -apple-system, BlinkMacSystemFont, “Helvetica Neue”, sans-serif;
}

html {
    scroll-behavior: smooth;
  }

body {
    background-color: white;
}

ul {
    list-style-position: inside;
    font-size: 16px;
    font-weight: 600;
    margin: 0px;
    color: #aaaaaa;
}

li {
    margin: 10px 0px 10px 0px;
}
li::marker {
    color: #7965D5;
}

h1 {
    font-size: 36px;
    color: #CCCCCC;
    font-weight: 800;
    margin-right: 15px;
}

h2 {
    font-size: 22px;
    color: #7965D5;
    font-weight: 800;
    margin-bottom: 15px;
    margin-top: 40px;
}

a {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

p a {
    color: #7965D5;
    font-family: 'source_serif_pro_regular', serif;
}

/* Add stylings for clicked links */


.link-svg {
    display: inline-block;
    margin-left: -15px;
    cursor: pointer;
    width: 22px;
}

nav {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 7% 0px 0px;
    align-items: flex-end;
    justify-content: end;
    background-color: #FFA442;
}

.nav-element {
    color:white;
    text-decoration: none;
    padding-left: 40px;
    font-weight: 600;
}
.nav-element:hover {
    color: #363636;
}

main {
    max-width: 95%;
    box-sizing: border-box;
    margin: 30px auto 20px auto;
    background-color: #21222D;
    padding: 20px;
    border-radius: 10px;
}

img {
    width: 100%;
    display: block;
}

.banner-image {
    max-inline-size: 100%;
    display: block;
    margin: 0px auto 40px auto;
    border-radius: 10px;
}

code {
    background-color: gray;
    border: 1px solid white;
    padding: 10px;
}

.gradient {
    background: rgb(121,101,213);
    background: radial-gradient(circle, rgba(121,101,213,1) 0%, rgba(11,12,15,1) 100%);
}

.salesdev-gradient {
    background-image: linear-gradient(160deg,#1CD9FF 0,#02F7B2 100%);
}

.paragraph-text {
    color: #c4c4c4;
    white-space: pre-line;
    line-height: 28px;
    font-family: 'source_serif_pro_regular', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
}

.profile-img {
    display: inline-block;

    width: 50px;
    border-radius: 999px;
}

.profile-block {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-top: 30px;
}

.author-date-block {
    margin-left: 15px;
    display: inline-block;
}

.date-stamp {
    color: #999999;
}

.author-stamp {
    font-weight: 700;
    font-size: 18px;
    color: #7965D5;
}

.quote {
    font-style: italic;
    font-weight: 700;
    color: #7965D5;
}

.hidden-url-box {
    position: absolute;
    display: inline-block;
    width: 160px;
    background-color: #14151A;
    font-weight: 600;
    color: hsl(230, 13%, 40%);
    padding: 10px 10px 10px 10px;
    text-align: center;
    border-radius: 7px;
    top: 25px;
    left: -89px;
}

.hidden-url-box:after {
    content: '';
    position: absolute;
     top: -15px;
     left: 50%;
     width: 0;
     height: 0;
     border: 15px solid transparent;
     border-top: 0;
     border-bottom-color: #14151A;
     margin-left: -15px;
     margin-bottom: -15px;
}

.clickable {
    fill: #CCCCCC;
  } .clickable:hover {
    fill: rgb(121, 101, 213);
  }

.rect-select {
    fill: black;
    fill-opacity: 0;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.fade {
    display: none;
}

.article-nav {
    margin-top: 40px;
    color: #c4c4c4;
}

.article-header {
    display: inline;
}

.article-item {
    padding: 10px 0px 10px 0px;
    border-bottom: 1px solid #c4c4c4;
}

.project-block {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 70px 40px 70px 40px;
}

.responsiveGrid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(220px, auto));
    justify-content: center;
    row-gap: 20px;
    column-gap: 20px;
    margin-top: 30px;
}

.responsiveGrid2 {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(220px, auto));
    justify-content: center;
    row-gap: 20px;
    column-gap: 20px;
}

.gridItem {
    display: inline-block;
    max-width: 220px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 0;
    margin: 0;
}

.gridItem2 {
    display: inline-block;
    max-width: 220px;
    box-shadow: rgba(44, 44, 44, 0.4) 0px 2px 8px 0px;
    padding: 0;
    margin: 0;
}

.halfGrid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    column-gap: 20px;
    margin-top: 30px;
}

.inline {
    display: inline-block;
}

.title-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.subtitle {
    position: relative;
    top: 2px;
    font-weight: 800;
    padding: 5px 10px 5px 10px;
    font-size: 14px;
    background-color:#14151A;
    color: white;
    border-radius: 7px;
}

.shadow {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.shadow-dark {
    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
}

.no-wrap {
    white-space: nowrap;
}

.top-spacing {
    margin-top: 20px;
}

.max-width-box {
    max-width: 1000px;
}

.center-profile {
    display: flex;
    width: 100%;
    justify-content: center;
}

.center-profile-pic {
    display: flex;
    margin: auto;
    width: 150px;
    border-radius: 999px;
}

.contact-box {
    position: relative;
    max-inline-size: 700px;
    margin: 40px auto 80px auto;
    background-color: #21222D;
    padding: 80px;
    border-radius: 10px;
}

.jump-button {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 30px;
    right: 30px;
    text-decoration: none;
    font-weight: 800;
    padding: 7px 12px 7px 12px;
    font-size: 16px;
    background-color:white;
    color: black;
    border-radius: 7px;
}

.tagline {
    margin-top: 10px;
    margin-bottom: 50px;
}

.down-arrow {
    color: red;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    stroke: black;
    stroke-width: 30;
}

@media only screen and (max-width : 500px) {
    .contact-box {
        padding: 20px;
        margin: 40px auto 0px auto;
    }

    .project-block {
        padding: 40px 10px 40px 10px;
    }

    .jump-button {
        top: -50px;
        right: 20px;
    }
}

@media only screen and (max-width : 550px) {
    .responsiveGrid {
        grid-template-columns: repeat(auto-fill, minmax(280px, auto));
    }
    
    .responsiveGrid2 {
        grid-template-columns: repeat(auto-fill, minmax(280px, auto));
    }

    .gridItem {
        max-width: 280px;
    }
    
    .gridItem2 {
        max-width: 280px;
    }
}