html {
  min-height: 100%;
}

:focus {
  outline-width: 0px;
}

body {
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(0, 5, 255, 1) 100%);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.header-img {
  width: 130px;
  padding: 10px;
}

.website-title {
  font-size: 30px;
  font-weight: bold;
}

.website-url {
  font-size: 20px;
}

.remarque-modal {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 10px;
  background-color: rgb(255 255 255 / 46%);
  border: 1px solid rgb(44 44 201);
  border-radius: 5px;
  width: 250px;
  margin-top: 20px;
  justify-content: center;
  text-align: center;
  padding: 10px;
  color: black;
  backdrop-filter: blur(10px);
}

.remarque-modal-text{
  padding: 5px;
}

.remarque-actions{
  position: absolute;
  right: 3px;
  top: 3px;
  color: #000000;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remarque-actions:hover{
  color: rgb(105, 105, 105);
  cursor: pointer;
}

.remarque-modal-button{
  background-color: #0f8fd1;
  padding: 10px;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  display: flex;
  justify-content: center;
  transition: 0.2s;
  cursor: pointer;
  backdrop-filter: blur(10px);
}


.app {
  margin: auto;
  width: 300px;
}

.notes-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-div {
  display: flex;
  gap: 5px;
}

input {
  width: calc(100% - 67px);
  padding: 8px;
  border: 1px solid gray;
  border-radius: 5px;
}

select {
  padding: 7px;
  border-radius: 5px;
  width: 44px;
}

.notes-header {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

#calculateBtn {
  background-color: #0f8fd1;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  transition: 0.2s;
  cursor: pointer;
}

#calculateBtn:hover {
  background-color: #004568;
}

.calculateDiv {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 10px;
}

#average {
  font-size: 35px;
}

.result {
  display: flex;
  justify-content: center;
}

.historique {
  border: 1px solid black;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.historiqueTitle {
  font-weight: bold;
  text-align: center;
}

.addNoteToHistoBtn {
  transition: 0.2s;
  margin-top: 5px;
  background-color: #0f8fd1;
  color: white;
  padding: 10px;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.addNoteToHistoBtn:hover {
  background-color: #186f9b;
}

.disabled {
  cursor: not-allowed;
  background-color: gray;
}

.disabled:hover {
  cursor: not-allowed;
  background-color: gray;
}

.data {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.moyenneElement {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deleteNoteBtn {
  cursor: pointer;
  transition: 0.2s;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}

.deleteNoteBtn:hover {
  font-size: 18px;
}

.manageData {
  display: flex;
  padding: 10px;
  justify-content: center;
  gap: 10px;
}

#exportData,
#importData {
  background-color: #0f8fd1;
  padding: 10px;
  border-radius: 5px;
  color: white;
  width: 100%;
  display: flex;
  justify-content: center;
  transition: 0.2s;
  cursor: pointer;
}

#exportData:hover,
#importData:hover {
  background-color: #186f9b;
  ;
}

/* BY REDNIX.CH */
.copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  gap: 10px
}

.footer-img {
  width: 30px;
  cursor: pointer;
  transition: 0.3s;
}

.footer-img:hover {
  filter: drop-shadow(0.5rem 0 0.08rem rgb(255, 0, 0));
}

/* END OF FOOTER */

.website-url-icon {
  position: relative;
  top: 5px;
  right: 3px;
}

.resetBtn {
  background-color: rgb(206, 201, 201);
  color: rgb(0, 0, 0);
  align-self: flex-start;
  padding: 2px;
  border-radius: 5px;
  cursor: pointer;
  margin: auto;
}

.graph-button {
  padding: 3px;
  border-radius: 5px;
  background-color: white;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  margin-left: 240px;
  margin-top: 10px;
  cursor: pointer;
  transition: 0.3s
}

.graph-button:hover {
  border-radius: 1px;
  background-color: #abe1fc;
}

.fullscreenGraph {
  position: sticky;
  top: 0;
  height: 100vh;
  /* For IE8 and earlier */
  z-index: 100;
  background-color: white;
  padding: 20px;
}

#fullscreenGraph {
  width: 100%;
  margin-top: 30px;
}

.fullScreenTitle {
  font-weight: bold;
  position: absolute;
  top: 30px
}

.fullButtons {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  flex-direction: row-reverse;
  gap: 5px
}

.fullButton {
  padding: 3px;
  border-radius: 5px;
  background-color: white;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  gap: 5px
}

.fullButton:hover {
  border-radius: 1px;
  background-color: #abe1fc;
}

.fullGraph {
  scroll-margin: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.website-subtitle {
  font-size: 18px;
}

.surovin-ad {
  font-size: 15px;
  font-weight: normal;
  font-style: italic;
}

.subject-manager {
  display: flex;
  justify-content: space-between;
}

.subject-add {
  background-color: rgb(234, 248, 255);
  border: 1px solid rgb(0, 181, 236);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 30px;
  cursor: pointer;
  transition: 0.3s
}

.subject-remove {
  background-color: rgb(234, 248, 255);
  border: 1px solid rgb(0, 181, 236);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 30px;
  cursor: pointer;
  transition: 0.3s
}

.subject-add:hover {
  width: 42px;
  border: 1px solid gray;
}

.subject-remove:hover {
  width: 42px;
  border: 1px solid gray;
}