.mode-select {
   
    width: 25%;
    height: 18%;
    
}

#game {
	border-radius: 12px;
	
}

html, body {margin: 5px; height: 100%; overflow: hidden}

.score-name {
    max-width: 60px;
    font-size: 9px;
}

#cmg-splash {
	width: 100%;
	top: 40px;
	left: 0;
	position: absolute;
}

#arcade {
	font-size: 50px;
}

.nav-button:hover{
	background-color: #cccccc;
}

.nav-button {
	position: absolute;
	border-radius: 18px;
    font-size: 28px;
	transition: background-color .2s;
	background-color: rgb(221,221,221);
	opacity: .8;
}
#name-input {
	position: absolute;
    top: 84%;
    font-size: 22px;
    width: 24%;
    left: 65%;
}
#score-button, #score-back {
	width: 80%;
	left: 10%;
	top: 82%;
}
#tomenu {
    position: absolute;
    bottom: 40px;
    right: 40px;
}
#restart {
    position: absolute;
    bottom: 40px;
    left: 40px;
}
.score-table {
	position: absolute;
	font-family: arial;
	font-size: 12px;
	top: 15%;
	left: 8%;
	background: rgba(128, 128, 128, .8);
	text-align: center;
	width: 21%;
    max-width: 21%;
}

.score-name-inner {
	max-width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.own-score {
	background-color: rgba(150, 150, 128, .8);
}

#score-title {
	font-size: 42px;
	position: absolute;
	width: 100%;
	text-align: center;
	color: gray;
	font-family: arial;
	top: 5%;
}

#main {
	width: 540px;
	height: 440px;
	position: relative;
	margin: auto;
}

#logo {
	background: url(snakeout-logo.png);
	width: 100%;
	position: absolute;
	top: 8%;
	left: 0;
	height: 25%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#mute {
	position: absolute;
    right: .3%;
    top: .3%;
    width: 20px;
    padding: 0;
    border-radius: 100px;
    border-color: gray;
}

.arrow-button {
	border-radius: 100% 5% 5% 5%;
	width: 200px;
	height: 200px;
	font-size: 90px;
	transform-origin: bottom right;
	position: absolute;
	
	right: 50%;
	top: 450px;
}
.arrow-button:active {
	background-color: #aaaaaa;
}
button:focus {outline:0;}
#top-arrow {
	transform: rotate(45deg);
}
#right-arrow {
	transform: rotate(135deg);
}
#bottom-arrow {
	transform: rotate(225deg);
}
#left-arrow {
	transform: rotate(315deg);
}