@import url("//fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap");
:root {
  --prevision-primary: #19293c;
  --prevision-secondary: #fd7c34;
  --prevision-tertiary: #4ba5d8;

  --lighter-grey: #c0bebb;
  --base-grey: #e5e5e5;
  --darkest-grey: #4c4c4c;
  --spacing-unit: 10px;

  --color-danger: #fd4134;
  --color-warning: #fd7c34;
  --color-confident: #97c44e;
  --color-perfect: #4ba5d8;
  --button-size: 175px;
}

body {
  background-color: var(--prevision-primary);
  color: white;
  font-family: "Roboto", sans-serif;
}

h1 {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

#about-cheezam-text p {
  margin-top: 1.4em;
}
h3 {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: bolder;
  font-size: 24px;
  color: var(--prevision-secondary);
}

em {
  font-weight: bold;
  line-height: 2em;
}

header {
  background-color: var(--prevision-primary);
  border-bottom: 2px solid var(--lighter-grey);
}

#links {
  background-color: var(--base-grey);
}

#links > nav {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 0em;
  color: var(--prevision-primary);
  padding-top: 10px;
  text-align: center;
}

#links > nav:hover {
  filter: invert(55%) sepia(90%) saturate(2480%) hue-rotate(340deg) brightness(101%) contrast(99%);
}
.top-me {
  /* tip Use filter to color svg */
  /*https://codepen.io/sosuke/pen/Pjoqqp*/
  filter: invert(0%) sepia(96%) saturate(24%) hue-rotate(97deg) brightness(89%)
    contrast(100%);
}

.top-me img {
  height: 24px;
}

.top-me span {
  height: 20px;
  font-size: 10px;
}

.active {
  filter: invert(73%) sepia(46%) saturate(5408%) hue-rotate(336deg)
    brightness(99%) contrast(100%);
}

/* Special css for button link */
.big-button {
  border-radius: 7px;
}

.rtd-button {
  border: 1px solid var(--prevision-tertiary);
  color: var(--prevision-tertiary);
}

.subscribe-button {
  background-color: var(--prevision-secondary);
  color: white;
}

main {
  background: var(--prevision-primary);
}

aside {
  border-left: dotted var(--prevision-secondary) 1px;
  padding: 2em;
}


a {
  color: var(--prevision-tertiary);
  text-decoration: none; /* no underline */
}

footer a {
  color: var(--prevision-primary);
  text-decoration: none; /* no underline */
}

/* Specific Element : Square around image */
.big-label {
  color: var(--prevision-secondary);
  font-family: "Montserrat", sans-serif;
}

.big-value {
  color: var(--prevision-tertiary);
  font-family: "Montserrat", sans-serif;
}

.bounding-box {
  border: 2px solid var(--prevision-secondary);
}


/* The rec Card */

figure {
  margin-top: 1em;  ;
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: row;
  background-color: white;
  box-shadow: 10px 10px 22px #333;
  border-radius: 20px;
}

figure img {
  width: 25%;
  object-fit: cover;
  margin: 3%;
}

figure figcaption{
  flex: 2;
  margin: 10%;
}

figure h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  margin-bottom: 10px;
  text-align: left;
}

figure p {
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
}

figure a {
  color: var(--prevision-primary);
  text-decoration: none; /* no underline */
}
/* End REC Cards */


.sure {
  border-width: 2px;
  border-style: solid;
  border-color: var(--color-perfect);
  background:rgba(75, 165, 216, 0.2);
}
.quite-sure {
  border-width: 2px;
  border-style: solid;
  border-color: var(--color-confident);
  background:rgba(75, 165, 216, 0.2);
}
.not-quite-sure {
  border-width: 2px;
  border-style: solid;
  border-color: var(--color-warning);
  background:rgba(75, 165, 216, 0.2);
}
.not-sure {
  border-width: 2px;
  border-style: solid;
  border-color: var(--color-danger);
  background:rgba(75, 165, 216, 0.2);
}
/** --- End style from preds --**/

.bounding-box-label {
  font-size: 16px;
  color: var(--accent-violet);
  font-size: 20px;
  font-weight: 400;
}

#pred-result {
  font-size: 20px;
  font-weight: 400;
  color: var(--accent-violet);
}

#error-message {
  color: white;
  text-align: center;
  font-size: 32px;
}

#user-msg {
  border: 3px solid var(--prevision-secondary);
  background-color: var(--darkest-grey);
  font-family: "Montserrat", sans-serif;
  font-weight: bolder;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: var(--button-size);
  border-radius: 50%;
  height: var(--button-size);
  width: var(--button-size);
  cursor: pointer;
}

/* Code */
pre code {
  font-family: 'Courier New', Courier, monospace;
  padding: 10px !important;
  display: block;
  background: var(--darkest-grey);
  border-radius: 10px;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  max-width: 100%;
  min-width: 100px;
  padding: 0;
}