/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Courier New", monospace;
    background-color: #121212;
    color: rgb(255, 255, 255);
    padding: 20px;
    line-height: 1.6;
}

/* Container */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Header Row Layout */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 5px 0;
    position: relative;
}

/* Top and Bottom Lines */
.header-row .line {
    position: absolute;
    height: 1px;
    background-color: rgb(255, 255, 255);
}

.header-row .line-top-1 {
    top: 0;
    left: 0;
    width: 34%; /* Stops 5px before the first project */
}

.header-row .line-top-2 {
    top: 0;
    left: 34.8%; /* Starts where the first arrow is */
    width: 21.3%;
}

.header-row .line-top-3 {
    top: 0;
    left: 56.9%; /* Starts where the second arrow is */
    width: 21.3%;
}

.header-row .line-top-4 {
    top: 0;
    left: 79%; /* Starts where the third arrow is */
    width: 21%;
}

.header-row .line-bottom-1 {
    bottom: 0;
    left: 0;
    width: 20.35%;
}

.header-row .line-bottom-2 {
    bottom: 0;
    left: 21.1%; /* Starts where the first arrow is */
    width: 61.15%;
}

.header-row .line-bottom-3 {
    bottom: 0;
    left: 57.4%; /* Starts where the second arrow is NOT IN USE */
    width: 18.4%;
}

.header-row .line-bottom-4 {
    bottom: 0;
    left: 83.0%; /* Starts where the third arrow is */
    width: 17.2%;
}

/* Version Positioned Above */
.version {
    font-size: 0.8rem;
    position: absolute;
    top: -10px;
    left: 0;
    background-color: #121212;
    padding: 0px 0.8% 0px 0px;
    color: #0099ff;
}

/* Name Section */
.name-section {
    flex: 1;
    text-align: left;
    margin-right: 40px;
}

.role {
    font-size: 1.15rem;
    margin-bottom: 5px;
    margin-top: 5px;
}

.name-section h1 {
    font-size: 2.45rem;
    font-weight: lighter;
    text-transform: uppercase;
    line-height: 1;
}

/* Projects Section */
.projects-section {
    display: flex;
    flex: 2;
    justify-content: space-between;
    gap: 20px;
}

.project-column {
    flex: 1;
    min-width: 150px;
}

.project-column p {
    font-size: 1.15rem;
    margin: 0px 0;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: default; /* Prevents cursor change in-between arrow and text */
}

/* Arrow and Text Hover Linked Styling */
.hover-group:hover .arrow,
.hover-group:hover .jumble-text {
    color: #0099ff; /* Blue for hover */
}

/* Arrow Styling */
.arrow {
    transition: color 0.3s ease; /* Smooth color transition */
    cursor: pointer; /* Ensures pointer cursor over arrow */
}

/* Jumble Text */
.jumble-text {
    transition: color 0.3s ease;
    cursor: pointer;
}

/* NEW Label Styling */
.new {
    color: #0099ff;
    font-weight: bold;
    font-size: 0.8rem;
}

sup.new {
    color: #0099ff; /* Highlight the "NEW" label in blue */
    font-size: 0.7rem;
    font-weight: bold;
    position: relative;
    top: 3px;
}

span.new {
    color: #0099ff; /* Highlight the "NEW" label in blue */
    font-size: 0.8rem;
    font-weight: bold;
}

/* Boxes Section */
.boxes-section {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

/* Box Styling */
.box {
    margin-top: 18px;
    padding: 0px;
    color: white;
}

/* Specific Box Styles */
.left-box {
    flex: 1; /* Keeps the left box at normal size */
}


.right-box {
    flex: 0.8; /* Make the right box smaller */
}

/* Artwork Display */
.artwork-display img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease-in; /* Smooth fade-in animation */
}

/* Divider Line */
.right-box-divider {
    border-top: 1px solid #ffffff;
    margin: 10px 0;
    position: relative;
    top: -9px;

}

/* Lower Box Styling */
.blue-heading {
    font-size: 1.8rem;
    color: #0099ff; /* Blue heading */
    margin-bottom: -10px;
    margin-top: -12px;
    font-weight: 100;
    
}

.lower-box p.watch,
.music {
    font-size: 1rem;
    margin: 2px 0;
    color: #ffffff;
    transition: color 0.3s ease;
}

.lower-box p.watch:hover,
.music:hover {
    color: #0099ff; /* Hover to blue */
}

/* Right Box Titles */
.right-box h2 {
    color: #0099ff;
}

.repeat {
    font-size: 2rem;
    position: relative;
    top: -15px;
}

.music {
    position: relative;
    top: -10px;
}

.vibes {
    font-size: 2rem;
    position: relative;
    top: -15px;
}

.blue-heading-VV {
    font-size: 1.8rem;
    color: #0099ff; /* Blue heading */
    margin-bottom: -20px;
    margin-top: -12px;
    font-weight: 100;
}

