@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@charset "utf-8";

/* ===========================
   VARIABLES
   =========================== */
:root {
  --font-body: "Source Sans 3", sans-serif;
  --weight-body: 400;
  --weight-heading-lg: 700;
  --weight-heading-md: 600; 
  --size-base: 1rem;        /*set in html*/
  --size-sm: 0.875rem;      
  --size-lg: 1.25rem;      
  --size-h1: 2.5rem;        
  --size-h3: 1.5rem;       
}





/* ===========================
   CARD STYLES
   =========================== */

.cardheader {
    background-color: darksalmon !important;
}

.bgcardheader {
    border: 1px solid #410F01 !important;
    background: linear-gradient(135deg, rgba(237,237,180,1) 0%, rgba(230,224,209,1) 100%);
}

.card {
    background: linear-gradient(to right, rgba(203,231,212,1) 0%, rgba(234,245,242,1) 56%, rgba(255,255,255,1) 100%);
}

.cardleft {
    background: linear-gradient(to right, #f0f9ff 0%, #cbebff 47%, #b7ffc7 100%);
}

.cardright {
    background: linear-gradient(to right, #b7ffc7 0%, #cbebff 53%, #f0f9ff 100%);
}

/* ===========================
   BORDERS & SHADOWS
   =========================== */

.fborder {
    border: 1px solid #ccc;
    box-shadow: 5px 10px 26px -4px rgba(5,66,28,0.8);
}

.thumbnail {
    box-shadow: 6px 6px 12px 3px #B0B0B0;
    background-color: linen;
}

/* ===========================
   BACKGROUNDS
   =========================== */

.bgfade {
   background: linear-gradient(to bottom, 
        rgba(255,255,255,1) 0%, 
        rgba(255,255,255,1) 38%, 
        rgba(233,247,242,1) 70%, 
        rgba(199,234,210,1) 100%);
}

/* ===========================
   TYPOGRAPHY & COLORS
   =========================== */
html {
	font-size: var(--size-base);
}
body {
    color: black !important;
	background: linear-gradient(to bottom, 
	rgba(255,255,255,1) 0%, 
	rgba(255,255,255,1) 38%, 
	rgba(233,247,242,1) 70%, 
	rgba(199,234,210,1) 100%);
	font-size: var(--size-base);
	font-weight: var(--weight-body);
}

p {
    color: black !important;
}

a {
    color: #573B16;
    text-decoration: none;
}

a:hover {
    color: #006633;
    text-decoration: underline;
}

.bluelink,
a.bluelink {
    font-size: 140%;
    color: darkblue !important;
}

.volume {
    color: darkred;
}

.volume19 {
    color: darkblue;
}

/* ===========================
   LAYOUT & SPACING
   =========================== */

.min150 {
    min-height: 185px;
}

.margin20 {
    margin-top: 20px;
}

.footerlast {
    margin-bottom: 25px;
}

.floatleft {
    float: left;
    padding-right: 5px;
    padding-bottom: 5px;
}

/* ===========================
   EFFECTS & ANIMATIONS
   =========================== */

.grow {
    transition: all 0.2s ease-in-out;
}

.grow:hover {
    transform: scale(1.1);
}

/* ===========================
   HORIZONTAL RULE
   =========================== */

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, 
        rgba(0, 0, 0, 0), 
        rgba(0, 0, 0, 0.75), 
        rgba(0, 0, 0, 0));
}