/**
 * Created by Jacob Humston, Emma Rhoden, and Kayden Justice.
 * All rights reserved.
 */

@font-face {
    font-family: Nunito;
    src: url('../assets/fonts/Nunito.ttf');
}

:root {
    --primary-accent-color: #324376;
    --secondary-accent-color: #586ba4;
    --tertiary-accent-color: #fed766;
    --quaternary-accent-color: #f5dd90;
    --quinary-accent-color: #f68e5f;
    --senary-accent-color: #f76c5c;
    --background-color: rgb(240, 240, 240);
    --text-color: rgb(2, 2, 2);
    --primary-accent-color-darker: #202d52;
}

html,
body,
button,
input,
textarea {
    font-family: Nunito, 'Arial';
}

html,
body {
    padding: 0px;
    margin: 0px;
    background-color: var(--background-color);
    color: var(--text-color);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--quinary-accent-color);
}

/* ---------------------------------------------------- */

/* WEB EDITOR SPECIFIC */

.currently-selected-editable {
    background-image: linear-gradient(90deg, var(--secondary-accent-color), transparent 100%),
        linear-gradient(90deg, var(--secondary-accent-color), transparent 100%),
        linear-gradient(0deg, var(--secondary-accent-color), transparent 100%),
        linear-gradient(0deg, var(--secondary-accent-color), transparent 100%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size:
        15px 5px,
        15px 5px,
        5px 15px,
        5px 15px;
    background-position:
        left top,
        right bottom,
        left bottom,
        right top;
    animation: border-selection-editing-animation 0.5s infinite linear;
    /*padding: 10px !important;*/
    cursor: pointer !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@keyframes border-selection-editing-animation {
    0% {
        background-position:
            left top,
            right bottom,
            left bottom,
            right top;
    }

    100% {
        background-position:
            left 15px top,
            right 15px bottom,
            left bottom 15px,
            right top 15px;
    }
}