* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html,
body {
    margin: 0px;
    padding: 0px;
    overflow-wrap: break-word;
    scrollbar-width: none;
    font-family: 'Hanken Grotesk', sans-serif;
}

.bg-container {
    background: linear-gradient(180deg, #EBF1FF, #F5F7FF);
    min-height: 100vh;
    width: 100%;
}

.row {
    max-width: 770px;
    background: linear-gradient(180deg, #FFFFFF, #F5F7FF);
}

.results-card {
    background: linear-gradient(180deg, #7857FF, #2E2BE9);
    border-radius: 30px;
}

.results-card p {
    font-weight: 10;
}

.results-card div {
    background: linear-gradient(180deg, #4E21CA, #2421CA00);
    border-radius: 300px;
    height: 200px;
    max-width: 200px;
    min-width: 200px;
}

.results-card div h1 {
    font-size: 100px;
    font-weight: bold;
    margin: 0px;
}

.shadow-lg {
    box-shadow: blue !important;
}

@media (max-width : 768px) {
    .results-card {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .row {
        border-radius: 0px !important;
    }
}

.reaction-conatiner {
    background: linear-gradient(0deg, #FFF6F5, #FFF6F5);
    color: #FF5757;
}

.memory-conatiner {
    background: linear-gradient(0deg, #FFFBF2, #FFFBF2);
    color: #FFB01F;
}

.verbal-conatiner {
    background: linear-gradient(0deg, #F2FBFA, #F2FBFA);
    color: #00BD91;
}

.visual-conatiner {
    background: linear-gradient(0deg, #F3F3FD, #F3F3FD);
    color: #1125D6;
}

.summary-card button {
    background: linear-gradient(180deg, #303B5A, #303B5A);
    font-size: large;
    border: none;
}

.summary-card button:active {
    background: linear-gradient(180deg, #7857FF, #2E2BE9);
}