a:hover{text-decoration: none;}
.content {
    position: relative;
    text-align: center;
    opacity: 0.93;
    /* width: 110vh; */
    width: 100%;
    padding: 5% 0;
    height: 100vh;
    /* position: fixed; */
    /* left: calc(50vw - 37.5vh); */
    background-color: #035B8A;
    margin: 0 auto;
}


.title {
    /* text-align: center; */
    /* width: 35vh; */
    /* margin: 0 20vh; */
    color: white;
    font-size: calc(5 * var(--vh));
    /* margin-top: 5vh; */
    /* margin-bottom: 1vh; */
    padding: 1%;
    cursor: default;
    text-align: center;
}

.player-list {
    position: relative;
    /* width: 35vh; */
    /* margin: 0 20vh; */
    margin: 0 auto;
    border: none;
    padding: 0;
    min-height: calc(45 * var(--vh));
    overflow: hidden auto;
    text-align: center;
	
	float: left;
	width: calc(35 * var(--vh));
	margin-left: calc(50vw - 40 * var(--vh));
	margin-right: calc(5 * var(--vh));
}

.player {
    margin: 0 auto;
    width: calc(35 * var(--vh));
    padding: 0px calc(2 * var(--vh));
    background-color: white;
    height: calc(4 * var(--vh));
    font-size: calc(2.5 * var(--vh));
    margin-top: calc(1 * var(--vh));
    margin-bottom: calc(1 * var(--vh));
    border-radius: calc(0.5 * var(--vh));
    line-height: calc(4 * var(--vh));
    transition: 0.1s background-color;
    color: #5B6D30;
    cursor: pointer;
    text-align: center;
}

.player:hover {
    background-color: #CCC;
}

.player:active {
    background-color: #DDD;
}

.player div {
    float: left;
    opacity: 0;
    transition: 0.1s opacity, 0.1s color;
    font-weight: bolder;
    color: black;
}

.player:hover div {
    opacity: 0.7;
}

.player:active div {
    opacity: 1;
    color: red;
}

.nameinput {
    border: none;
    padding: 0 calc(2 * var(--vh));
    background-color: #DDDDDD;
    height: calc(5 * var(--vh));
    font-size: calc(2.5 * var(--vh));
    /*margin-bottom: 1vh;*/
    border-radius: calc(0.5 * var(--vh));
    line-height: calc(4 * var(--vh));
    transition: 0.1s background-color;
    outline: none;
    color: black;
    display: block;
    margin: calc(2 * var(--vh)) auto calc(1 * var(--vh)) auto;
    position: relative;
    text-align: center;
	
	
	float: right;
    width: calc(35 * var(--vh));
	margin-right: calc(50vw - 40 * var(--vh));
	margin-left: calc(5 * var(--vh));
}

.content input[type=button] {
    border: none;
    padding: 0;
    line-height: calc(5 * var(--vh));
    height: calc(5 * var(--vh));
    font-size: calc(4 * var(--vh));
    margin-top: calc(1 * var(--vh));
    margin-bottom: calc(1 * var(--vh));
    border-radius: calc(1 * var(--vh));
	
	float: right;
    width: calc(35 * var(--vh));
	margin-right: calc(50vw - 40 * var(--vh));
	margin-left: calc(5 * var(--vh));
}


.addplayer {
    color: white;
    background-color: #53AE32;
    display: block;
    margin: 0px auto;
	transition: 0.1s background-color;
}

.addplayer:hover {
    background-color: #459029;
}

.addplayer:active {
    background-color: #35751e;
}


.playbtn {
    margin: 0 calc(20 * var(--vh));
    color: #0B5C78;
    background-color: #FCEE21;
	transition: 0.1s background-color;
}


.playbtn:hover {
    background-color: #e2d513;
}

.playbtn:hover {
    background-color: #cabe0e;
}


.playersbox {
	padding: calc(3 * var(--vh)) 0;
}

.playersbox > *:nth-child(1) {
	color: white;
    font-size: calc(5 * var(--vh));
    padding: 0;
    cursor: default;
    text-align: center;
	
	
	float: right;
	width: calc(35 * var(--vh));
	margin-right: calc(50vw - 40 * var(--vh));
	margin-left: calc(5 * var(--vh));
}