/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: lightpink;
  color: crimson;
  font-family: Helvetica;
  margin: 40px;
  cursor: url("images/cursor.png"), auto;
}

h1, h2, h3, p, ul {
  margin-top: 0;
}
p {
  margin-bottom: 12px;
  line-height: 1.5;
}

h1 {
  margin-bottom: 10px;
}

h2 {
  margin-bottom: 8px;
}

ul {
  margin-bottom: 16px;
}

a:link {
  color: deeppink;
}
a:visited {
  color: tomato;
}
.email-button:link,
.email-button:visited {
  color: white;
}


.container {
  display: flex;
  height: 100vh; /* full screen height */
}
/* Sidebar */
.sidebar {
  width: 250px;
  padding: 20px;
  background: lightpink;
  box-sizing: border-box;
}
.sidebar nav a {
  display: block;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #ffe6ec;
  border: 2px solid #d64c6a;
  font-family: monospace;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 3px 3px 0 crimson;
  transition: all 0.1s ease;
}

.sidebar nav a:link,
.sidebar nav a:visited {
  color: #d64c6a;
}

.sidebar nav a:hover {
  background: #d64c6a;
  color: white;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 crimson;
}



.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 30px;
  box-sizing: border-box;
  margin: 40px auto;
   background: LavenderBlush;
  border: 2px solid crimson;
  box-shadow: 4px 4px 0 crimson;
  overflow-y:scroll;
}
.content::-webkit-scrollbar {
  width: 12px;
}

.content::-webkit-scrollbar-track {
  background: #ffe6ec;
  border-left: 2px solid crimson;
}

.content::-webkit-scrollbar-thumb {
  background: crimson;
  border: 2px solid #ffe6ec;
}

@media (max-width: 800px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .content {
    flex-direction: column;
  }
}

.three-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}


.col img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

@media (max-width: 800px) {
  .three-columns {
    grid-template-columns: 1fr;
  }
}

.panel {
  background: #fff6f8;
  border: 2px solid #d64c6a;
  padding: 20px;
  margin-bottom: 25px;
  box-sizing: border-box;
}

.panel-header {
  font-size: 12px;
  font-family: monospace;
  text-transform: lowercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: #d64c6a;
}
.panel-header {
  background: #d64c6a;
  color: white;
  padding: 4px 8px;
  margin: -20px -20px 15px -20px;
  font-size: 12px;
  font-family: monospace;
  text-transform: lowercase;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: #ffe6ec;
  border: 2px solid #d64c6a;
  padding: 4px 10px;
  font-family: monospace;
  text-transform: lowercase;
  width: 250px;
}

.status-badge .dot {
  width: 8px;
  height: 8px;
  background: #d64c6a;
  display: inline-block;
}

.todo-box {
  background: #fff6f8;
  border: 2px solid #d64c6a;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  font-family: monospace;
}

.todo-header {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: #d64c6a;
  text-transform: lowercase;
}

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-list li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
  font-family: monospace;
}

.todo-list li::before {
  content: "□";
  position: absolute;
  left: 0;
  color: #d64c6a;
}

.girls-row {
  display: flex;
  gap: 15px;
  justify-content: space-between;
}

.girl {
  text-align: center;
  flex: 1;
}

.girl img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.nametag {
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: monospace;
  background: #ffe6ec;
  border: 2px solid #d64c6a;
  display: inline-block;
}

.email-button {
  display: inline-block;
  padding: 8px 16px;
  background: #d64c6a;
  color: white;
  text-decoration: none;
  font-family: monospace;
  font-size: 12px;
  border: 2px solid white;
  box-shadow: 3px 3px 0 crimson;
  transition: all 0.1s ease;
}

.email-button:hover {
  background: crimson;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 crimson;
}