:root {
	--yalBlack: rgb(26, 26, 26);
	--yalBlackA60: rgba(26, 26, 26, .6);
	--yalBlackA30: rgba(26, 26, 26, .3);
	--yalWhite:  rgb(241, 241, 241);
	--djWhiteA60:  rgba(241, 241, 241, 0.6);
	--djWhiteA30:  rgba(241, 241, 241, .3);
	--yalCyan: rgb(0, 188, 212);
	--yalCyanA30: rgba(0, 188, 212, .3);
	--yalCyanHover: rgb(0, 160, 180);
	color: var(--yalBlack);

  --maxWidth: 1080px
}

@font-face { font-family: 'Assistant Regular'; src: url('../fonts/Assistant-Regular.ttf'); font-display: swap;}
@font-face { font-family: 'Alef Bold'; src: url('../fonts/Alef-Bold.ttf'); font-display: swap;}
@font-face { font-family: 'Segoe UI Black'; src: url('../fonts/segoeuib.ttf'); font-display: swap;}

* {
  font-family: 'Assistant Regular', 'Arial', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
  box-sizing: border-box;
	line-height: 1.75rem;
}

h1 {
	/* text-align: right; */
	font-family: 'Alef Bold', 'Segoe UI Black', Tahoma;
	font-size: clamp(24px,5vw,43px);
}

h2 {
	margin-bottom: 20px;
	text-align: center;
  font-size: 1.5rem;
}

h3 {
	margin-bottom: 20px;
	text-align: center;
  font-size: 2rem;
}

ul {
	margin: 0 auto;
	list-style-position: inside;
}

.secSection{
	margin: 50px auto;
	width: 100%;
	background: #fafafa;
  padding: 40px 10%;
  /* border-radius: 20px; */
}

.divButton {
  margin-top: auto;
  padding: 20px 0;
  text-align: center;
}

.btn {
	display: inline-block;
  padding: 10px 24px;
  border-radius: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: 
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
  border: none;
  text-decoration: none;
}

.btnPrimary {
  background-color: var(--yalCyan);
  color: var(--yalWhite);
}

.btnPrimary:hover {
  background-color: var(--yalCyanHover);
}

.btnPrimary:active {
  transform: scale(.97);
}

.btnPrimary:focus {
  outline: 3px solid rgba(0,188,212,.4);
  outline-offset: 3px;
}

.btnSecondary {
  background-color: var(--yalWhite);
  color: var(--yalCyan);
  box-shadow: 0 0 0 2px var(--yalCyan) inset;
}

.btnSecondary:hover {
  background-color: rgba(255,255,255,0.85);
}

.btnSecondary:active {
  transform: scale(.97);
}

.btnSecondary:focus {
  outline: 3px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}

.btnInvert {
  background-color: var(--yalWhite);
  color: var(--yalCyan);
}

.btnInvert:hover {
  background-color: var(--yalCyanHover);
  color: var(--yalWhite);
}

.btnInvert:active {
  transform: scale(.97);
}

.btnInvert:focus {
  outline: 3px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}

.btnOutline {
  background-color: transparent;
  color: var(--yalCyan);
  box-shadow: 0 0 0 2px var(--yalCyan) inset;
}

.btnOutline:hover {
  background-color: var(--yalCyanA30);
}

.btnOutline:active {
  transform: scale(.97);
}

.btnOutline:focus {
  outline: 3px solid rgba(0,188,212,.4);
  outline-offset: 3px;
}

/* In footer */
.divContainer {
  max-width: var(--maxWidth);
  margin: auto;
}