.container{max-width:800px;margin:auto}body{background-color:#e1e8f0;color:#fff;margin:0;font-family:Arial,sans-serif}header{display:flex;flex-direction:column;background-color:#9068be}.lang{align-self:flex-end}.lang button{background-color:#e1e8f0;border:none;width:40px;height:25px;margin:5px 5px 0 0;border-radius:4px;cursor:pointer}button.lang-active{background-color:#ed5a5a;color:#fff}.main,.options{display:flex;justify-content:space-around;flex-wrap:wrap}#roll,.option{min-width:150px;border-radius:5px;text-align:center;height:50px;line-height:50px;width:30%;margin:5px auto;transition:background .4s}.option:nth-child(odd){background-color:#9068be}.option:nth-child(even){background-color:#bbc4ef;color:#000}#roll{margin:15px auto;color:inherit;font-size:inherit;cursor:pointer;border-style:solid;border-width:0 0 3px;box-shadow:0 -1px 0 rgba(255,255,255,.1) inset;color:#fff;border-radius:6px;background-color:#ed5a5a;border-color:#ea4343}#roll:not(:disabled):hover{background-color:#eb4848;border-color:#e83131}#roll:disabled{cursor:not-allowed;background-color:pink;border-color:#ebb6b6}#selected{background-color:#ed5a5a;color:#fff}h1{color:#fff;text-align:center;margin:0;text-transform:uppercase;line-height:1.11;padding:10px 0;font-weight:400;min-width:150px}@media (max-height:520px){.option{height:40px;line-height:40px}#roll{height:58px;line-height:58px}}@media (min-height:600px){.option{height:50px;line-height:50px}#roll{height:68px;line-height:68px}}@media (min-height:700px){.option{height:60px;line-height:60px}#roll{height:78px;line-height:78px}}