/* CSS reset: */

html,legend{color:#000}html{background:#FFF}blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,select,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:after,q:before{content:''}abbr,acronym{border:0;font-variant:normal}sub,sup{vertical-align:baseline}

/* CSS common part: */

*{
  outline: none;
}

html{
  margin:0;
  padding:0;
  height:100%;
}

body{
  margin: 0px;
  padding:0;
  min-height: 100%;
  font-family: -apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #042742;
  background-color: #fff;
  overflow: hidden;
}

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.wrap {
  text-align: center;
}

#result {
  font-size: 3rem;
  padding-bottom: 2rem;
  text-transform: uppercase;
}

#button {
  font-size: 2rem;
  background: hotpink;
  border: none;
  padding: 0.5rem 2rem 0.5rem 2rem;
  border-radius: 1.5rem;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}
#button:hover{
  background: #000;
}
#button:disabled {
  background: #999;
  cursor: default;
}