@mixin titleFont {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

@mixin bodyFont {
    font-family: 'Rambla', sans-serif;
}

@mixin normalizeTitle {
    margin: 0;
    padding: 0;
    user-select: none;
}

@mixin normalizeBody {
    margin: 0;
    padding: 0;
}

@mixin normalizeButton {
    background: none;
    border: none;
    width: 8vw;
}

@mixin svgStyle {
    cursor: pointer;
        
    path {
        fill: rgb(170, 170, 170);
        // CREDITS TO https://stackoverflow.com/a/49627345
    }
}

$background-color: #ffffff;
$border-color: #969696;

$main-color: #62D2A2;
$second-color: #1FAB89;
$second-color-darker: #15745c;
$light-color: #9DF3C4;
$lightest-color: #D7FBE8;

$main-color-dark: #303841;
$second-color-dark: #3A4750;
$light-color-dark: #D72323;
$light-color-dark-darker: #7c1414;
$lightest-color-dark: #4c8ad5;
$lightest-color-dark-darker: #eff3f8;

@import 'header';
@import 'banner-login';
@import 'mainPomodoro';
@import 'styleSelector';
@import 'goDownArrow';
@import 'aboutThis';
@import 'historyButton';
@import 'pomodoro-counter';
@import 'identify';
@import 'dark-mode_toogle-switch';
@import 'account';
@import 'goToAccount';
@import 'clockify-tasks-display';
@import 'made-with-love';

html, body { 
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    background-color: $background-color;
}