@font-face {
font-family: 'Monoton';
font-style: normal;
font-weight: 400;
src: local('Monoton'), local('Monoton-Regular'), url(https://fonts.gstatic.com/s/monoton/v8/5h1aiZUrOngCibe4TkHLQg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.board {
text-align: center;
width: 500px;
height: 150px;
position: absolute;
top: 0;
bottom: 5%;
left: 0;
right: 0;
margin: auto;
}
.board h1 {
font-weight: normal;
}
.board span {
font-size: 75px;
font-family: 'Monoton', cursive;
color: #fff;
text-transform: uppercase;
}
@media screen and (max-width:359px){
.board {
width: 250px;
}
.board span {
font-size: 35px;
}
}
@media screen and (min-width:360px) and (max-width:399px){
.board {
width: 300px;
}
.board span {
font-size: 45px;
}
}
@media screen and (min-width:400px) and (max-width:479px){
.board {
width: 350px;
}
.board span {
font-size: 55px;
}
}
@media screen and (min-width:480px) and (max-width:639px){
.board {
width: 400px;
}
.board span {
font-size: 65px;
}
}
@media screen and (min-width:640px) and (max-width:799px){
.board {
width: 450px;
}
.board span {
font-size: 70px;
}
}
.board_wrap {
position:relative;
}