body{margin:0;background-color:#7a0025;font-family:"Roboto",sans-serif;text-align:center}header{text-align:center;padding:20px}header h1{color:#fff;text-transform:uppercase;margin-bottom:0}@media screen and (max-width:700px){header h1{font-size:1.3rem}}header .logo{width:200px;height:auto}.container{padding:0 20px 20px}#test{background-color:#fff;text-align:center;border-radius:10px;padding:10px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}#options-wrapper{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:20px;padding:20px}@media screen and (max-width:800px){#options-wrapper{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:600px){#options-wrapper{grid-template-columns:1fr}}#options-wrapper .cover{margin:auto;width:200px;height:200px;background-size:cover;background-position:center;border-radius:50%}#options-wrapper .option{cursor:pointer;background-color:bisque;transition:box-shadow 0.3s;padding:10px;border-radius:5px;color:rgb(85,0,26)}#options-wrapper .option:hover{box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}#options-wrapper .option h4{text-transform:uppercase;margin-bottom:0}#result-wrapper{padding:10px 25px;margin-top:-30px}#text{color:rgb(85,0,26)}@media screen and (max-width:700px){#text{font-size:1rem}}#result-wrapper h2{text-transform:uppercase;color:rgb(85,0,26)}.btn{display:inline-block;padding:10px;background-color:#7a0025;color:#fff;text-transform:uppercase;text-decoration:none;transition:background-color 0.3s;cursor:pointer}#result-wrapper a:hover{background-color:rgb(85,0,26)}#result-wrapper .cover{height:300px;width:300px;border-radius:50%;background-size:cover;background-position:center;margin:auto}@media screen and (max-width:600px){#result-wrapper .cover{height:200px;width:200px}}button{margin-top:10px;border:1px solid #fff;border-radius:5px}