:root {
  --primary: #59b35f;
  --secondary: #008b78;
  --tertiary: #188a4c;
  --blue: #4a6cd4;
  --dark: #2c2c2c;
  background: white;
  text-align:center;  
}


/*
nav {
  background: linear-gradient(0deg, var(--primary) 24px, white 100%);
}

nav a {padding-top:10px; padding-bottom:10px}
*/


html, body {
  font-family: "Noto Sans Variable", sans-serif;
  height: 100%;
  font-variation-settings: 'wght' 350;
}


/* body {
  display: grid;
  grid-template-rows: auto 1fr auto;
} */

nav, nav a { height: 54px}

/* svg .st0 {fill:#59B35F;}
svg .st1 {fill:#008B78;}
svg .st2 {fill:#188A4C;} */

svg .st0 {fill: var(--primary)}
svg .st1 {fill: var(--secondary);}
svg .st2 {fill: var(--tertiary);}

svg:hover .st0 {fill: var(--secondary);}
svg:hover .st1 {fill: var(--tertiary);}
svg:hover .st2 {fill: var(--secondary);}

.djhj-button  {   color:black }

.page a { text-decoration: underline; color: var(--tertiary)}
.page a:hover { color: var(--primary);}
.page h3 { margin: 1.5rem 0; }
.page p, .blog p, .blog figure { margin-bottom: 1rem}
.page h3 a { text-decoration: none; }

/* img {
  display: inline
} */

summary::marker {
  display:none;
  color: var(--primary);
}

button a:hover {
  color: white
}

.search button a {
  color: var(--primary);
}

.search button:hover a, .search button.active a{
  color: white;
}

iframe { 
  max-width: 100%;
}

.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f !important;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
}
.gsi-material-button:hover { background-color: #f0f0f0;}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
  color: #1f1f1f !important;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

.github {
  font-size: 14px;
  height: 42px;

  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0px;
  width: 184px;
  padding-left: 0px;
  padding-right:0px
}