/* 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." */

.desk {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
  gap:40px;
}

.welcome {
  text-align: center;
}


body {
  margin: 0;
  font-family: Arial;
  background: #f4f4f4;
}

.sidebar {
  position: fixed;
  width: 200px;
  height: 100vh;
  background: #e9e9e9;
  padding: 20px;
}

.sidebar a {
  display: block;
  margin: 15px 0;
  text-decoration: none;
  color: #333;
}

.content {
  margin-left: 240px;
  padding: 40px;
}

.card {
  background: white;
  width: 200px;
  padding: 15px;
  border-radius: 8px;
  display: inline-block;
  margin: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.card img {
  width: 100%;
  border-radius: 6px;
}

.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.binder-link a {
  background: white;
  padding: 20px 40px;
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  font-size: 20px;
  box-shadow: 0 0px 20px rgba(0,0,0,.1);
  display:inline-block;
 
}

.guestbook-box {
  max-width: 800px;
  margin: 60px auto;
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,.1);
}

.guestbook-box iframe {
  margin-top: 20px;
  border-radius: 8px;
}

.profile {
  display: flex;
  gap: 30px;
}

.infobox {
  width: 250px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.infobox img {
  width: 100%;
  border-radius: 6px;
}

.infobox table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 14px;
}

.infobox td {
  padding: 6px;
  border-bottom: 1px solid #ddd;
}

.infobox td:first-child {
  font-weight: bold;
  color: #555;
}

.bio {
  flex: 1;
  background: white;
  padding: 30px;
  border-radius: 10px;
}

.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tabs a {
  background: #eaeaea;
  padding: 8px 15px;
  border-radius: 8px 8px 0 0;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.tabs a:hover {
  background: #ddd;
}