path: root/src/scss/index.scss

@charset "utf-8";

// Import Google Fonts
//@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700&display=swap');

// Palette
//$pine-green: #01646d;
//$midnight-green: #114b5f;
//$eton-blue: #88d498;
//$pastel-gray: #c6dabf;
//$isabelline: #f7f4ea;
$darkteal: rgb(0, 100, 108);
$green: rgb(88, 169, 143);
$darkerteal: rgb(29, 133, 137);
$gray: rgb(157, 210, 211);
$teal: rgb(58, 165, 166);
$cyan: rgb(156, 210, 210);
$darkgray: rgb(127, 177, 181);
$darkgreen: rgb(59, 136, 114);
$yellow: rgb(186, 214, 187);

// Update Bulma's global variables
// $primary: $pine-green;
// $link: $midnight-green;
// $info: $cyan
// $success: $eton-blue;
// $warning: $yellow
// $danger: $red
// $dark: $grey-darker
// $text: $grey-dark
$family-sans-serif: "PT Sans", sans-serif;
// $hr-background-color: $primary;
$title-color: white;
//$subtitle-color: white;

// $body-background-color: $isabelline;

// Import only what you need from Bulma
@import "../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../node_modules/bulma/sass/base/_all.sass";
@import "../../node_modules/bulma/sass/elements/_all.sass";
@import "../../node_modules/bulma/sass/form/_all.sass";
@import "../../node_modules/bulma/sass/components/_all.sass";
@import "../../node_modules/bulma/sass/layout/_all.sass";
@import "../../node_modules/bulma/sass/grid/_all.sass";

.darkteal {
	background-color: $darkteal;
	color: white;
}
.green {
	background-color: $green;
	color: white;
}
.darkerteal {
	background-color: $darkerteal;
	color: white;
}
.gray {
	background-color: $gray;
	color: white;
}
.teal {
	background-color: $teal;
	color: white;
}
.cyan {
	background-color: $cyan;
	color: white;
}
.darkgray {
	background-color: $darkgray;
	color: white;
}
.darkgreen {
	background-color: $darkgreen;
	color: white;
}
.yellow {
	background-color: $yellow;
	color: white;
}

.blurb {
	background-color: white;
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

.banner {
	border-radius: 5px !important;
	clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.quiet {
	background-color: white;
}

body {
	background-image: url("/bg.png");
}