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

[data-theme="light"] {
    --bg-color: #FFA18A;
    --text-color: #000000;
    --theme-color: #FF582E;
    --var-color: #FF3300;
    --invert-text-color: #FFFFFF;
}
  
[data-theme="dark"] {
    --bg-color: #470E00;
    --text-color: #FFFFFF;
    --theme-color: #D12A00;
    --var-color: #A32100;
    --invert-text-color: #000000;
}

*, *::before, *::after, *:hover, *:focus, *:active {
    font-family: 'Montserrat', sans-serif;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

html, body {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    border: 0;
    margin: 0;
}

body {
    min-height: 100vh;
    background-color: var(--bg-color);
    background-image: -webkit-gradient(
        linear,
        left bottom, left top,
        color-stop(30%, var(--invert-text-color)),
        color-stop(70%, transparent)
    );
    background-image: -o-linear-gradient(
        bottom,
        var(--invert-text-color) 30%,
        transparent 70%
    );
    background-image: linear-gradient(
        to top,
        var(--invert-text-color) 30%,
        transparent 70%
    );
    background-repeat: no-repeat;
    -webkit-transition: 
        background-color 0.3s ease,
        background-image 0.3s ease;
    -o-transition: 
        background-color 0.3s ease,
        background-image 0.3s ease;
    transition: 
        background-color 0.3s ease,
        background-image 0.3s ease;
}

h1, h2, h3, h4, p, span, label, strong {
    color: var(--text-color);
}

a {
    text-decoration: none;
    color: #fff;
}