@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/eot/IRANSansWeb(FaNum).eot');
    src: url('../fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}

@font-face {
    font-family: Pacifico;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/ttf/Pacifico.ttf');
}

@font-face {
    font-family: Playball;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/ttf/Playball-Regular.ttf');
}

body {
    color: #29374f;
    background-color: #fff;
    margin: 0px;
    padding: 0px;
}

.load-hidden img {
    width: 0px;
    height: 0px;
}

nav {
    padding: 8px;
}

    nav ul {
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        height: 48px;
        padding-left: 5px;
    }

        nav ul li {
            float: left;
            color: lightgray;
            font-weight: bold;
        }

            nav ul li img {
                margin: 0 auto;
                width: 22px;
                position: relative;
                top: 10px;
                height: auto;
                filter: invert(40%) sepia(50%) saturate(500%) hue-rotate(180deg) brightness(40%) contrast(90%);
            }

.navItemContainer {
    transition: transform .2s;
    width: 48px;
    height: 48px;
    transform: scale(1.0);
}

    .navItemContainer:hover {
        transform: scale(1.2);
    }

#project {
    margin-top: 48px;
    padding: 16px;
}

#projectTitle {
    margin: 24px 0px 0px 0px;
    font-size: 48px;
    font-weight: bold;
    font-family: Playball;
}

#projectDescription {
    font-weight: bold;
    margin-top: 24px;
    margin-left: 24px;
    line-height: 2.5;
    font-family: IRANSans;
}

span:not(.sticky) { /* can use another selector, just wanted it to be exceptionally clear what i was referring to here */
    display: inline-block; /* so height and width actually take affect */
    max-width: 80%;
    height: 1em; /* so overflow hidden works and keeps text on one row */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
}

span.sticky {
    display: inline-block;
    width: 20%;
}


a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

#projectYears {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 24px;
    color: #82636b;
    font-weight: bold;
    font-family: Pacifico;
}

#companyLink {
    margin-top: 16px;
    margin-left: 24px;
    color: #E2466F;
    font-weight: bold;
    font-family: IRANSans;
}

.link {
    width: 10px;
    color: cornflowerblue;
    filter: invert(40%) sepia(80%) saturate(500%) hue-rotate( 290deg ) brightness(100%) contrast(90%);
    font-weight: bold;
}

.linkdate {
    filter: invert(40%) sepia(80%) saturate(500%) hue-rotate( 326deg ) brightness(50%) contrast(90%);
}

#projectsContainer {
    bottom: 0px;
    height: auto;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 16px;
}

    #projectsContainer ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

        #projectsContainer ul li {
            float: left;
            color: lightgray;
            font-weight: bold;
            margin-right: 12px;
            margin-left: 12px;
            margin-top: 28px;
            display: inline;
        }

            #projectsContainer ul li div {
                width: 96px;
                height: 100%;
            }

            #projectsContainer ul li img {
                width: 68px;
                height: 68px;
                border-radius: 16px;
                box-shadow: 6px 3px 20px 6px rgb(33 33 33 / 20%);
                -webkit-box-shadow: 6px 3px 20px 6px rgb(33 33 33 / 20%);
                -moz-box-shadow: 6px 3px 20px 6px rgb(33 33 33 / 20%);
            }



#projectsContainerTitle {
    font-family: Playball;
    margin: 0px;
    font-size: 32px;
    padding-left: 28px;
    font-weight: bold;
    color: #854be0
}

#frame {
    height: 100%;
    left: 0px;
    right: 0px;
    width: 100%;
}

#projectImageBackground {
    transition: linear all 0.2s;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(1, -0.07, 1, 1);
    -webkit-transition-delay: 0.2s;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 620px;
    padding: 0px;
    width: 340px;
}

.zoomEffect {
    transition: transform .2s; /* Animation */
}

.languageTitle {
    margin: 0px;
    color: #9c27b0;
    font-size: 24px;
    font-weight: bold;
    font-family: Playball;
}

.language {
    color: #2196f3;
    font-family: IRANSans;
    font-weight: bold;
    font-size: 12px;
    overflow: auto;
    line-height: 1;
}
    .language::before {
        content: '#';
    }