:root {
    --primary-colour: #9889f1;
    --primary-colour-highlight: #388ee3;
    --primary-colour-complimentary: #ED7704;
    --secondary-colour: #1c3fa8;
    --dark-colour: #0e0040;
    --dark-colour-highlight: #19476d;
    --light-colour: #f4f4f4;
    --light-colour-highlight: #e2e2e2;
    --success-colour: #5cb85c;
    --error-colour: #d9534f;
    /* --gradient-colour: #d900ff40; */
    --gradient-colour-secondary: #d900ff40;
    --gradient-colour: #c241fa;
    --gradient-colour-complimentary: rgba(38, 255, 0, 0.75);
    --gradient-colour-light: #aaaaaa;
    /* --gradient-colour-dark: rgba(130, 130, 130, 0.25); */
    --gradient-colour-dark: #12094b;

    --palette-one-primary: #9b88b7;
    --palette-one-secondary: #B79B88;
    --palette-one-tertiary: #88B79B;

    --palette-one-primary-dark: #8068A4;
    --palette-one-primary-complimentary: #A4B788;

    --palette-one-seconday-dark: #A48068;
    --palette-one-seconday-complimentary: #88A4B7;

    --palette-one-tertiary-dark: #68A480;
    --palette-one-tertiary-complimentary: #B788A4;

    --palette-two-primary: #5E56CA;
    --palette-two-secondary: #9856CA;
    --palette-two-tertiary: #5688CA;

    --palette-two-primary-dark: #4139B4;
    --palette-two-primary-complimentary: #C2CA56;

    --palette-two-seconday-dark: #7F39B4;
    --palette-two-seconday-complimentary: #88CA56;

    --palette-two-tertiary-dark: #396EB4;
    --palette-two-tertiary-complimentary: #CA9856;
}

/* Defaults */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Lato', sans-serif;
    color: #333;
    line-height: 1.6;
}

ul {
    list-style-type: none;
}

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

h1,
h2 {
    font-weight: 300;
    line-height: 1.2;
    margin: 10px 0;
}

p {
    margin: 10px 0;
}

.border-all {
    border: 1px solid black;
}

/* Navbar */
.navbar {
    background-color: var(--primary-colour);
    color: #fff;
    height: 70px;
}

.navbar ul {
    display: flex;
    margin-top: 1rem;
}

.navbar a {
    color: rgb(255, 255, 255);
    padding: 10px;
    margin: 0 5px;
}

.navbar a:hover {
    border-bottom: 2px #fff solid;
}

.navbar h1 a:hover {
    border-bottom: none;
}

.navbar .flex {
    justify-content: space-between;
}

/* Menu */
.menuBox {
    position: absolute;
    height: 100%;
    top: 250px;
    right: 10px;
    color: var(--light-colour);
}

.menu {
    position: sticky;
    /* height: -200px; */
    top: 10px;
    right: 10px;
    color: var(--light-colour);
    padding: 10px;
    background-color: var(--dark-colour);
    border-radius: 5px;
    cursor: pointer;
}

.menu-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-color: rgba(0, 0, 0, 0.95);
}

.menu-modal .menu-body {
    position: relative;
}

.menu-modal .close-modal {
    position: absolute;
    right: 35px;
    color: var(--light-colour);
    margin: 15px;
    padding: 15px;
    cursor: pointer;
    /* transform: scaleY(1.05); */
}

.menu-body .card {
    margin-top: 70px;
}

/* .menu-body input.nightMode:checked {
    --checkmark-fill-colour: var(var(--primary-colour));
} */

.form-control {
    padding-top: 0.5rem;
}

/* .form-control input[type=checkbox] {
    /* height: 15px;
    width: 20px;
    padding-top: 20px; */
/* } */ 

.options {
    margin-bottom: 15px;
}

/* FROM: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
/* Customize the label (the container) */
.check-box-box {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 1.15rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.check-box-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--gradient-colour-light);
    background-color: transparent;
    border: 2px solid var(--checkmark-border-colour);
    border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.check-box-box:hover input~.checkmark {
    background-color: var(--checkmark-hover-colour);
}

/* When the checkbox is checked, add a blue background */
.check-box-box input:checked~.checkmark {
    background-color: var(--checkmark-fill-colour);
    border: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.check-box-box input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.check-box-box .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/* Heading */
.heading .flex {
    box-shadow: 0px 2px 3px #c9c9c9;
}

.heading .bg-primary {
    background-color: var(--primary-colour);
    color: #fff;
    background-image: linear-gradient(rgba(0, 0, 0, 0), #715DEC);
}

/* Intro */
.intro {
    /* background-color: var(--primary-colour); */
    /* color: white; */
    /* position: relative;s */
    margin-top: 40px;
}

/* Deck */
.deck .anima-btn:hover {
    background-color: var(--primary-colour);
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
}

.deck .essere-btn {
    background-color: #D0A1F3;
}

.deck .essere-btn:hover {
    background-color: #D0A1F3;
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
}

.deck .perche-btn {
    background-color: #85B2F0;
}

.deck .perche-btn:hover {
    background-color: #85B2F0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
}

/* L'anima */
.image-showcase img {
    max-width: 100%;
    max-height: 500px;
    /* width: ; */
}

.image-title {
    /* max-width: 500px; */
    margin-top: 20px;
}

.image-showcase .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 2rem 1fr;
    justify-items: center;
}

/* .image-box:hover {
    cursor: zoom-in;
    cursor: crosshair;
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
}

.fullpage {
    cursor: zoom-out;
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
} */

.image-showcase {
    margin-bottom: 30px;
}

#fullpage {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-color: black;
}

