@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Primary */
    --Light-red: hsl(0, 100%, 67%);
    --Orangey-yellow: hsl(39, 100%, 56%);
    --Green-teal: hsl(166, 100%, 37%);
    --Cobalt-blue: hsl(234, 85%, 45%);
    /* Neutral */
    --White: hsl(0, 0%, 100%);
    --Light-lavender: hsl(241, 100%, 89%);
    --Dark-gray-blue: hsl(224, 30%, 27%);
}

* {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 500;
}

body {
    min-height: 100vh;
    height: 100%;
    background-color: var(--Light-lavender);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* Default Styles */
p.head {
    font-size: 25px;
    font-weight: 700;
}

body .container .white { color: var(--White); }

a.continue:hover { background: linear-gradient(hsl(252, 100%, 67%) -100%, hsl(241, 81%, 54%) 99%); }


/* Container - Full card */
.container {
    height: 500px;
    width: 710px;
    background-color: var(--White);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 30px;
    box-shadow: 0px 0px 20px -10px;
    transition: all 500ms ease;
}


/* Result Container - left */
.result {
    background: linear-gradient(hsl(252, 100%, 67%) -100%, hsl(241, 81%, 54%) 99%);
    border-radius: 30px;
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    
    P { color: hsla(0, 0%, 100%, 0.6) }
    
    .result-score {
        height: 200px;
        width: 200px;
        background: linear-gradient(hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: hsla(0, 0%, 100%, 0.4);
    }
    
    .result-score > span {
        color: white;
        font-size: 70px;
        font-weight: 900;
    }
    
    .great {
        font-size: 30px;
        font-weight: 700;
    }
    
    .text { text-align: center; }
}


/* Sumary container - Right */
.summary {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 30px;
    
    .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-radius: 13px;
    }
    
    .continue {
        width: 100%;
        padding: 17px 0;
        text-align: center;
        background-color: var(--Dark-gray-blue);
        border-radius: 30px;
        text-decoration: none;
        color: white;
    }
}

/* Score Boxes - inside Summary Right */
.score-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    * { font-weight: 700; }
    
    .left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .right {
        color: black;
        display: flex;
        gap: 8px;
        
        span { color: hsla(0, 0%, 0%, 0.5); }
    }
    
    .reaction {
        color: var(--Light-red);
        background-color: hsla(0, 100%, 67%, 0.08);
    }
    
    .memory {
        color: var(--Orangey-yellow);
        background-color: hsla(39, 100%, 56%, 0.08);
    }
    
    .verbal {
        color: var(--Green-teal);
        background-color: hsla(166, 100%, 37%, 0.08);
    }
    
    .visual {
        color: var(--Cobalt-blue);
        background-color: hsla(234, 85%, 45%, 0.08);
    }
}

body .coder * {
    margin: 20px 0;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
}

@media screen and (max-width:710px) {
    .container {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0px;
    }
    
    p.head { font-size: 20px; }
    
    
    .result {
        border-radius: 0px 0px 30px 30px;
        gap: 15px;
        
        .result-score {
            height: 150px;
            width: 150px;
            
            .white { font-size: 50px; }
        }
        
        .great { font-size: 25px; }
    }
}

@media screen and (max-width:392px) {
    .result {
        padding: 2rem;
        
        p.text { font-size: 15px; }
    }
    
    .summary {
        gap: 20px;
        padding: 1.5rem;
        
        * { font-size: 15px; }
        
        .continue { padding: 12px 0; }
    }
}