Template:M1quiz/style.css

.options {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin: 1rem auto;
}

.op {
    text-align: center;
    transition: box-shadow 0.2s ease-in-out;
    padding: 5px 10px;
}

.op:hover {
	box-shadow: rgba(255,255,255,0.4) 0px 0px 2px 2px;
}

.aOption {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuYTg3MzFiOSwgMjAyMS8wOS8wOS0wMDozNzozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDEtMTZUMTM6NTk6MDIrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTAxLTE4VDE5OjE5OjQxKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIyLTAxLTE4VDE5OjE5OjQxKzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmIxZDQ0ZjkxLTMwZmUtODU0Yy1iYzYzLTY4OThkYmJiNGRiMyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjY3MmIyZDVjLWI0ZDAtMWM0NC05YzI5LWJjMGFhMzMxMzk0YSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgzMzUwNDAxQ0RDQzExRUE5OUNCQ0Q5NDA3ODk4RUE5IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgzMzUwM0ZFQ0RDQzExRUE5OUNCQ0Q5NDA3ODk4RUE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgzMzUwM0ZGQ0RDQzExRUE5OUNCQ0Q5NDA3ODk4RUE5Ii8+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjhmZGE4MjQ4LTg1OGQtYzk0Ny1hYjcwLTY1MGI4MjZiYjAzNiIgc3RFdnQ6d2hlbj0iMjAyMi0wMS0xNlQxNDowNCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiMWQ0NGY5MS0zMGZlLTg1NGMtYmM2My02ODk4ZGJiYjRkYjMiIHN0RXZ0OndoZW49IjIwMjItMDEtMThUMTk6MTk6NDErMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMy4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4cJxMdAAAAHklEQVQIHWPwRwJaWloMQIwsxAARRuEjCzEgawaSAEeNFPu+Mc93AAAAAElFTkSuQmCC'); 
    border: 1.5px solid #363636;
    border-radius: 1px;
    text-align: center;
    margin: 1.5rem auto;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.green {
    cursor: auto;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGomlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuYTg3MzFiOSwgMjAyMS8wOS8wOS0wMDozNzozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDEtMTZUMTM6NTk6MDIrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTAxLTE2VDE2OjA3OjU0KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIyLTAxLTE2VDE2OjA3OjU0KzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVjYjgwZjI2LTNkM2UtNWU0Zi1hY2ZiLTBkODljOTA2NDM4ZiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjQ0MGQ0OGQzLTA1MjktMTc0OS1iMGJhLWI5Y2I4YTZhNmY0MiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgzMzUwNDAxQ0RDQzExRUE5OUNCQ0Q5NDA3ODk4RUE5IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgzMzUwM0ZFQ0RDQzExRUE5OUNCQ0Q5NDA3ODk4RUE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgzMzUwM0ZGQ0RDQzExRUE5OUNCQ0Q5NDA3ODk4RUE5Ii8+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjYxYjQ2MGRiLTg2NzQtNjI0OS1hZjI2LWU5MGMwZTBlYjkwYiIgc3RFdnQ6d2hlbj0iMjAyMi0wMS0xNlQxNjowNzo1NCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1Y2I4MGYyNi0zZDNlLTVlNGYtYWNmYi0wZDg5YzkwNjQzOGYiIHN0RXZ0OndoZW49IjIwMjItMDEtMTZUMTY6MDc6NTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMy4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ZxBVdAAAAIElEQVQIHWNgCHI2THeFIwYUTpAzAzIHIQ/XxYDMASIAJKYULvJHWI4AAAAASUVORK5CYII=');
    border: 1.5px solid #093d09;
    border-radius: 1px;
}