@font-face {
    font-family:'BeVietnamPro-Black';
    font-style: normal;
    font-weight: normal;
    src: local('BeVietnamPro-Black'), local('BeVietnamPro-Black'),
    url(fonts/BeVietnamPro-Black.ttf) format('ttf'),
    url(fonts/BeVietnamPro-Black.woff) format('woff'),
    url(fonts/BeVietnamPro-Black.woff2) format('woff2');
}
@font-face {
    font-family:'BeVietnamPro-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('BeVietnamPro-Bold'), local('BeVietnamPro-Bold'),
    url(fonts/BeVietnamPro-Bold.ttf) format('ttf'),
    url(fonts/BeVietnamPro-Bold.woff) format('woff'),
    url(fonts/BeVietnamPro-Bold.woff2) format('woff2');
}
@font-face {
    font-family:'BeVietnamPro-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('BeVietnamPro-Regular'), local('BeVietnamPro-Regular'),
    url(fonts/BeVietnamPro-Regular.ttf) format('ttf'),
    url(fonts/BeVietnamPro-Regular.woff) format('woff'),
    url(fonts/BeVietnamPro-Regular.woff2) format('woff2');
}

.container{
    font-family: 'BeVietnamPro-Regular';
    margin: 100px 0 0 50%;
    transform: translateX(-50%);
    width: 70%;
}
.container hr{
    margin: 50px 0;
    border: 2px solid black;
}
.container h1{
    margin-block: 0;
    font-size: 3em;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

@media screen and (max-width: 1280px) {
    .container hr{ border: 1px solid black; }
    .container h1{ font-size: 2.5em; }
}
@media screen and (max-width: 1024px) {
    .container hr{ margin: 35px 0; }
    .container{ width: 80%; }
}
@media screen and (max-width: 780px) {
    .container{ width: 90%; }
    .container hr{ margin: 25px 0; }
    .container h1{ font-size: 2em; }
}