style.css

@font-face {
    font-family: 'KOTRAHOPE';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/KOTRAHOPE.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
* {
    margin: 0px;
    padding: 0px;
}
body {
    background-color: rgb(240, 239, 233);
}
#mapArea, #mapList, footer {
    width: 100%;
    max-width: 1200px;
    position: relative;
    margin: 0 auto;
}
#mapArea a:hover span {
    color: rgb(127, 95, 76)
}
#mapArea #map {
    width: 100%;
    max-width: 1200px;
}
#mapArea .cafe img, #mapArea .restaurant img, #mapArea .culture img {
    position: absolute;
    width: 4%;
}
#mapArea .companyName {
    position: absolute;
    width: auto;
    font-family: KOTRAHOPE;
    font-size: 1.8vw;
    color: #2a2a2a;
    left: 10%;
    top: 72%;
    margin-left: 3%;
    margin-top: 3%;
}
#mapArea #sandhill * { left: 9%; top: 72%; }
#mapArea #forrenu * { left: 30%; top: 49%; }
#mapArea #cafeDune * { left: 54%; top: 21%; }
#mapArea #pettiSantorini * { left: 58%; top: 14%; }
#mapArea #countryroadCoffee * { left: 86%; top: 86%; }
#mapArea #sinduriRestaurant img { left: 30%; top: 58%; }
#mapArea #sinduriRestaurant span { left: 31%; top: 56%; }
#mapArea #fishingVillage img { left: 32%; top: 70%; }
#mapArea #fishingVillage span { left: 33%; top: 67%; }
#mapArea #ohrock img { left: 30%; top: 63%; }
#mapArea #ohrock span { left: 31%; top: 62%; }

#surf {
    position: absolute;
    width: 6%;
}

#mapList ul, #mapList li {
    list-style: none;
}

#mapList li {
    font-family: KOTRAHOPE;
    font-size: 27px;
    background-color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid #2a2a2a;
}
#mapList li.category {
    padding: 10px;
}
#mapList ul li:last-child {
    border-bottom: 0px;
    margin-bottom: 10px;
}
#mapList .category img {
    display: inline-block;
    margin-bottom: -7px;
}
#mapList .cafe .category span {
    padding-bottom: 10px;
}

#mapList a {
    padding: 10px;
    text-decoration: none;
    color: #2a2a2a;
    display: block;
}

#mapList a:hover {
    background-color: rgb(127, 95, 76);
    color: white;
}

footer {
    padding: 80px 0px 30px 0px;
    text-align: center;
}
footer a {
    text-decoration: none;
    color: #2a2a2a;
}

@media (min-width: 1500px) {
    #mapArea .companyName {
        font-size: 27px;
    }
}