/* BASE */

body{
  font-family: 'Inter', sans-serif;
}

/* PC */

.pc{
  position: relative;

  width: 90px;
  height: 90px;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  gap: 8px;

  border-radius: 24px;

  background: rgba(15, 23, 42, 0.9);

  border: 1px solid rgba(255,255,255,0.08);

  transition: all .3s ease;

  backdrop-filter: blur(10px);

  flex-shrink: 0;

  cursor: pointer;

  overflow: visible;

  z-index: 1;
}

@media (min-width: 640px){

  .pc{
    width: 120px;
    height: 110px;
  }

}

.pc:hover{
  border-color: #f97316;

  box-shadow:
    0 0 25px rgba(249,115,22,0.15);

  z-index: 2;
}

.pc i{
  width: 28px;
  height: 28px;
}

@media (min-width: 640px){

  .pc i{
    width: 38px;
    height: 38px;
  }

}

.pc span{
  font-size: 14px;
  color: rgb(226 232 240);
}

/* STATUS COLORS */

.green{
  border-color: rgba(34,197,94,.4);
}

.red{
  border-color: rgba(239,68,68,.4);
}

/* STATUS DOT */

.status{
  position: absolute;

  top: 10px;
  right: 10px;

  width: 10px;
  height: 10px;

  border-radius: 999px;
}

.green-dot{
  background: #22c55e;

  box-shadow:
    0 0 12px #22c55e;
}

.red-dot{
  background: #ef4444;

  box-shadow:
    0 0 12px #ef4444;
}

/* TOOLTIP */

.pc-tooltip{
  position: absolute;
  overflow: visible;

  left: 50%;
  bottom: -120px;

  transform:
    translateX(-50%)
    translateY(10px);

  width: 200px;

  z-index: 999999;

  padding: 16px;

  border-radius: 22px;

  background:
    rgba(15, 23, 42, 0.95);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(20px);

  opacity: 0;

  pointer-events: none;

  transition: .25s ease;

  z-index: 99999;

  box-shadow:
    0 15px 40px rgba(0,0,0,.35);
}

.show-tooltip{
  opacity: 1;

  pointer-events: auto;

  transform:
    translateX(-50%)
    translateY(0px);
}

.pc-tooltip h3{
  font-size: 16px;
  font-weight: 600;

  color: white;
}

.pc-tooltip p{
  margin-top: 10px;

  font-size: 14px;

  color: rgb(148 163 184);
}

.pc-tooltip span{
  color: white;
  font-weight: 600;
}

.tooltip-content{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tooltip-name{
  font-size: 15px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.tooltip-grades{
  font-size: 13px;
  color: rgb(148 163 184);
  margin: 0;
}

.tooltip-grades span{
  color: rgb(248, 113, 113);
  font-weight: 600;
}

.tooltip-divider{
  width: 100%;
  height: 1px;

  margin-top: 12px;

  background:
    rgba(255,255,255,0.08);
}

/* NOTE CARD */

.note-card{
  position: relative;

  overflow: hidden;

  border-radius: 24px;

  border: 1px solid rgba(255,255,255,.08);

  height: 220px;

  transition: .3s ease;
}

@media (min-width: 1024px){

  .note-card{
    height: 260px;
  }

}

.note-card:hover{
  transform: translateY(-4px);

  border-color: rgba(249,115,22,.4);

  box-shadow:
    0 0 30px rgba(249,115,22,.1);
}



.note-card img{
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.note-overlay{
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  padding: 24px;

  background:
    linear-gradient(
      transparent,
      rgba(2,6,23,.95)
    );
}

.note-overlay h3{
  font-size: 20px;
  font-weight: 600;
}

.note-overlay p{
  margin-top: 6px;

  color: rgb(148 163 184);

  font-size: 14px;
}