@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

:root {
    --color-development: #77B5F8;
    --color-completed: #85C270;
    --color-prototype: #F28F3B;
}


body {
    font-family: 'Barlow', 'Proxima Nova', sans-serif;
    width: 41%;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #f5f5f5;
}

h1 {
    font-family: 'Proxima Nova', sans-serif;
    color: #333;
    font-size: 1.3em;
    margin: 0;
}

p {
    font-family: 'Barlow', sans-serif;
    color: #666;
    font-size: 1.1em;
    margin: 0;
    text-align: justify;
}

hr {
    border: none;
    height: 2px;
    width: 100%;
    background-color: #888;
    margin: 10px auto 20px 0;
}


.project-card {
    padding: 15px 10px;
    border-radius: 2.5px;
    margin: 20px auto 10px auto;
    box-sizing: border-box;
    width: calc(100% + 20px);
    margin-left: -10px;
}

.project-title {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    color: #333;
}

.project-brief {
    font-family: 'Barlow', sans-serif;
    font-size: 1.1em;
    color: #666;
}

.project-tags {
    margin-top: 10px;
    font-family: 'Barlow', sans-serif;
    font-size: 1em;
    color: #999;
    text-align: right;
}

.project-card:hover {
    background-color: #e0e0e0;
    cursor: pointer;
}