/* Fonts */

@font-face {
    font-family: LeSuperSerif;
    src: url("../fonts/LeSuperType-Regular.ttf");
}

@font-face {
    font-family: ZillaSlab;
    src: url("../fonts/ZillaSlab-Regular.ttf");
}

@font-face {
    font-family: JosefinSlab-Regular;
    src: url("../fonts/JosefinSlab-Regular.ttf");
}

@font-face {
    font-family: JosefinSlab-Light;
    src: url("../fonts/JosefinSlab-Light.ttf");
}

@font-face {
    font-family: Consuela;
    src: url("../fonts/Consuela-Script.ttf");
}

/* Generals */

html {
    font-size: 20px;
}

body {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    color: #313131;
    background-color: #313131;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

header {
    text-align: center;
}

header #logo {
    width: 15vw;
    padding: 1.5rem 0;
}

header h1,
header h2 {
    margin: 0 auto;
    font-family: LeSuperSerif;
    font-weight: 600;
    cursor: default;
}

header h1 {
    font-size: 2rem;
    color: #fbf8cd;
}

header h2 {
    font-size: 0.875rem;
    color: #e75e5e;
}

#works {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    font-family: JosefinSlab-Regular;
    padding: 2.5rem 15vw 2.5rem calc(15vw + 2.5vw);
    box-sizing: border-box;
}

.work {
    width: calc(33.3% - 1.25rem);
    height: 15rem;
    /* width: 420px; */
    /* height: 300px; */
    box-sizing: border-box;
    border-radius: 0.25rem;
    margin-bottom: 2.5rem;
    background-position: center;
    background-size: cover;
    box-shadow: 0 10px 10px -5px rgb(0 0 0 / 25%);
}

.parallaxHover__outter {
    margin-bottom: 1rem;
}