.body, html {
  margin: 0;
  padding: 0;
}

/* Allow scrolling */
body {
  overflow-y: auto;
  overflow-x: hidden;
}

.background {
  position: fixed;
  top: -7.5%;
  left: -7.5%;
  transform: translate(-50%, -50%);
  width: 120%; /* Set the width to be larger than the viewport */
  height: 120%; /* Set the height to be larger than the viewport */
  background-image: url('/assets/l/priv/tf2_bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

header {
  position: relative;
  width: 100%;
  height: 33.33vh;
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100%); /* Take up the image size + 25% */
  height: 100%;
  background-color: rgba(68, 134, 219, 0); 
}

.header-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
}




/* Add this to your existing CSS */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px; 
}

.project {
  text-align: center;
  
}

.project img {
  width: auto; /* Adjust icon size */
  height: 100px;
  cursor: pointer;
  transition: transform 0.3s ease; /* Add transition for smoother rotation */
}

.project img:hover {
  transform: scale(1.1) rotateX(-20deg) rotateY(20deg); /* Scale up and initial rotation on hover */
  transform-origin: center; /* Set the transform origin to the center */
}

.project-name {
  font-family: 'ConthraxSB', Arial, sans-serif; /* Use custom font */
}

/* Project Info Window */
.project-info-window {
  position: fixed;
  top: 25%;
  left: 25%;
  transform: translate(-50%, -50%) translateY(-100%); /* Start position at the top */
  width: 50%;
  max-height: 75%; /* Limit the height to 75% of the viewport height */
  overflow-y: auto; /* Enable vertical scrolling if content exceeds window height */
  background-color: rgba(125, 163, 211, 0.9); /* Adjust background color and opacity */
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add shadow effect */
  display: none; /* Hidden by default */
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Example: Custom cubic bezier */
  z-index: 999; /* Ensure it's above other content */
}

.dimming-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  z-index: 998; /* Ensure it's below the project info window but above other content */
  pointer-events: auto; /* Capture all pointer events */
}

.project-info-window.show {
  transform: translate(-50%, -50%) translateY(0); /* Slide in from the top */
  font-family: ConthraxSB, Arial, sans-serif; /* Use your custom font as the first choice */
}

.project-info-content {
  padding: 20px;
  font-family: ConthraxSB, Arial, sans-serif; /* Use your custom font as the first choice */
  display: flex;
  flex-wrap: wrap; /* Allow flex items to wrap onto multiple lines */
  justify-content: center; /* Center the flex items horizontally */
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(68, 134, 219, 0.9); /* Adjust background color and opacity */
  border-radius: 20px;
}

/* Add styles for social icons */
.social-icons {
  display: flex;
  flex-wrap: wrap; /* Allow flex items to wrap onto multiple lines */
  justify-content: center; /* Center the flex items horizontally */
}

.social-icon {
  margin: 5px; /* Add some space around each social icon */
}


.social-icon img {
  width: auto;
  height: 75px;
  cursor: pointer;
  transition: transform 0.3s ease; /* Add transition for smoother scaling */
}

.social-icon img:hover {
  transform: scale(1.1) rotateX(20deg) rotateY(20deg); /* Scale up and initial rotation on hover */
  transform-origin: center; /* Set the transform origin to the center */
}

@font-face {
  font-family: ConthraxSB; /* Name your font */
  src: url('/assets/l/priv/fonts/conthrax-sb.otf') format('opentype'); /* Specify the path to your .otf font file */
}

/* Comment Form Styles */
#comment-form-container {
  display: none; /* Hide the form by default */
  margin-top: 20px;
  background-color: rgba(68, 134, 219, 0.5); /* Slightly transparent background */
  padding: 20px;
  border-radius: 10px;
}

#comment-form {
  display: flex;
  flex-direction: column;
}

#comment-form label {
  margin-bottom: 5px;
  font-family: ConthraxSB, Arial, sans-serif; /* Use your custom font */
}

#comment-form input, #comment-form textarea {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #4486db;
  font-family: ConthraxSB, Arial, sans-serif; /* Use your custom font */
}

#comment-form button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #4486db;
  color: white;
  font-family: ConthraxSB, Arial, sans-serif; /* Use your custom font */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#comment-form button:hover {
  background-color: #366bb3;
}

.toggle-comment-form {
  background-color: #4486db;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.toggle-comment-form:hover {
  background-color: #366bb3;
}

/* Add these styles to your existing CSS file or a new CSS file */

.comment-block {
  border: 3px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: rgba(68, 134, 219, 0.5); /* Slightly transparent */
  color: black; /* Darker blue text */
  max-width: 100%; /* Ensure it doesn't overflow the parent container */
}

.comment-block p {
  margin: 0; /* Ensure there's no extra space around the paragraphs */
  word-wrap: break-word; /* Prevent long words from overflowing */
}

#comment-form-container {
  display: none; /* Hidden by default */
  margin-bottom: 20px;
}

.info-box button.toggle-comment-form {
  margin-bottom: 20px;
}

/* Optional: Style the comment form */
#comment-form label {
  display: block;
  margin-top: 10px;
}

#comment-form input[type="text"]{
  width: 10%;
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#comment-form textarea {
  width: 30%;
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: black;
}

#comment-form button[type="submit"] {
  background-color: #003366; /* Matching button color */
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 20%;
}

#comment-form button[type="submit"]:hover {
  background-color: #002244; /* Slightly darker blue on hover */
}



.info-box {
  margin: 20px auto;
  border: 4px solid #4486db;
  border-radius: 10px;
  padding: 20px;
  background-color: rgba(68, 134, 219, .33); /* Set background color with 10% transparency */
  color: white;
  font-family: ConthraxSB, Arial, sans-serif; /* Use your custom font as the first choice */
}

.info-box {
    background-color: #3a3a3a;
    border: 2px solid #4486db;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}





/*
.info-box {
    background-color: #3a3a3a;
    border: 2px solid #4486db;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.info-box {
  width: 600px;
  margin: 20px auto;
  border: 4px solid #4486db;
  border-radius: 10px;
  padding: 20px;
  background-color: rgba(68, 134, 219, .33);
  color: white;
  font-family: ConthraxSB, Arial, sans-serif;
}

*/



.info-box h1 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #fff;
}

.info-box h2 {
    font-size: 1.5em;
    margin: 15px 0;
    color: #cfd6a0;
}

.info-box p {
    margin: 10px 0;
    line-height: 1.6;
}

.skills, .creative-fields {
    margin: 20px 0;
}

.skills p, .creative-fields ul {
    font-size: 1.1em;
}

.skills span {
    color: #ffcc00;
}

.creative-fields ul {
    list-style-type: none;
    padding: 0;
}

.creative-fields ul li {
    margin: 5px 0;
}

.link-button {
    display: inline-block;
    margin: 10px 0;
    padding: 10px 20px;
    color: #2c2c2c;
    background-color: #cfd6a0;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.link-button:hover {
    background-color: #b3bd84;
}