/*Note: Colour scheme is: 
Main: #0A1A2F
Secondary (lighter version of main): #3C4C61 
Accent 1: #A259FF
Accent 2: #00E5FF
Text: #FFF*/
/*Variables (Mainly for being able to easily change color scheme any time)*/
:root
{
    --main: #0A1A2F;
    --secondary: #253447;
    --accent-1: #A259FF;
    --accent-2: #00E5FF;
}
/*Color styling*/
.main-bg
{
    background-color: var(--main);
    border-color: var(--main);
}
.secondary-bg
{
    background-color: var(--secondary);
    border-color: var(--secondary);
}
.text
{
    color: #fff;
    text-align: center;
}
.accent-1
{
    background-color: var(--accent-1);
    border-color: var(--accent-1);
}
.accent-2
{
    background-color: var(--accent-2);
    border-color: var(--accent-2);
}
.transparent
{
    background-color: transparent;
    border-color: transparent;
}
/*Semantic html styling*/
.header
{
    text-align: center;
    font-size: clamp(2.5rem, 2vw, 5rem);
    height: auto;
    width: auto;
    min-height: 3rem;
    margin-bottom: clamp(1rem, 1vh, 10rem)
}
.main
{
    width: 100%;
    height: 80vh;
}
.section
{
    width: 90%;
    /*min-height: 75vh;*/
    height: auto;
    padding: clamp(1rem, 1vw, 3rem)
}
/*Butttons styling*/
.answer
{
    background-color: #0F2238;
    transition: background-color 0.5s ease-in-out;
    border-radius: 1rem;
}
.answer:hover
{
    background-color: var(--accent-1);
    cursor: pointer;
}
.answer:active
{
    transform: scale(0.9);
}
.answer:disabled{
    cursor: default;
    filter: brightness(0.7);
    transition: filter 0.3s ease;
    transition: background-color 0.5s ease-in-out;
    transform: scale(0.97);
}
.answer:disabled:hover
{
    cursor: not-allowed;
}
.next
{
    background-color: #0F2238;
    transition: background-color 0.5s ease-in-out;
    border-radius: 1rem;
}
.next:hover
{
    background-color: var(--accent-2);
    cursor: pointer;
}
.next:active
{
    transform: scale(0.9);
}
/*Display styling*/
/*Flexbox*/
.flexbox
{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: auto;
}
.main-flexbox
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    flex-direction: column;
}
/*Grid*/
.answer-grid
{
    display: grid;
    grid-template-columns: 90%;
    overflow: hidden;
    justify-content: center;
    justify-items: center;
}
/*To move next button to the right*/
.answer-grid > div
{   
    justify-self: end;
}
/*Block/None*/
.display-none
{
    display: none;
}
/*Width/Height styling*/
.width-100
{
    width: 100%;
}
/*Text styling*/
.header-text
{
    font-size: clamp(3rem, 2vw, 5rem);
    font-family: "Montserrat", sans-serif;
}
.subheading-text
{
    font-size: clamp(2rem, 1.5vw, 3rem);
    font-family: "Montserrat", sans-serif;
}
.answer-text
{
    font-size: clamp(3rem, 5vw, 7rem);
    font-family: "Inter", sans-serif;
}
/*Margin styling*/
.margin-0
{
    margin: 0rem;
}
.margin-1
{
    margin: 1rem;
}
/*Media query that changes button layout to 2*2 instead of 1*4 when screen is 600+px wide*/
@media screen and (min-width: 600px)
{
    .answer-grid
    {
        grid-template-columns: repeat(2, 45%);
        grid-gap: 1rem;
    }
    
    

}
#feedback
{
    min-height: 2.5rem;
}