/* effects.css */


/* layout */

    /* center(ed) */

        /* center via grid */

.center-grid,
.center-grid-parent {
    display: grid;
    place-items: center;
}
    .center-grid-child {}


        /* center via flex */

.center-flex, 
.center-flex-parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
    .center-flex-child {}

.center-screen,
.center-relative-to-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}


        /* center via box (use on div, etc.) */

.centered, 
.center-box, 
.center-box-fixed,
.center-vertical-and-horizontal,
.center-vert-and-hort,
.center-v-and-h,
.center-vh,
.center-horizontal-and-vertical,
.center-hort-and-vert,
.center-h-and-v,
.center-hv {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .center-box-absolute {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
    }

    .center-box-parent, .center-box-relative {
        position: relative !important;
    }

        .center-box-child {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -50px; /* Half the width of the child div */
          margin-top: -50px; /* Half the height of the child div */
        }


.center-box-h, 
.center-box-hort, 
.conter-box-horizontal {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.center-box-v, 
.center-box-vert, 
.center-box-vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


/* center text */

    /* center as table and table-cell */

.center-text {
    text-align: center;
}

.center-text-parent {
  display: table;
}
    .center-text-child {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }


/* dropshadow */

.dropshadow {
    filter: drop-shadow(0px 10px 4px gray);
}


/* columns */

.columns_2 *, 
.columns_3 *, 
.columns_4 *, 
.columns_5 * {
    margin-top: 0;
    margin-bottom: 1em;
}

    .columns_2 {
        columns: 2 auto;
        column-width: 50%;
    }

    .columns_3 {
        columns: 3 auto;
        column-width: 33%;
    }

    .columns_4 {
        columns: 4 auto;
        column-width: 25%;
    }

    .columns_5 {
        columns: 5 auto;
        column-width: 20%;
    }


/* (un)selectable */
/*
    Cite: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
*/
.selectable {
    user-select: auto; 
}
.unselectable {
    user-select: none;
}


/* scrollable ~ use on a fixed width or height box to make it have scrollbable scrollbars */
/*
    Cite: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
*/
.scrollable, .scrollbars, .scrollbar, .scrollable-y, .scrollbar-y {
    overflow-y: auto;
}
    .scrollable-x, .scrollbar-x, .scrollbars-x {
        overflow-x: auto;
    }


/* resizeable */
/*
    Cite: https://developer.mozilla.org/en-US/docs/Web/CSS/resize

    resize does not apply to the following:

        Inline elements
        Block elements for which the overflow property is set to visible
*/
.resizable, .resizable-both {
    overflow: hidden;
    resize: both;
}
    .resizable-h, .resizable-horizontal, .resizable-width {
        overflow: hidden;
        resize: horizontal;
    }
    .resizable-v, .resizable-vertical, .resizable-height {
        overflow: hidden;
        resize: vertical;
    }


/* draggable, droppable ~ actual "drag-and-drop" functionality requires dom manipulation via html and javascript */
/*
    Cite: (HTML) https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable
    Cite: (JavaScript) https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
*/
.draggable {} /* { background-color: red; } .draggable::before, .draggable::after { content: 'WARNING requires HTML draggable="true" attribute and JavaScript'; } */
.droppable {} /* { background-color: red; } .droppable::before, .droppable::after { content: 'WARNING requires HTML droppable="true" attribute and JavaScript'; } */



/* line breaks */

.break-between-words, .breaks-between-words,
.line-break-between-words, .line-breaks-between-words {
    word-spacing: 100vw; /* causes a visual line break on each space between each word */    
}