.topBar {
            position: fixed;
            width: 100%;
            height: 5%;
            padding: 0.3% 2%;
            box-sizing: border-box;
            background: rgba(0, 0, 0, 0.6);
            border-bottom: 1px solid #cecece;
            box-shadow: 2px 0px 13px 1px #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .circlemode {
            padding: 1% 2%;
            float: left;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
        }
        .Landscape span:first-child{
            transform: rotate(90deg);
        }

        .circlemode span {
            vertical-align: middle;
            color: rgb(170, 170, 170);
            font-family: verdana;
            font-size: 12px;
        }

        .circlemode i {
            font-size: 25px;
            color: rgb(170, 170, 170);

        }

        .circlemode:hover span,
        .circlemode:hover i {
            color: #fff;
        }

        .active span,
        .active i {
    	color: #fff;
    }