@import url('https://fonts.googleapis.com/css2?family=Albert+Sans&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,1000,96,468,79,-203,738,514,712&family=Rubik:wght@900&display=swap');

:root {
    --bs-heading-color: #210B2C;
    --light-color: #F8CEBA;
    --color1: #ED7366;
    --color2: #6F7BC9;
    --font1: "Roboto Flex";
    --font2: "Rubik";
    --font3: "Albert Sans";
}


.roboto-flex-<uniquifier> {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: 1000;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}


.rubik-<uniquifier> {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}


.albert-sans-<uniquifier> {
  font-family: "Albert Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html{
    box-sizing: border-box;
    font-size: 1rem;
}

body{
    background: var(--light-color);
    color: var(--bs-heading-color);
}

h1{
    font-family: var(--font1);
    font-size: 10rem; 
    line-height: .78;
    text-transform: uppercase;
}

.bricks{
  --s: 60px; /* control the size*/
  --c1: #f9d3c1;
  --c2: #f8ceba;
  --g:conic-gradient(at 90% 40%,#0000 75%,var(--c1) 0);
  
  background: var(--g),var(--g) var(--s) var(--s) var(--c2);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}

.pb-10{
    padding-bottom: 10rem;
}