.right-box-divider-2 {
    border-top: 1px solid #ffffff;
    margin: 10px 0;
    position: relative;
}

@keyframes blinkCursor {
    50% {
      border-right-color: transparent;
    }
  }
  
  @keyframes typewriter {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
  
  .terminal-loader {
    color: #0099ff;
    font-family: "Courier New", Courier, monospace;
    font-size: 1em;
    padding: 1.5em 1em 0;
    width: 20em;
    margin: 20px auto;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  #terminal-text {
    min-height: 1.7em; /* Fixed height equal to one line of text */
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 0.1em solid #0099ff; /* Cursor effect */
    animation: blinkCursor 0.7s step-end infinite;
}
  
  .terminal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5em;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 0 0.4em;
    box-sizing: border-box;
  }
  
  .terminal-controls {
    float: right;
  }
  
  .control {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.4em;
    border-radius: 50%;
  }
  
  .control.close {
    background-color: #0099ff;
    opacity: 50%;
  }
  
  .control.minimize {
    background-color: #0099ff;
    opacity: 75%;
  }
  
  .control.maximize {
    background-color: #0099ff;
  }
  
  .terminal-title {
    float: left;
    line-height: 1.5em;
    color: #eee;
  }
  
  .text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 0.1em solid #0099ff; /* Cursor effect */
    animation: blinkCursor 0.7s step-end infinite;
  }
  
  .new-box {
    margin-top: 35px
  }

  /* Rotating Roles Animation */
.rotating-role {
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    overflow: hidden;
    height: 1.5em; /* Adjust to the font size height */
}

.words {
    display: inline-block;
    position: relative;
    height: 1.5em; /* Height of a single line */
    overflow: hidden;
}

.word {
    display: block;
    color: #0099ff; /* Highlight color */
    animation: roleRotate 16s infinite;
    padding-left: 6px;
}

@keyframes roleRotate {
    0% { transform: translateY(0%); }
    12.5% { transform: translateY(-100%); }
    25% { transform: translateY(-200%); }
    37.5% { transform: translateY(-300%); }
    50% { transform: translateY(-400%); }
    62.5% { transform: translateY(-500%); }
    75% { transform: translateY(-600%); }
    87.5% { transform: translateY(-700%); }
    100% { transform: translateY(0%); }
}

.right-box-divider-3 {
    border-top: 1px solid #ffffff;
    margin: 10px 0;
    position: relative;
    top: 23px;
}

.terminal-checks{
    line-height: 1.5em;
    color: #eee;

}

.middle-box {
    flex: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    aspect-ratio: 16 / 9; /* Maintain consistent aspect ratio */
}

.artwork-display {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ensures the image does not distort */
}

.artwork-display img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image scales properly */
}

.middle-box-divider {
    border-top: 1px solid #ffffff; 
    width: 100%;
    margin: 17px 0 0 0; /* Ensure consistent spacing */
    position: relative; /* Avoid position conflicts */
}

/* Two Boxes in Left Box */
.left-box-inner {
    display: flex;
    flex-direction: column;
    width: calc(100% - 10px); /* Adjust width to fit left of the middle box */
    margin: 0 auto; /* Center the inner content horizontally */
}

.left-box-inner .sub-box {
    padding: 10px;
    background-color: #1e1e1e; /* Slightly darker grey */
    border: 1px solid #333; /* Border for better separation */
    border-radius: 4px;
    color: #fff;
    text-align: left; /* Align text to the left */
    width: 100%; /* Ensures it fits inside the container */
}

.left-box-divider {
    border-top: 1px solid #ffffff; /* White divider line */
    margin: 19px 0 0 0; /* Add space on top, not absolute */
    width: 100%;
}

.left-box {
    display: flex;
    flex-direction: column;
    align-items: left; /* Align content to the center horizontally */
}

.left-box-inner .sub-box h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.left-box-inner .sub-box p {
    font-size: 0.9rem;
}

.box-test{
    color: #0099ff;
    height: 100px;
    width: auto;

}

.about-me-content {
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: #ffffff;
    text-align: left;
    position: relative;
    text-align: justify; 
}

.second-paragraph {
    font-size: 1rem;
    line-height: 1.8;
    color: #ffffff;
    text-align: left;
    position: relative;
    text-align: justify; 
    margin: 0px;
}

.skills-chart {
    color: #fff;
    font-size: 0.9rem;
}

.skill {
    margin-bottom: 5px;
}

.skill span {
    display: block;
    margin-bottom: 4px;
}

.skill-bar {
    width: 100%;
    height: 5px;
    background-color: #333;
    position: relative;
    border-radius: 5px;
}

.skill-level {
    height: 100%;
    background-color: #0099ff;
    border-radius: 5px;
    animation: fill-bar 2s ease-in-out;
}

@keyframes fill-bar {
    from { width: 0; }
}

.skills-container{
    height: 206.8px;

}