responsive menu

[Kracov]

Does anyone know how to make my website menu more responsive, as in mobile friendly? Site: https://kracov.org

Code

@font-face {
font-family: 'Samhain';
src: url('https://kracov.org/fonts/Samhain.eot'); /* IE9 Compat Modes */
src: url('https://kracov.org/fonts/Samhain.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://kracov.org/fonts/Samhain.woff2') format('woff2'), /* Super Modern Browsers */
url('https://kracov.org/fonts/Samhain.woff') format('woff'), /* Pretty Modern Browsers */
url('https://kracov.org/fonts/Samhain.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://kracov.org/fonts/Samhain.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}*/
#menu-kracmenu {
font-family: 'Samhain';
margin-top: 110px;
justify-content: center;
width: 786px;
margin-left: -393px;
}
ul#menu-kracmenu.menu li a {
font-family: 'Samhain';
font-size: 22px;
}
ul#menu-kracmenu.menu ul.sub-menu a {
font-family: 'Verdana';