shared-styles.html

<!-- shared styles for all elements and index.html -->
<dom-module id="shared-styles">
    <template>
        <style>
            .page-title {
                @apply(--paper-font-display2);
                color: black;
            }

            paper-menu a > *,
            paper-menu paper-item > *,
            paper-menu paper-icon-item > * {
                pointer-events: none;
            }

            neon-animatable {
                width: 100%;
                min-height: 100vh;
                overflow: hidden;
                background: #4C4252;
            }

            shape-shifter {
                cursor: pointer;
            }

            .landing {
                background: url(../images/me_vertical_02.png);
                background-size: cover;
                background-position: center;
            }

            @media (min-width: 1000px) {
                .landing {
                    background: url(../images/me_horizontal.png)
                }
            }
            .project_image{
                height:100vh;
                width:100vw;
            }
            .project_detail iron-image{
                --iron-image-width: 100%;
            }
            paper-button.github_button {
                background-color: #808080;
            }

            paper-button.linkedin_button {
                background-color: #0177B5;
            }

            paper-button.email_button {
                background-color: pink;
            }

            .left_button, .right_button{
                --iron-icon-height: 50px;
                --iron-icon-width:50px;
            }
        </style>
    </template>
</dom-module>