/***USEFUL PROPERTIES***/
:root {
  /***TEXT***/
  --fontSizeXL: 5.25rem;
  --fontSizeXS: 0.75rem;
  --lineHeightLow: 1.1;

  /***SPACES***/
  --rowGutterSmall: calc(var(--fontSizeSmall) * var(--lineHeight));
  --rowGutterLarge: calc(var(--fontSizeLarge) * var(--lineHeightLow));
  --marginTop: calc(var(--rowGutter)*1);
  --marginBottom: calc(var(--rowGutter)*3);

  /***SIZES***/
  --srcWidth: calc(50vw - (var(--colGutter)*2));
  --srcHeight: calc(100vh - (var(--rowGutter)*6));

  /***BLUR***/
  --txtBlur: blur(1.5rem);
  --srcBlur: blur(calc(var(--bodyMargin)*0.75));

  /***SHADOW***/
  --textShadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.33);
  --boxShadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.33);
  --boxShadowInset: 3px 3px 3px 0px rgba(0, 0, 0, 0.33) inset;
  --srcShadow: drop-shadow(0vw .66vw .99vw rgba(0, 0, 0, 0.33));
}

/***FONTS AND TEXT
*****************************************************/

/***FONT SMOOTH***/
* {
  -webkit-font-smoothing: smooth;
  -moz-osx-font-smoothing: smooth;
  text-rendering: geometricPrecision;
}

/***FONT SIZES***/
.font_size_XL {
  font-size: var(--fontSizeXL);
  line-height: var(--lineHeightLow);
}
.font_size_XS {
  font-size: var(--fontSizeXS);
  line-height: var(--lineHeight);
}

/***BREAK WORD***/
* {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/***ELLIPSIS...***/
* {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/***LIMIT LINES...***/
* {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

/***LIST ITEMS***/
*{
  list-style-type: decimal;
  list-style-type: upper-roman;
  list-style-type: upper-alpha;
}

/***LAYOUT
*****************************************************/

/***BOX SIZING***/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/***OBJECT FIT***/
* {
    object-fit: contain;
    object-position: center;
}

/***GRIDS***/
* {
    display: grid;
    grid-auto-flow: column;
}

/***COLUMNS CONTENT***/
* {
    column-count: 3;
    column-gap: 3px;
}
* {
    /* column break */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    /* page break */
    -webkit-page-break-inside: avoid;
    -moz-page-break-inside: avoid;
    -ms-page-break-inside: avoid;
    page-break-inside: avoid;
    /* item break */
    -webkit-break-inside: avoid;
    -moz-break-inside: avoid;
    -ms-break-inside: avoid;
    break-inside: avoid;
}

/***DECORATION AND FILTERS
*****************************************************/

/***BORDERS***/
*{
    border: var(--borderLine);
}

/***GRADIENT***/
* {
    -webkit-box-shadow: 0 var(--rowMargin) var(--rowMargin) calc(var(--rowMargin)*3) var(--backColor);
    -moz-box-shadow: 0 var(--rowMargin) var(--rowMargin) calc(var(--rowMargin)*3) var(--backColor);
    -ms-box-shadow: 0 var(--rowMargin) var(--rowMargin) calc(var(--rowMargin)*3) var(--backColor);
    box-shadow: 0 var(--rowMargin) var(--rowMargin) calc(var(--rowMargin)*3) var(--backColor);
}

/***SHADOWS***/
* {
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.33);
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.33) inset;
    text-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.33);
    -webkit-filter: drop-shadow(0vw .66vw .99vw rgba(0, 0, 0, 0.33));
    -moz-filter: drop-shadow(0vw .66vw .99vw rgba(0, 0, 0, 0.33));
    -ms-filter: drop-shadow(0vw .66vw .99vw rgba(0, 0, 0, 0.33));
    filter: drop-shadow(0vw .66vw .99vw rgba(0, 0, 0, 0.33));
}

/***BLUR***/
* {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

/***PERSPECTIVE ROTATIONS***/
.container {
    perspective-origin: center;
    perspective: 500px;
}
.content {
    transform-style: preserve-3d;
    transform: rotateX(0deg);
    transition: transform 0.15s;
}

/***MAGNETIC SCROLL***/
section.magnetic_scroll_y {
    margin: 0;
    width: 100vw;
    height: 100vh;
    scroll-snap-points-y: repeat(50vh);
    scroll-snap-type: y mandatory;
    scroll-snap-type: mandatory;
    overflow-x: hidden;
    overflow-y: auto;
}
section.magnetic_scroll_x {
    margin: 0;
    width: 100vw;
    height: 100vh;
    scroll-snap-points-x: repeat(50vh);
    scroll-snap-type: x mandatory;
    scroll-snap-type: mandatory;
    overflow-x: auto;
    overflow-y: hidden;
}
section.magnetic_scroll > article {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    /*
    justify-content: center;
    align-items: center;
    */
    scroll-snap-align: start;
}

/***ANIMATIONS
*****************************************************/
* {
    animation: roanimationtate 2s ease infinite;
    animation-play-state: paused;
    animation-play-state: running;
}
@keyframes animation {
    0% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(-90deg);
    }
}

/***RESPOPNSIVE
*****************************************************/

/***VIEWPORT HEIGHT***/
* {
    height: 100vh; /* Fallback */
    height: calc(var(--vh, 1vh) * 100);
}