/* 	
/////
I: Reset 
	// A (more) Modern CSS Reset
	// by Andy Bell
/////
*/

/*Boxsizingrules*/*,*::before,*::after{box-sizing:border-box;}/*Preventfontsizeinflation*/html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}/*RemovedefaultmargininfavourofbettercontrolinauthoredCSS*/body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;}/*Removeliststylesonul,olelementswithalistrole,whichsuggestsdefaultstylingwillberemoved*/ul[role='list'],ol[role='list']{list-style:none;}/*Setcorebodydefaults*/body{min-height:100vh;line-height:1.5;}/*Setshorterlineheightsonheadingsandinteractiveelements*/h1,h2,h3,h4,button,input,label{line-height:1.1;}/*Balancetextwrappingonheadings*/h1,h2,h3,h4{_text-wrap:balance;}/*Aelementsthatdon'thaveaclassgetdefaultstyles*/a:not([class]){text-decoration-skip-ink:auto;color:currentColor;}/*Makeimageseasiertoworkwith*/img,picture{max-width:100%;display:block;}/*Inheritfontsforinputsandbuttons*/input,button,textarea,select{font-family:inherit;font-size:inherit;}/*Makesuretextareaswithoutarowsattributearenottiny*/textarea:not([rows]){min-height:10em;}/*Anythingthathasbeenanchoredtoshouldhaveextrascrollmargin*/:target{scroll-margin-block:5ex;}
/* 
/////
II: Imports 
/////
*/
@font-face {
  font-display: swap;
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
}
/* lexend-deca-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 600;
  src: url("../webfonts/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2");
}
/* lexend-deca-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  src: url("../webfonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
}


/* 
/////
III: Variables 
/////
*/
:root {

	/* Typography */
	--sans-serif: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
	--scale: 1.26;
	--base: 1rem;
	
	/* color */
	--primary: #544496;
	--bg: #FAE9DB;

	--contrast-1: #BD5B28;
	--contrast-2: #79754E;
	--contrast-3: #5F71A9;
	--contrast-4: #F08489;

	--white: #fff;
	--black: #000;

	/* Shapes */
	---bubble-radius: 57rem;

}




/* 
/////
IV: Base Styles 
/////
*/
body {
	width: 100vw;
	overflow: hidden;
	overflow-y: auto;
	font-family: var(--sans-serif);
	background: var(--bg);
	color: var(--primary);
	hyphens: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-size: calc(var(--base) * pow(var(--scale), var(--font-factor, 0)));
}
h1 { --font-factor: 5; }
h2 { --font-factor: 4; }
h3 { --font-factor: 3; }
h4 { --font-factor: 2; }
h5 { --font-factor: 1; }


/* 
/////
V: Components 
/////
*/
.wrapper {
	width: min(100% - 4rem, 80rem);
	margin-inline: auto;
}

.bubble {
	--border-bubble: var(--primary);
	--bg-bubble: var(--bg);

	border: thin solid var(--border-bubble);
	padding: 1rem 2rem;
	border-radius: var(---bubble-radius);
	display: inline-block;

}
.bubble--white {
	--bg-bubble: var(--white);
	background: var(--white);
}
.bubble_arrow {
	position:relative;
	margin-bottom: 2rem;

	&:before {
	  content:"";
	  position: absolute;
	  bottom: -2rem;
	  border-top: 0 solid transparent;
	  
	}
	&:after {
	   content:"";
	   position: absolute;
	   bottom: calc(2px - 2rem);
	   border-top: 0 solid transparent;
	   
	}
	&:is(.bubble_arrow--left) {
		&:before {
			left: 4rem; 
			border-left: 2rem solid var(--border-bubble);
			border-bottom: 2rem solid transparent;
		}
		&:after {
			left: calc(4rem + 1px);
			border-left: calc(2rem - 2px) solid var(--bg-bubble);
			border-bottom: calc(2rem - 2px) solid transparent;
		}
	}
	&:not(.bubble_arrow--left) {
		&:before {
			right: 4rem; 
			border-right: 2rem solid var(--border-bubble);
			border-bottom: 2rem solid transparent;
		}
		&:after {
			right: calc(4rem + 1px);
			border-right: calc(2rem - 2px) solid var(--bg-bubble);
			border-bottom: calc(2rem - 2px) solid transparent;
		}
	}

}