/* .primary-button {
    padding: 1em 2em;
    background-color: var(--primary);
    color: var(--bg);
    border-radius: 6px;
    transition: transform ease 0.2s, box-shadow ease 0.2s;
    display: inline-block;
    font-size: 18px;
    z-index: 2;
    white-space: nowrap;
} */

/* .secondary-button {
    padding: 1em 2em;
    background-color: var(--secondary);
    color: var(--text);
    border-radius: 6px;
    display: inline-block;
    font-size: 18px;
    z-index: 1;
    cursor: pointer;
    transition: transform ease 0.2s;
    white-space: nowrap;
} */

/* What changed?
background color
color, P -> bg, S -> text

*/
/* .color-effect {
    background: linear-gradient(120deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400&display=swap');
/* Beigeish */
/* :root[data-theme='light']{
    --text: hsl(20, 20%, 3%);
    --bg: hsl(12, 20%, 95%);
    --primary: hsl(193, 21%, 67%);
    --secondary: hsl(13, 21%, 87%);
    --accent: hsl(193, 20%, 17%);

    --site-title-color: hsla(0,0%,0%,1);
    --icon-color: hsla(0,0%,0%,1);
    
}
:root[data-theme='dark']{
    --text: hsl(12, 20%, 95%);
    --bg: hsl(20, 20%, 3%);
    --primary: hsl(193, 21%, 67%);
    --secondary: hsl(15, 22%, 7%);
    --accent: hsl(192, 20%, 47%);

    --site-title-color: hsla(0,100%,100%,1);
    --icon-color: hsla(0,0%,100%,1);
} */
/* Orange, navy blue, soft purple */
/* :root[data-theme='light']{
    --text: hsl(24, 28%, 7%);
    --bg: hsl(30, 25%, 97%);
    --primary: hsl(24, 97%, 55%);
    --secondary: hsl(202, 27%, 92%);
    --accent: hsl(234, 27%, 22%);

    --site-title-color: hsla(0,0%,0%,1);
    --icon-color: hsla(0,0%,0%,1);
    
}
:root[data-theme='dark']{
    --text: hsl(30, 25%, 97%);
    --bg: hsl(24, 28%, 7%);
    --primary: hsl(24, 97%, 55%);
    --secondary: hsl(205, 28%, 12%);
    --accent: hsl(235, 27%, 52%);
    --accent-alt: hsl(235, 10%, 10%);

    --site-title-color: hsla(0,100%,100%,1);
    --icon-color: hsla(0,0%,100%,1);
} */
/* Blue and Brown */
:root[data-theme="dark"]{
    --text: hsl(226, 55%, 94%);
    --bg: hsl(227, 60%, 3%);
    --primary: hsl(227, 97%, 70%);
    --secondary: hsl(77, 54%, 5%);
    --accent: hsl(17, 55%, 45%);

}
:root[data-theme="light"]{
    --text: hsl(227, 60%, 3%);
    --bg: hsl(226, 55%, 94%);
    --primary: hsl(227, 97%, 70%);
    --secondary: hsl(77, 53%, 85%);
    /* --accent: hsl(17, 55%, 15%); */
    --accent: #c95f33;
}
:root{
    /* --h1: 48px;
    --h2: 32px;
    --subtitle: 24px;
    --p: 18px;
    --sub: 16px;
    --small: 14px; */
    --h1: 2rem;
    --h2: 1.7rem;
    --subtitle: 1.3rem;
    --p: 1.1rem;
    --sub: 1rem;
    --small: 0.8rem;
    font-family: 'Quicksand', sans-serif;
}
@media screen and (max-width:1200px){
    body{
        --subtitle: 20px;
        --h1: 32px;
        --h2: 24px;
        --p: 16px;
        --sub: 14px;
    }
}
/* .brain{
    fill: var(--text);
} */

.brain path{
    stroke: var(--text);
}
.site-title path{
    stroke: var(--text);
}
.primary-filter{
    filter: drop-shadow(0 0 1rem var(--primary));
}
.accent-blur{
    filter: drop-shadow(10px 20px 1rem var(--accent));
}

body{
    background-color: var(--bg);
    color: var(--text);
}
.top{
    background-color: var(--accent-alt);
    text-wrap:nowrap;
}
.h1{
    font-size: var(--h1);
}
.h2{
    font-size:var(--h2);
}
.subtitle{
    font-size:var(--subtitle);
}
.p{
    font-size: var(--p);
}
.subtext{
    font-size: var(--sub);
}
.smalltext{
    font-size: var(--small);
}

.primary{
    background-color: var(--primary);
    color: var(--text);
}
.secondary{
    background-color: var(--secondary);
    color: var(--text);
}
.bg{
    background-color: var(--secondary);
    color: var(--text);
}
.accent-alt{
    background-color: var(--accent-alt);
}
.text{
    color:var(--text);
}
.icon{
    fill:var(--text);
    stroke:var(--text);
}
.primary-btn{
    padding: 1em 2em;
    background-color: var(--primary);
    color: var(--secondary);
    border-radius: 6px;
    transition: transform ease 0.2s, box-shadow ease 0.2s;
    display: inline-block;
    font-size: var(--p);
    font-weight: bold;
    z-index: 2;
    white-space: nowrap;
}
.secondary-btn{
    padding: 1em 2em;
    background-color: var(--secondary);
    color: var(--text);
    border-radius: 6px;
    display: inline-block;
    font-size: var(--p);
    z-index: 1;
    cursor: pointer;
    transition: transform ease 0.2s;
    white-space: nowrap;
}

.primary-text{
    color: var(--primary);
}
.secondary-text{
    color: var(--primary);
}
.primary-text-gradient{
    background: linear-gradient(120deg, var(--primary),var(--accent));
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
a{
    color: var(--text);
    text-decoration:none;
}
.strikethrough{
    text-decoration: line-through;
}