:root {
  --blue-cover: rgb(70, 189, 211);
  /* font-size: 2em; */
}

body {
  background-color: lightblue;
  /* background-color: rgb(51, 57, 84); */
  background-image: url("/davidpages/img/texture/black-linen.png");

  /* color:lightblue; */
  color:black;
}

.home-link {
  /* color:rgb(0, 80, 80); */
  background-color: lightblue;
  padding: 10px;
  /* border: 1px solid black; */
  display: inline flex;
}

#notebook-container {
  /* background-color: white; */
  padding: 10px;
  
  width: fit-content;
  margin-inline: auto;
  display: flex;
  flex-flow: row wrap;
}

#notebook-container a {
  margin:10px;
  /* border: 1px solid black; */
}

#notebook-container img:not(.new) {
  all: revert;
  height: 100%;
  max-height: 30vh;
  display: flex;
  /* border: 1px solid red; */
}

#notebook-container a:hover {
  filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2)) brightness(130%)
}

.wrapper {
  position: relative;
}

.new {
  all: revert;

  scale: 200%;

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(15%, -15%);

  pointer-events:none;
}

/* stealing this from notebook css */
.btn {
  /* not fixed size tho */
  /* width: 2.5em; */
  /* height: 2.5em; */
  padding: 0.4em;

  border: 2px outset var(--blue-cover);
  border-radius: 5px;

  background-color: lightblue;
}
.btn:not(:disabled) {
  cursor: pointer;
}
.btn:active {
  background-color: skyblue;
  border: 2px inset var(--blue-cover);
  border-radius: 5px;
}
.btn:disabled {
  background-color: silver;
  border: 2px inset lightgray;
  border-radius: 5px;
  cursor: not-allowed;
}