@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

* {
    box-sizing: border-box;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    -webkit-tap-highlight-color: transparent;
}

html{
    font-family: 'Figtree', sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
    user-select: none;
    -webkit-user-select: none; /* for Safari */
    -moz-user-select: none;    /* for Firefox */
    -ms-user-select: none;     /* for IE/Edge */
    scrollbar-color: #A6D8B364 #00000000;
    scroll-behavior: smooth;
}

body{
    height: 100%;
    width: 100%;
    
    background-color: var(--background);
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    overflow: visible;
}

iframe{
  pointer-events: none;
  border: none !important;      /* force no border */
  outline: none !important;     /* remove focus outline */
  box-shadow: none !important;
}

::-webkit-scrollbar-track {
    background: transparent;
}

:focus{
    outline: none;
}

p, h1, h2, h3, h4, h5, h6{
    margin: 0 0 0 0;
    line-height: 125%;
}

h1{
    font-size: 96px;
    font-weight: 700;
}

h2{
    font-size: 48px;
    font-weight: 700;
}

h3{
    font-size: 28px;
    font-weight: 500;
}

h4{
    font-size: 24px;
    font-weight: 500;
}

h5{
    font-size: 18px;
    font-weight: 500;
}

h6{
    font-size: 16px;
    font-weight: 700;
}

p{
    font-size: 16px;
    font-weight: 500;
    color: var(--paragraph);
    
}

.highlighted{
    color: var(--primary);
    opacity: 1;
}

.spacer8{
    height: 8px;
    width: 0px;
}

.spacer16{
    height: 16px;
    width: 0px;
}

.spacer24{
    height: 24px;
    width: 0px;
}

.spacer64{
    height: 64px;
    width: 100%;
}

.outline{
    box-shadow: inset 0 0 0 2px #8F9991;
}

.outline_quiet{
    box-shadow: inset 0 0 0 2px #8F999150;
}

.outline_silent{
    box-shadow: inset 0 0 0 2px #8F999125;
}

a{
    text-decoration: none;
    color: inherit;
}

footer{
    width: 100%;
    margin: 0 0 0 0;

    box-sizing: border-box;
    padding: 64px;
    display: flex;
    justify-content: center;
}

footer section{
    width: 100%;
    max-width: 1040px;

    display: flex;
    flex-direction: column;
    gap: 32px;
}

footer span{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}

footer div{
    display: inline-flex;
    gap: 8px;
}

header{
    z-index: 999;
}


.flex-hz{
    display: flex;
    flex-direction: row;
}

.flex-vt{
    display: flex;
    flex-direction: column;
}

.flex-hz-reverse{
    display: flex;
    flex-direction: row-reverse;
}

.flex-vt-reverse{
    display: flex;
    flex-direction: column-reverse;
}

.justify-center{
    justify-content: center;
}

.justify-start{
    justify-content: flex-start;
}

.justify-end{
    justify-content: flex-end;
}

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

.align-start{
    align-items: flex-start;
}

.align-end{
    align-items: flex-end;
}

.grid{
    display: grid;
}

.gap-8{
    gap: 8px;
}

.gap-16{
    gap: 16px;
}

.gap-24{
    gap: 24px;
}

.gap-32{
    gap: 32px;
}

.gap-48{
    gap: 48px;
}

.gap-64{
    gap: 64px;
}

.space-between{
    justify-content: space-between;
}

.border-box{
    box-sizing: border-box;
}

.width-100{
    width: 100%;
}

.height-100{
    height: 100%;
}

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