/*
Theme Name: Nonatized
Template:     breakdance-zero-theme-master
Version: 1.0
*/

:root {
  --ruby: #550B18;
  --red: #B80E23;
  --noir: #0C0000;
  --white: #F4F4F4;
  --gray: #525050;
  --sky: #95BBEA;
  --pink: #FFBDC5;
  --cream: #FFFCEF;
  --olive: #B9C8B7;
  --orange: #AD330A;

  /* Transition */
  --cubic: cubic-bezier(0.39, 0.1, 0.94, 0.76);
  --nonatized-kit-transition: all 0.3s var(--cubic);

  /* Fonts */
  --sans: "Overused Grotesk", sans-serif, system-ui, ui-sans-serif;
  --serif: "Nyght Serif", serif, ui-serif;
  --mono: "Space Mono", monospace, ui-monospace;
  --brand: "Avestrava", serif, ui-serif;


  /* Font Sizes */

  --text-xs: clamp(0.875rem, 1vw, 1rem);
  /* 14px → 16px */
  --text-sm: clamp(1rem, 1.1vw, 1.125rem);
  /* 16px → 18px */
  --text-base: clamp(1.125rem, 1.3vw, 1.3125rem);
  /* 18px → 21px */
  --text-md: clamp(1.3125rem, 1.5vw, 1.5rem);
  /* 21px → 24px */
  --text-lg: clamp(1.5rem, 1.8vw, 1.75rem);
  /* 24px → 28px */
  --text-xl: clamp(1.75rem, 2.2vw, 2rem);
  /* 28px → 32px */
  --text-2xl: clamp(2rem, 2.8vw, 2.5rem);
  /* 32px → 40px */
  --text-3xl: clamp(2.25rem, 3.1vw, 2.75rem);

  --site-width: 1440px;
  --reading-width: 760px;
  --sidebar-width: 500px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;

  --page-padding: clamp(18px, 4vw, 52px);

  --radius-sm: 10px;
  --radius-lg: 24px;

  /* Text Strokes */
  --ruby-stroke:
    0.1px 0px 0.5px var(--ruby),
    -0.1px 0px 0.5px var(--ruby),
    0px 0.1px 0.5px var(--ruby),
    0px -0.1px 0.5px var(--ruby),
    0.1px 0.1px 0.5px var(--ruby),
    -0.1px 0.1px 0.5px var(--ruby),
    0.1px -0.1px 0.5px var(--ruby),
    -0.1px -0.1px 0.5px var(--ruby);

  --white-stroke:
    0.1px 0px 0.5px var(--white),
    -0.1px 0px 0.5px var(--white),
    0px 0.1px 0.5px var(--white),
    0px -0.1px 0.5px var(--white),
    0.1px 0.1px 0.5px var(--white),
    -0.1px 0.1px 0.5px var(--white),
    0.1px -0.1px 0.5px var(--white),
    -0.1px -0.1px 0.5px var(--white);

  --black-stroke:
    0.1px 0px 0.5px var(--noir),
    -0.1px 0px 0.5px var(--noir),
    0px 0.1px 0.5px var(--noir),
    0px -0.1px 0.5px var(--noir),
    0.1px 0.1px 0.5px var(--noir),
    -0.1px 0.1px 0.5px var(--noir),
    0.1px -0.1px 0.5px var(--noir),
    -0.1px -0.1px 0.5px var(--noir);
    
   /* Cursors */
   --pink-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 256 256'%3E%3Cpath fill='%23FC0FC0' stroke='%23000000' stroke-width='12' paint-order='stroke fill' d='M240,98a57.63,57.63,0,0,1-17,41L133.7,229.62a8,8,0,0,1-11.4,0L33,139a58,58,0,0,1,82-82.1L128,69.05l13.09-12.19A58,58,0,0,1,240,98Z'/%3E%3C/svg%3E") 16 16, pointer;
   
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


::-moz-selection {
  background: var(--ruby);
  color: var(--white);
  text-shadow: none;
}

::selection {
  background: var(--ruby);
  color: var(--white);
  text-shadow: none;
}

a::-moz-selection {
  background: var(--red) !important;
  color: var(--pink);
}

a::selection {
  background: var(--red) !important;
  color: var(--pink);
}

* {
  -webkit-tap-highlight-color: rgb(86 6 29 / 43%);

}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 12px;
  border-left: 1px solid var(--ruby)
}

::-webkit-scrollbar-thumb {
  background: var(--ruby);
}

/* Hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--pink);
}

/* Active / dragging */
::-webkit-scrollbar-thumb:active {
  background: var(--ruby);
}

::-webkit-scrollbar-button {
  background-color: var(--gray);
  height: 12px;
}

::-webkit-scrollbar-button:hover {
  background-color: var(--red);
}

/* --------------------- GLOBAL SETTINGS --------------------- */

body {
  margin: 0;
  overflow-x: hidden;
  font-weight: 400;
}

html,
body {
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;

}

text,
h1,
h2,
h3,
h4,
h5,
h6 {
  text-rendering: optimizeLegibility;
}

p,
span {
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

.nonatized-text-kit,
.nonatized-text-kit p {
  margin-block-end: 0 !important;
}

a,
a:hover,
button,
button:hover {
  transition: all 0.3s var(--cubic) !important;
}

blockquote {
  margin-block-start: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block-end: 1.5em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding: 15px;
}

blockquote p {
  font-family: var(--serif) !important;
  font-style: italic;
  letter-spacing: -0.5pt !important;
  color: var(--ruby) !important;
  line-height: 1.2 !important;
  margin-block-end: 0 !important;
}

cite {
  margin-block-start: 0 !important;
  color: var(--red) !important;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
}


.wcf-animate,
.wcf-played {
  pointer-events: auto !important;
}

a,
button {
  cursor: pointer !important;
  transition: all 0.3s var(--cubic) !important;
}


a:hover,
button:hover {
  transition: all 0.3s var(--cubic) !important;
}

.nonatized-text-label .elementor-heading-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  padding: 2px 5px !important;
  letter-spacing: 0 !important;
  text-transform: capitalize;
  line-height: 1.4 !important;
}

/* OVERRIDE */

.wcf__posts a,
.wcf__posts button {
  transition: all 0.3s var(--cubic) !important;
}

.elementor-widget-wcf--posts.wcf--image-effect-zoom-in img,
.elementor-widget-wcf--posts.wcf--image-effect-zoom-out img,
.elementor-widget-wcf--posts.wcf--image-left-move img,
.elementor-widget-wcf--posts.wcf--image-right-move img {
  transition: all .5s var(--cubic) !important;
}

header .custom-header {
  z-index: 9999 !important;
}

#nonatized-global-footer {
  z-index: 0 !important;
}

/* INSERT ALL OF THE THEME BUILDERS POST/PAGE DIVS */

div[data-elementor-type="single-post"] {
    max-width: var(--max-desktop);
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   LAPTOP SMALL 

@media (max-width: 1080px) {
h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4, h5, h6 {
  font-size: var(--text-md)
}

}
 ========================================= */

/* =========================================
   TABLET 
 

@media (max-width: 780px) {

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4, h5, h6 {
  font-size: var(--text-md)
}
}
 ========================================= */


/* =========================================
   MOBILE 


@media (max-width: 480px) {


h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4, h5, h6 {
  font-size: var(--text-md)
}

p, span, ul, li, ol, ul li, ol li, blockquote, blockquote p, cite, label {
  font-size: var(--text-sm)!important;
}
  
  
article#article-area p {
  font-size: var(--text-sm);
  text-align: justify;
}
}
 ========================================= */