*,*:after,*:before{padding:0;margin:0;box-sizing:border-box}.app-container{width:100vw;height:100vh}.header{background-color:#138980;height:10%;width:100%;display:flex;justify-content:center;align-items:center}.title{font-size:2rem;font-weight:700;text-transform:uppercase;color:#fff}main{width:100%;height:90%;padding:10px;background-color:#e2dad3}#ask-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-evenly}.flags{width:100%;height:10%;display:flex;justify-content:space-around;align-items:center}.flags button{width:20%;height:auto;border:none}.flags .selected{border:4px solid blue}.answer-holder{width:100%;height:60%;border:1px solid black;border-radius:5px;overflow-y:scroll;display:flex;flex-direction:column;padding:15px 5px;gap:10px}.left,.right{border-radius:5px;padding:10px;color:#000;width:65%}.right{align-self:flex-start;background-color:#fff}.left{align-self:flex-end;background-color:#dcf8c8}.userInput{height:20%;min-height:40px;width:100%;border:1px solid black;border-radius:5px}.searchField{height:100%;width:100%;border:2px solid gray;border-radius:5px}.searchField #userInputField{height:100%;width:80%;border:none}.searchField .searchBtn{height:100%;width:20%;border:none}.startOverBtn{width:100%;height:40px;border:none;border-radius:5px;background-color:orange;color:#fff;font-weight:700;cursor:pointer;text-transform:uppercase}.startOverBtn:hover{box-shadow:5px 5px #add8e6}@media screen and (min-width: 700px){main{max-width:600px;max-height:600px;margin:2rem auto}}