<div class="banner">
    <div class="top">
        <h1>George Spake</h1>
    </div>

    <div class="logo">
        <div class="logo-container">
            <svg class="hexagon-fill-2 large" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 173.20508075688772 200"><defs><pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern></defs> <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path></svg>
        </div>

        <div class="gs-logo">
            <img src="https://georgespake.com/wp-content/uploads/2020/04/gs.png" />
        </div>
        <div class="banner-bottom-bg"></div>
    </div>

    <div class="bottom">
        <h2>Software Engineer . Graphic Designer . Organizer <br /> Speaker . Musician</h2>
    </div>

    <div class="about-button-container">
        <a href="https://georgespake.com/about/">About George</a>
    </div>
</div>

<div class="gs-work-cards-container">
    <div class="gs-work-cards-background"></div>
    <div class="grid-container">
        <a class="gs-work-card github" href="https://github.com/gpspake">
            <div class="grid-container">
                <div class="top-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="bottom-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 120 173.20508075688772 82">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="icon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>

                    </div>
                </div>

                <div class="top-bg"></div>

                <h2>Code</h2>

                <div class="icon">
                    <div class="hex-container">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                             id="Layer_1" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve"><path d="M15.5 22.7h-.1l-.1-.1V22v-2.5c0-.7-.1-1.3-.4-1.8 2.3-.4 4.8-1.6 4.8-6.1 0-1.2-.4-2.3-1.1-3.2.2-.6.3-1.7-.2-3.1l-.3-.3s-.2-.1-.4-.1c-.6 0-1.5.2-3 1.2-.8-.1-1.7-.3-2.7-.3-1 0-1.9.1-2.8.3C7.8 5.2 6.8 5 6.2 5c-.2 0-.3.1-.4.1-.1 0-.3.2-.3.3-.5 1.4-.4 2.5-.2 3.1-.7.9-1.1 2-1.1 3.2 0 4.4 2.6 5.6 4.8 6.1-.1.2-.2.5-.3.8-.2.1-.5.2-.9.2s-.8-.1-1.1-.4l-.1-.1c-.1-.1-.1-.2-.2-.2l-.1-.1-.1-.1c0-.1-.8-1.3-2.2-1.4-.5 0-.9.2-1 .5-.2.5.4.9.7 1.1 0 0 .6.3 1 1.4.2.7 1.1 2 3.2 2h.7v1.4l-.1.1s-.1 0 0 0C4 21.2 1 17 1 12.3c0-6.1 4.9-11 11-11s11 4.9 11 11c0 4.7-3 8.9-7.5 10.4z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </a>

        <a class="gs-work-card projects" href="https://georgespake.com/projects">
            <div class="grid-container">
                <div class="top-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="bottom-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 120 173.20508075688772 82">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="icon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>

                    </div>
                </div>

                <div class="top-bg"></div>

                <h2>Projects</h2>

                <div class="icon">
                    <div class="hex-container">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tools" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z" class=""></path></svg>
                    </div>
                </div>
            </div>

        </a>

        <a class="gs-work-card blog" href="https://georgespake.com/blog">
            <div class="grid-container">
                <div class="top-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="bottom-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 120 173.20508075688772 82">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="icon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="top-bg"></div>

                <h2>Blog</h2>

                <div class="icon">
                    <div class="hex-container">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-book fa-w-14 fa-3x"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6h234c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6h234c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z" class=""></path></svg>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="gs-social-cards-container">
    <div class="outer-grid-container">
        <a class="social-card follow" href="https://twitter.com/georgespake">
            <div class="social-card-grid-container">
                <div class="social-card-bg-fill"></div>

                <div class="left-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon">
                    <svg id="Logo_FIXED" data-name="Logo — FIXED" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><title>Twitter_Logo_White</title><rect class="cls-1" width="400" height="400"/><path class="cls-2" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"/></svg>
                </div>

                <div class="right-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="gs-social-button-text">
                    <p href="#">Follow</p>
                </div>
            </div>
        </a>
        <a class="social-card connect" href="https://www.linkedin.com/in/georgespake">
            <div class="social-card-grid-container">
                <div class="social-card-bg-fill"></div>

                <div class="left-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>


                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
                </div>

                <div class="right-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="gs-social-button-text">
                    <p href="#">Connect</p>
                </div>
            </div>
        </a>
        <a class="social-card contact" href="https://georgespake.com/contact">
            <div class="social-card-grid-container">
                <div class="social-card-bg-fill"></div>

                <div class="left-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon">
                    <svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512"
                         xmlns="http://www.w3.org/2000/svg">
                        <path d="m512 203.06v-.045c0-.427-.024-.85-.059-1.271-.01-.115-.025-.229-.037-.344-.036-.33-.082-.657-.139-.981-.021-.122-.042-.244-.066-.365-.08-.395-.171-.787-.282-1.172-.011-.038-.02-.077-.031-.115-.117-.394-.253-.781-.401-1.163-.056-.146-.118-.289-.179-.434-.109-.258-.226-.513-.35-.764-.072-.146-.141-.293-.217-.437-.187-.351-.386-.695-.6-1.031-.08-.125-.168-.245-.252-.368-.167-.245-.34-.485-.521-.719-.097-.125-.194-.249-.295-.372-.263-.319-.535-.631-.825-.928-.023-.023-.045-.047-.068-.07-.31-.315-.64-.612-.979-.9-.042-.036-.078-.076-.121-.111l-25.578-21.225v-65.229c0-19.299-15.701-35-35-35h-85.776l-69.1-57.345c-20.354-16.888-49.896-16.888-70.248 0l-69.1 57.344h-85.776c-19.299 0-35 15.701-35 35v65.229l-25.579 21.228c-.042.035-.079.075-.121.111-.339.288-.669.585-.979.9-.023.023-.045.047-.068.07-.289.297-.562.609-.825.928-.101.122-.198.247-.295.372-.181.235-.354.475-.521.719-.084.123-.172.243-.252.368-.214.335-.413.679-.6 1.031-.077.144-.146.291-.217.437-.124.251-.24.506-.35.764-.061.144-.123.288-.179.434-.148.382-.285.768-.401 1.163-.011.038-.02.076-.031.115-.111.385-.202.777-.282 1.172-.024.122-.045.243-.066.365-.057.324-.103.651-.139.981-.012.115-.027.229-.037.344-.034.419-.058.842-.058 1.269v.045.008 253.927c0 15.718 6.638 29.906 17.246 39.939.301.301.603.599.925.87 9.757 8.814 22.676 14.19 36.829 14.19h402c14.154 0 27.074-5.377 36.832-14.193.319-.27.619-.565.918-.864 10.61-10.033 17.25-24.223 17.25-39.943v-253.926c0-.002 0-.005 0-.008zm-446-103.045h380c2.757 0 5 2.243 5 5v116.682l-8.488 7.044-170.546 141.533c-9.251 7.677-22.681 7.676-31.932 0l-170.546-141.532-8.488-7.045v-116.682c0-2.757 2.243-5 5-5zm-36 356.98v-222.04l6.452 5.355c.004.003.008.007.012.01l146.469 121.551-151.397 103.752c-.993-2.69-1.536-5.597-1.536-8.628zm176.937-75.204 13.939 11.568c20.352 16.89 49.896 16.889 70.248 0l13.939-11.568 146.22 100.204h-390.567zm122.13-19.919 146.468-121.552c.004-.003.008-.007.012-.01l6.452-5.355v222.04c0 3.031-.543 5.938-1.536 8.628zm-89.033-326.114c9.251-7.677 22.681-7.677 31.932 0l41.281 34.258h-114.494z"/>
                        <path d="m131.5 164.995c0 8.284 6.716 15 15 15h142c8.284 0 15-6.716 15-15s-6.716-15-15-15h-142c-8.284 0-15 6.716-15 15z"/>
                        <path d="m146.5 239.995h219c6.988 0 12.843-4.786 14.509-11.254.309-1.2.491-2.45.491-3.746 0-8.284-6.716-15-15-15h-219c-8.284 0-15 6.716-15 15 0 1.296.182 2.547.491 3.746 1.666 6.469 7.521 11.254 14.509 11.254z"/>
                    </svg>
                </div>

                <div class="right-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="gs-social-button-text">
                    <p href="#">Contact</p>
                </div>
            </div>
        </a>
    </div>
