.main-menu{display:flex;justify-content:center;align-items:center;height:100%;background-color:#d6d6d6}.menu-items{display:flex;flex-direction:column;justify-content:space-between;height:300px}.menu-items a{color:#5f9ea0;text-decoration:none;list-style:none;font-size:30px;background-image:linear-gradient(#5f9ea0,#5f9ea0);background-position:0 100%;background-size:0 2px;background-repeat:no-repeat;transition:background-size .3s,background-position 0s .3s}.menu-items a:hover{background-position:100% 100%;background-size:100% 2px}.circle{background-color:#5f9ea0;align-self:center;height:300px;width:300px;border-radius:100%;display:flex;justify-content:space-around;align-items:center;color:#fff}.main-area{height:100%}.buttons,.main-area{display:flex;justify-content:center;width:100%}.buttons{margin-top:30px;vertical-align:center;align-items:center;flex-wrap:wrap}.controls{justify-content:center;display:flex;align-items:center}.buttons>button{background-color:#5f9ea0;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:10px}.left-side{width:50%;display:flex;justify-content:space-between;flex-direction:column;align-items:center;background-color:#eee;height:100%}.circle-title{text-align:center}.right-side{width:50%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.good-text{color:green}.bad-text{color:red}.bold{font-weight:700}.skip-button{width:100%;height:50px;background-color:teal;color:#fff}.left-footer{width:100%}@media (max-width:769px){.left-side,.right-side{width:100%;height:50%}.controls{flex-wrap:wrap}.right-side{overflow-x:auto}}body,html{height:100%;width:100%}body{margin:0}#app,.main{height:100%;width:100%}.top-nav{height:50px;background-color:#d6d6d6;display:flex;align-items:center;padding:0 30px;color:#5f9ea0}.top-nav a{color:#5f9ea0;font-weight:700}.content{height:calc(100% - 50px)}