body{
    background-color: hsl(221, 100%, 96%);
    align-items: center;
    justify-content: center;
    display: flex;
    height: 100%;
}
html{
    height: 100%;
}

.all{
    display: flex;
}

.geral{
    background-image: linear-gradient(to bottom, hsl(252, 100%, 67%),hsl(241, 81%, 54%));
    width: 400px;
    height: 500px;
    flex: 1;
    border-radius: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.results{
    display: inline-block;
    flex-direction: row;
    background-color: white;
    width: 400px;
    height: 500px;
    border-radius: 20px;
    font-size: 24px;
}

.circle{
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to bottom, hsla(256, 72%, 46%, 1),hsla(241, 72%, 46%, 0));
    justify-content: center;
    border-radius: 50%;
    margin-top: 70px;
}

header{
    display: flex;
    justify-content: center;
    font-size: 28px;
    font-family: sans-serif;
    margin-top: 30px;
    color: hsla(0, 0%, 100%, 0.5);
}

#reaction, #memory, #verbal, #visual{
    display: flex;
    padding-left: 50px;
}

.reactionBox, .memoryBox, .verbalBox, .visualBox{
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    margin-top: 10px;
}
.reactionBox{
    background-color: rgba(255, 0, 0, 0.123);
}

.memoryBox{
    background-color: rgba(255, 174, 0, 0.123);
}

.verbalBox{
    background-color: rgb(37, 211, 102, 0.123);
}

.visualBox{
    background-color: rgb(4, 0, 255, 0.123);
}

.preaction{
    color: red;
    font-weight: bold;
}

.summary{
    color: hsl(224, 30%, 27%);
    margin-left: -70%;
    padding-left: 50px;
}

span{
    color: hsla(246, 90%, 80%, 0.5);
}

.rNumber{
    color: hsl(224, 30%, 27%);
    margin-left: 80px;
}

.mNumber{
    color: hsl(224, 30%, 27%);
    margin-left: 90px;
}

.veNumber{
    color: hsl(224, 30%, 27%);
    margin-left: 110px;
}

.viNumber{
    color: hsl(224, 30%, 27%);
    margin-left: 110px;
}

.preaction, .pmemory, .pverbal, .pvisual{
    margin-left: 20px;
}

.pmemory{
    color: rgb(255, 174, 0);
}

.pverbal{
    color: rgb(37, 211, 102);
}

.pvisual{
    color: rgb(4, 0, 255);
}

h1{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    color: white;
}

h2{
    display: flex;
    margin-top: -50px;
    justify-content: center;
    font-size: 18px;
    color: hsla(0, 0%, 100%, 0.5);
}
#pText{
    color: hsl(221, 100%, 96%);
    font-size: 30px;
    font-family: sans-serif;
    margin-top: 10px;
}

button{
    border: none;
    background-image: linear-gradient(to bottom, hsl(252, 100%, 67%),hsl(241, 81%, 54%));
    padding: 10px;
    font-size: 2rem;
    border-radius: 30px;
    width: 300px;
    justify-content: center;
    margin-top: 10px;
    margin-left: 50px;
    color: hsl(221, 100%, 96%);
}

button:hover{
    background-image: linear-gradient(to bottom, hsl(252, 100%, 72%),hsl(241, 81%, 59%));
}