* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
    background-color: #000;
}

.radar {
    overflow: hidden!important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: #3b5c44;
    box-shadow: 0 8px 0 #c5c5c5, inset 0 0 100px rgba(0,255,0,0.5);
    display: grid;
    grid-template-columns: auto auto auto auto;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.radar > div {
  border: 1px solid rgba(0, 255, 0, 1);
}

.clockHand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    background: linear-gradient(45deg, #00ff00 0%, transparent 50%);
    animation: animateHand 4s linear infinite;
}

.point {
    position: absolute;
    top: 30%;
    left: 50%;
    border-radius: 50%;
    background-color: #dede3e;
    filter: blur(1px);
    animation: glowPoint 1s linear infinite;
}

.position {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
}

@media only screen and (orientation: landscape) {
    .radar {
    	width: 90vh;
        height: 90vh;
        border: 2vh solid #f7f7f7;
    }

    .point {
        width: 3vh;
        height: 3vh;
    }

    .position {
    	border-left: 4vh solid transparent;
    	border-right: 4vh solid transparent;
    	border-bottom: 8vh solid #f00;
    }
}

@media only screen and (orientation: portrait) {
    .radar {
    	width: 90vw;
        height: 90vw;
        border: 2vw solid #f7f7f7;
    }

    .point {
        width: 3vw;
        height: 3vw;
    }

    .position {
    	border-left: 4vw solid transparent;
    	border-right: 4vw solid transparent;
    	border-bottom: 8vw solid #f00;
    }
}

@keyframes animateHand {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes glowPoint {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}