</div>


<div class="footer">
    <a class="back-to-top-link" href="#site-header">
        <div class="gs-logo">
            <img src="https://georgespake.com/wp-content/uploads/2020/04/gs-red.png" />
        </div>
    </a>
</div>

@import url(https://fonts.googleapis.com/css?family=Oswald);

body {
  margin: 0;
  &.home {
    background: #fff;
  }
}
html {scroll-behavior: smooth;}

// banner
.banner {
  text-align: center;

  h1 {
    font-family: "Oswald";
    font-size: 5em;
    color: #444;
    padding: 0 1em;
  }
  
  @media screen and (max-width: 600px) {
    h1 {
      font-size: 3em;
    }
  }
  

  .bottom {

    background: #1D2557;
    color: #fff;

    h2 {
      font-family: "Oswald";
      font-weight: normal;
      padding: 0 1em;
      margin: 0;
      font-size: 2.5em;
    }
  }

  .about-button-container {
    background: #1D2557;
    height: 16em;
    display: flex;
    align-items: center;
    justify-content: center;

    a {
      text-decoration: none;
      color: #fff;
      padding: 1em;
      font-size: 1.5em;
      font-family: 'Oswald';
      white-space: no-wrap;
      
      background: tomato;
      background: -webkit-linear-gradient(top left, #1D2557 0%, #53e3a6 100%);
      background: -moz-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
      background: -o-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
      background: linear-gradient(to bottom right, tomato 0%, #aa0f57 100%);
      transition-duration: .2s;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .logo {
    width:100%;
    position: relative;
  }

  .logo .gs-logo {
    top:0;
    fill: #1D2557;
    width: 100%;
    position: absolute;
    z-index: 5;
    height: 100%;
    img {
      width: 85%;
      max-width:450px;
      z-index: 6;
      display: inline-block;
      top: 50%;
      transform: translateY(-50%);
      position: relative;
    }
  }

  .logo .logo-container {
    z-index: 1;
    position: relative;

    svg {
      max-width: 500px;
      margin:auto;
      fill: #fff;
    }
  }

  .logo .banner-bottom-bg {
    width: 100%;
    background: #1D2557;
    height: 50%;
    position: absolute;
    bottom: 0;
  }
  .bottom {
    padding-top: 5em;
  }
}

// work cards
.gs-work-cards-container {
  cursor: pointer;
  position: relative;

  .gs-work-cards-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1D2557;
    z-index: -1;
  }

  .grid-container {
    display: grid;
    margin: auto;
  }

  .gs-work-card {
    width: 100%;
    margin: auto;
    padding-top: 1em;
    transition-duration: .2s;
    text-decoration: none;

    .hex-container {
      width: calc(100% - 50px);
      margin: auto;
    }
    svg {
      fill: #fff;
    }

    h2 {
      grid-row: row 4;
      background: linear-gradient(to left, #4c61da 50%, #2f3c89 50%);
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 50px;
      text-align: center;
      position: relative;
      margin: auto;
      color: #fff;
      transition-duration: .2s;
      font-family: Oswald, sans-serif;
      font-weight: normal;

      &:before, &:after {
        width: 50px;
        height: 80px;
        content: '';
        display: block;
        transform: skewY(20deg);
        position: absolute;
        z-index: -1;
      }

      &:before {
        top: 10px;
        left: 0;
        background-color: #4c61da;
      }

      &:after {
        top: -10px;
        right: 0;
        background-color: #2f3c89;
      }
    }

    @mixin hover($name) {

      &.#{$name}:hover {
        padding-top: 0;
        transition-duration: .2s;

        .icon-bg {
          .hex-container {
            width: calc(100% - 48px);
            transition-duration: .2s;
          }
        }

        h2 {
          -webkit-box-shadow: 0 25px 19px -21px #333;
          -moz-box-shadow: 0 25px 19px -21px #333;
          box-shadow: 0 25px 19px -21px #333;
          transition-duration: .2s;
        }

        .icon {
          transform: rotate(5deg);
          transition-duration: .2s;
        }
      }
    }

    @include hover(github);
    @include hover(projects);
    @include hover(blog);

    .top-hexagon-bg, .icon-bg, .icon, .top-bg, h2, .bottom-hexagon-bg {
      grid-column: col 1;
    }

    .top-hexagon-bg {
      grid-row-start: row 1;
      grid-row-end: row 3;
      align-self: center;
    }

    .icon-bg {
      grid-row: row 1;
      grid-row-end: row 3;
      align-self: center;

      .hex-container {
        position: relative;
        width: calc(100% - 80px);
        margin: auto;
        transition-duration: .2s;
      }

      svg {
        fill: #2f3c89;
      }
    }

    .icon {
      grid-row-start: row 1;
      grid-row-end: row 3;
      width: 70%;
      margin: auto;
      transition-duration: .2s;

      svg {
        position: relative;
      }
    }

    .top-bg {
      grid-row-start: row 2;
      grid-row-end: row 6;
      background: #fff;
      width: calc(100% - 50px);
      margin: auto;
      height: 100%;
    }

    .bottom-bg {
      grid-row-start: row 5;
      grid-row-end: row 6;
      background: #fff;
      width: calc(100% - 50px);
      margin: auto;
      height: 100%;
    }

    .bottom-hexagon-bg {
      grid-row: 6;
    }

    &.blog, &.projects {
      text-align: center;
      .icon svg {
        width: 60%;
        margin: auto;
      }
    }
  }

  // small
  @media screen and (max-width: 950px) {
    .grid-container {
      display: grid;
      grid-template-rows: [row] 1fr [row] 1fr [row] 1fr;
      grid-template-columns: [column] 1fr;
      row-gap: 0;
      max-width: 500px;
      width:90%;
      margin: auto;
    }

    .gs-work-card {
      .grid-container {
        grid-template-rows:  [row] 1fr [row] 1fr [row] 10px [row] 60px [row] 0 [row] 1fr;
        grid-template-columns: [col] 1fr;
        cursor: pointer;
        row-gap: 0;
      }

      h2 {
        grid-row: row 4;
        background: linear-gradient(to left, #4c61da 50%, #2f3c89 50%);
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 40px;

        &:before, &:after {
          width: 50px;
          height: 60px;
        }
      }
    }
  }

  // medium
  @media screen and (min-width: 950px) and (max-width: 1375px) {
    .grid-container {
      display: grid;
      grid-template-rows: [row] 1fr [row] 5em [row] 1fr [row] 5em;
      grid-template-columns: 0px [column] 1fr [column] 1fr;
      column-gap: 3em;
      max-width: 900px;
      margin: auto;
    }

    .gs-work-card {
      &.github {
        grid-row-start: row 1;
        grid-row-end: row 3;
        grid-column-start: column 1;
        grid-column-end: column 2;
      }

      &.projects {
        grid-row-start: row 1;
        grid-row-end: row 3;
        grid-column: column 2;
      }

      &.blog {
        grid-row-start: row 2;
        grid-row-end: row 3;
        grid-column-start: column 1;
        grid-column-end: column 3;
        padding-right: 3em;
        width: 50%;
      }

      .grid-container {
        grid-template-rows:  [row] 1fr [row] 1fr [row] 10px [row] 60px [row] 0px [row] 1fr;
        grid-template-columns: [col] 1fr;
        cursor: pointer;
        width: 100%;
      }

      h2 {
        grid-row: row 4;
        background: linear-gradient(to left, #4c61da 50%, #2f3c89 50%);
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 40px;

        &:before, &:after {
          width: 50px;
          height: 60px;
        }
      }
    }
  }

  // large
  @media screen and (min-width: 1375px) {
    .grid-container {
      grid-template-rows: [row] 100%;
      grid-template-columns: [column] 1fr [column] 1fr [column] 1fr;
      column-gap: 3em;
      width: 90%;
      max-width: 1200px;
    }

    .gs-work-card {
      .grid-container {
        grid-template-rows:  [row] 1fr [row] 1fr [row] 60px [row] 80px [row] 10px [row] 1fr;
        grid-template-columns: [col] 1fr;
        cursor: pointer;
        width: 100%;
      }
    }
  }
}

// social buttons
.gs-social-cards-container {
  $primary-color: #2f3c89;
  $connect-color: #017bb6;
  $follow-color: #1da1f2;

  padding: 3em 0;
  width: 100%;
  background: #1D2557;
  background: -webkit-linear-gradient(top left, #1D2557 0%, #53e3a6 100%);
  background: -moz-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
  background: -o-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
  background: linear-gradient(to bottom right, #1D2557 0%, #5399e3 100%);

  .outer-grid-container {
    display: grid;
    grid-template-columns: [column] 1fr;
    grid-template-rows: [row] 100px;
    width: 90%;
    max-width: 450px;
    row-gap: 2em;
    margin: auto;
    min-width: 300px;
  }

  .social-card {
    text-decoration: none;
    
    .social-card-grid-container {
      display: grid;
      grid-template-columns: [column] 58px [column] 58px [column] auto [column] 58px [column] 68px;
      grid-template-rows: [row] 100px;
      min-width: 275px;
      cursor: pointer;
    }

    .social-card-bg-fill, .gs-social-button-text, .left-hex-bg, .icon-hex-bg, .icon, .right-hex-bg {
      grid-row: row 1;
    }

    .left-hex-bg, .icon-hex-bg, .right-hex-bg, .icon {
      height: 100px;

      svg {
        fill: #fff;
        height: 100%;
        transition-duration: .2s;
      }
    }

    .social-card-bg-fill {
      background: #fff;
      grid-column-start: column 2;
      grid-column-end: column -1;
      transition-duration: .2s;
    }

    .gs-social-button-text {
      grid-column-start: column 3;
      grid-column-end: column -1;
      text-align: center;

      p {
        font-family: Oswald;
        line-height: 100px;
        margin: 0;
        transition-duration: .2s;
        padding: 0 10px;
        color: $primary-color;
      }
    }

    .left-hex-bg {
      grid-column-start: column 1;
      grid-column-end: column 3;
    }

    .icon-hex-bg {
      grid-column-start: column 1;
      grid-column-end: column 3;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        margin-left: -2px;
        height: 85%;
        fill: $primary-color;
      }
    }

    .icon {
      grid-column-start: column 1;
      grid-column-end: column 3;
      display: flex;
      justify-content: center;
      align-items: center;
      svg {
        width: 40%;
      }
    }

    &.follow {
      .icon-hex-bg svg {
        fill: $follow-color;
      }
      .icon svg {
        width:50%;
      }
      .gs-social-button-text p {
        color: $follow-color;
      }
    }

    &.connect {
      .icon-hex-bg svg {
        fill: $connect-color;
      }
      .gs-social-button-text p {
        color: $connect-color;
      }
    }

    .right-hex-bg {
      grid-column: column 4 / span 2;
    }

    &:hover {
      .icon-hex-bg svg {
        height: 100%;
        transition-duration: .2s;
      }


      .icon svg {
        transform: rotate(7deg);
        transition-duration: .2s;
      }

      .right-hex-bg svg {
        padding-left: 10px;
        transition-duration: .2s;
      }

      .gs-social-button-text p {
        margin-left: 10px;
        transition-duration: .2s;
      }
      
      .social-card-bg-fill {
        -webkit-box-shadow: 0px 10px 30px -15px #060606;
        -moz-box-shadow: 0px 10px 30px -15px #060606;
        box-shadow: 0px 10px 30px -15px #060606;
        transition-duration: .2s;
      }
    }
  }

  @media screen and (max-width: 350px) {
    .social-card {
      .gs-social-button-text p {
        font-size: 2em;
        transition-duration: .2s;
      }

      .icon-hex-bg svg {
        margin-left: -4px;
      }
    }
  }

  @media screen and (min-width: 500px) {
    .gs-social-button-text p {
      font-size: 4em;
    }
  }
  
  @media screen and (max-width: 500px) {
    .gs-social-button-text p {
      font-size: 3em;
    }
  }
  @media screen and (max-width: 420px) {
    .gs-social-button-text p {
      font-size: 2.5em;
      transition-duration: .2s;
    }
  }

  @media screen and (max-width: 400px) {
    .outer-grid-container {
      grid-template-rows: [row] 80px;
    }

    .social-card {
      .social-card-grid-container {
        display: grid;
        grid-template-columns: [column] 48px [column] 48px [column] auto [column] 48px [column] 58px;
        grid-template-rows: [row] 80px;
      }

      .gs-social-button-text p {
        line-height: 80px;
        transition-duration: .2s;
      }

      .left-hex-bg, .right-hex-bg, .icon-hex-bg, .icon {
        height: 80px;
      }

      .icon-hex-bg svg {
        margin-left: -4px;
        height: 85%;
        transition-duration: .2s;
      }
    }
  }
}

// footer
.footer {
  background: -webkit-linear-gradient(top left, #1D2557 0%, #53e3a6 100%);
  background: -moz-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
  background: -o-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
  background: linear-gradient(to bottom right, #2e3679  0%, #000 100%);

  width:100%;
  border-top: 1px solid #2273ca;
  text-align: center;
  font-family: "Oswald";
  padding: 2em;
  .back-to-top-link {
    text-decoration: none;
    color: #e40c49;
    font-size: 1.5em;
    padding-bottom: 1em;

    display: inline-block;
    .gs-logo {
      margin-top: 1em;
    }
  }
  .gs-logo img {
    width:100px;
    margin: auto;
  }
}