/* options */
.options {
    overflow: visible;
}

.sfwSwitch {
    height: 25px;
    width: 25px;
    margin-right: 5px;
}

:root {
    /* --select-colour: #D0A1F3; */
    /* --select-colour: #85B2F0; */
    /* --select-colour: var(--primary-colour); */
    /* --select-colour: #333; */
    /* --select-colour: var(--palette-one-primary-dark); */
    --select-colour: white;
    --select-text-colour: var(--palette-two-primary-dark);
    --select-border-colour: var(--palette-two-primary-dark);
    --checkmark-hover-colour: var(--primary-colour);
    --checkmark-border-colour: var(--palette-two-primary-dark);
    --checkmark-empty-colour: transparent;
    --checkmark-fill-colour: var(--palette-two-primary-dark);
    --a: #1c4aa6;--a: #661ca6;--a: #a61c9d;--a: #a61c1c;--a: #a6561c;--a: #a6961c;--a: #1c7da6;
}

.category {
    /* Remove defaults */
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/

    margin-left: 10px;
    font-size: 1rem;
    margin-bottom: 5px;
    width: 110px;
    height: 30px;
    background-color: var(--select-colour);

    padding-left: 7px;
    outline: 0;
    /* color: white; */
    color: var(--select-text-colour);
    border-radius: 10px;
    border: 2px solid var(--select-border-colour);

    background-image: linear-gradient(var(--select-colour), var(--select-colour)),
        linear-gradient(-135deg, transparent 50%, var(--select-colour) 50%),
        linear-gradient(-225deg, transparent 50%, var(--select-colour) 50%),
        linear-gradient(var(--select-colour) 42%, var(--select-text-colour) 42%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom;
}

/* FROM: https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css */
/* select { */
    /* font: 400 12px/1.3 sans-serif;
    -webkit-appearance: none;
    appearance: none;
    color: var(--baseFg);
    border: 1px solid var(--baseFg);
    line-height: 1;
    outline: 0;
    padding: 0.65em 2.5em 0.55em 0.75em;
    border-radius: var(--radius);
    background-color: var(--baseBg); */
    /* background-image: linear-gradient(var(--primary-colour), var(--primary-colour)),
        linear-gradient(-135deg, transparent 50%, var(--primary-colour) 50%),
        linear-gradient(-225deg, transparent 50%, var(--primary-colour) 50%),
        linear-gradient(var(--primary-colour) 42%, white 42%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom; */
/* } */

.category:hover {
    cursor: pointer;
}

.againButton {
    margin-top: 5px;
}

.bookmark {
    /* position: relative; */
    /* justify-items: end; */
    margin-left: 3.5rem;
    justify-content: end;
    text-align: end;
    color: var(--select-text-colour);
}

.bookmark i {
    /* text-align: end; */
    cursor: pointer;
    transform: scaleY(1);
    transition: transform 200ms ease-in-out;
    animation: shrinkBookmark 400ms;
}

.bookmark i:hover {
    /* text-align: end; */
    cursor: pointer;
    color: rgb(151, 113, 17);
    transform: scaleY(1.2);
    transition: transform 200ms ease-in-out;
}

.saveImage, .unsaveImage {
    color: var(--select-text-colour);
}

/* // Desktop
@media (max-width: 500px) {
    .deck .grid-3 {
        grid-template-rows: repeat(3, 1fr);
    }
} */

@keyframes shrinkBookmark {
    0% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(1);
    }
}

/* Tablet */
@media (max-width: 768px) {

    .grid,
    .deck .grid-3 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .deck a.btn {
        /* align-self: center; */
        text-align: center;
    }

    .deck .card {
        align-content: center;
        text-align: center;
    }
}

/* Mobile */
/* @media (max-width: 500px) {
    .deck .grid-3 {
        grid-template-rows: repeat(3, 1fr);
    }
} */


/* FROM: https://www.w3schools.com/howto/howto_custom_select.asp */
/* The container must be positioned relative: */
/* .custom-select {
    position: relative;
    font-family: Arial;
}

.custom-select select {
    display: none; */
    /*hide original SELECT element: */
/* }

.select-selected {
    background-color: DodgerBlue;
} */

/* Style the arrow inside the select element: */
/* .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
} */

/* Point the arrow upwards when the select box is open (active): */
/* .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
} */

/* style the items (options), including the selected item: */
/* .select-items div,
.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
} */

/* Style items (options): */
/* .select-items {
    position: absolute;
    background-color: DodgerBlue;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
} */

/* Hide the items when the select box is closed: */
/* .select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
} */