@font-face {
    font-family: "nunito-sans";
    src: url("../font/NunitoSans-Regular.ttf");
}

@font-face {
    font-family: "nunito-sans-bold";
    src: url("../font/NunitoSans-Bold.ttf");
}

@font-face {
    font-family: "nunito-sans-lite";
    src: url("../font/NunitoSans-Light.ttf");
}

@font-face {
    font-family: "nunito-sans-black";
    src: url("../font/NunitoSans-Black.ttf");
}

:root {
    --color-white: #dfdfe5;
    --color-accent: #bfb48f;
}

* {
    box-sizing: border-box;
    font-family: nunito-sans;
}

p, h3 {
    margin: 20px 0;
    /* padding: auto; */
}

.do-section.credit {
    padding-top: 100px;
}

.do-credits-container {
    text-align: center;
    color: var(--color-white);
    padding: 0 10px;
}

.do-credits-container img {
    max-width: 400px;
}

.do-credits-container h2 {
    letter-spacing: 1px;
    font-family: "nunito-sans-black";
}

.do-credits-section {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    border-bottom: solid 1px var(--color-accent);
}

.do-credits-section h3:before {
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../image/public/decor-04.png");
    transform: rotateZ(180deg);
    top: 0;
    right: 0;
}

.do-credits-section h3:after {
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../image/public/decor-04.png");
    bottom: 0;
    top: 0;
}

.do-credits-section h3 {
    font-family: "nunito-sans-bold";
}

.do-credits-section p {
    font-family: "nunito-sans-lite";
}