/* fonts */

@font-face {
  font-family: 'Inter-Regular';
  font-style:  normal;
  font-weight: 400;
  src: url("./fonts/Inter-Regular.woff2") format("woff2"),
       url("./fonts/Inter-Regular.woff") format("woff");
}

@font-face {
  font-family: 'Inter-Bold';
  font-style:  normal;
  font-weight: 700;
  src: url("./fonts/Inter-Bold.woff2") format("woff2"),
       url("./fonts/Inter-Bold.woff") format("woff");
}

/* elements */

body {
  font-family: "Inter-Regular";
  font-size: 16px;
  color: #0d1824;
  min-height: 95vh;
  margin-left: 4%;
}

header {
  margin-top: 1%;
}

main {
  margin-top: 1%;
  display: flex;
  height: 800px;
}

footer {
  margin-top: 1%;
  font-family: 'Inter-Bold';
}

hr {
  width: 50%;
  margin: 0px;
  border: 1px solid #0d1824;
}

.title {
  text-transform: capitalize;
  font-family: 'Inter-Bold';
}

.sketch {
  flex: 75%;
  background-color: #F1ECE0;
}

.information {
  flex: 25%;
  margin-left: 1%;
}

.count {
  font-family: 'Inter-Bold';
}

.hover {
  color: #f8381f;
}

.button {
  background-color: white;
  border: 1.5px solid #0d1824;
  cursor: pointer;   
}

.button:hover {
  background-color: #0d1824;
  color: white;
}

/* captures */

.dot-archived {
  stroke: #0d1824;
  fill: #0d1824;
  cursor: pointer;
}

.dot-archived:hover {
  stroke: #f8381f;
  fill: #f8381f;
  stroke-width: 5px;
}

.dot-unarchived {
  stroke: #fea82e;
  fill: #fea82e;
  cursor: pointer;
}

.dot-unarchived:hover {
  stroke: #f8381f;
  fill: #f8381f;
  stroke-width: 5px;
}

/* cliques */

.clique {
  stroke: #63c4e2;
  stroke-opacity: 0.05;
}

/* cernes */

.in-cerne {
  stroke-dasharray: 3;
  fill: none;
  stroke: #999;
  cursor: pointer;
}

.in-cerne:hover {
    stroke-width: 2px;
    stroke: #f8381f;
}

.out-cerne-archived {
  fill: none;
  stroke: #0d1824;
  stroke-width: 2px;
}

.out-cerne-un-archived {
  fill: none;
  stroke: #fea82e;
  stroke-width: 2px;
}

/* moments */

.moment {
  cursor: pointer;
}

.moment:hover {
    stroke-width: 2px;
    stroke: #f8381f;
}