/* Fonts definition */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&display=swap');

/* Variables */
:root {
    --color_primary: #ba132d;
    --color_primary_selected: #880e21;

    --color_secondary: #cd5c5c;
    --color_secondary_selected: var(--color_primary);

    --color_dark: #606060;
    --color_dark_selected: #444444;

    --color_light: #ffffff;
    --color_light_selected: #cdcdcd;
    --color_light_doubleselected: #aaaaaa;
}

/* Selections */
::selection      { background: var(--color_primary); color: var(--color_light); }
::-moz-selection { background: var(--color_primary); color: var(--color_light); }

/* Scrollbar */
::-webkit-scrollbar             { width: 12px; }
::-webkit-scrollbar-track       { background: var(--color_dark); }                 /* Track */
::-webkit-scrollbar-thumb       { background: var(--color_light_selected); }       /* Handle */
::-webkit-scrollbar-thumb:hover { background: var(--color_light_doubleselected); } /* Handle on hover */

/* General settings for pages */
html {
    scroll-behavior: smooth;
}

/* General settings for body */
body {
    font-family: 'Baloo 2', monospace;
    font-size: 17px;

    background-image: linear-gradient(45deg, #29323c, #485563);
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    transition: background .3s;

    color: var(--color_light);
}

/* General settings for headers */
h1 { font-size: 40px; }
h2 { font-size: 34px; }
h3 { font-size: 30px; }
h4 { font-size: 26px; }
h5 { font-size: 22px; }
h6 { font-size: 18px; }

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/* General settings for links */
a {
    transition: all 0.3s;
    color: var(--color_secondary);
}

a:hover {
    color: var(--color_secondary_selected);
    text-decoration: none;
}

/* General settings for buttons */
.btn {
    border-radius: 0;
}

.btn-primary {
    background: var(--color_primary);
    border-color: var(--color_primary);
}

.btn-primary:hover {
    background: var(--color_primary_selected);
    border-color: var(--color_primary_selected);
}

/* General settings for SVG images */
svg {
    height: 100%;
}

/* Digot page content */
.pageHeader {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    align-content: flex-end;
}

.pageTitle {
    font-size: 80px;
    font-weight: bold;
}

.btn-addSnippet {
    margin-bottom: 25px;
}

.modal-content {
    background: rgba(80, 80, 80, 0.8);
    border-radius: 0;
    border: 0;
}

.modal-content .close {
    color: var(--color_light);
    font-size: 30px;
}

.block {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-bottom: 20px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: space-around;
}

.snippet {
    background: var(--color_light_selected);
    padding: 3px 10px;
    margin: 4px 3px;
    text-align: center;
}

.pageWrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;

    min-height: 100vh;
}

.pageFooter {
    text-align: center;
    margin-bottom: 10px;
}

.text-muted {
    color: var(--color_light_selected) !important;
}

.modalImage {
    width: 53px;
    margin-right: 13px;
}

.modalImage path {
    fill: var(--color_primary) !important;
}

.modalImage path:hover {
    fill: var(--color_primary_selected) !important;
}