body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: black;
    position: relative; /* Add this */
}


.window{
    display: flex;
    width: 1000px;
    height: 750px;
    background-color: #fff;
    transform-origin: center center;
    box-sizing: border-box;

    flex-shrink: 0;
    flex-grow: 0;
    margin: auto;
}

.landing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 750px;
    transform: translate(-50%, -50%); /* Center from midpoint */
    z-index: 10; /* On top of .window */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: black;
}

.landing-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .landing.fall {
    transform: translate(-50%, 200%) rotate(5deg);
    transition: transform 1.2s ease-in-out;
  }

.projects, .inspector{
flex: 1;

}

.inspector{
    display: flex;
    flex-direction: column;
    background-color: red;

}

.projects{
    display: block;
    background-color: green;
    overflow-y: scroll;
    background: url("assets/backgrounds/projects-bg.V11.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.preview{
    flex: 1;
    background-color: yellow;
    align-items: center;
    justify-items: center;
    padding: 5%;
    background: url("assets/backgrounds/projects-bg.V2.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;   
}

.controls {
    display: flex;
    background-color: pink;
    /*flex: .25;*/
    height: 70px;
    align-items: center;
    padding: 0 1rem;
    background: url("assets/backgrounds/controls-bg.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 8%;
  }
  
  .switch {
    width: 1%; /* 25% of parent width = 50% total for 2 buttons */
    margin-right: 2rem;

    /*background-color: brown;*/
    padding: 2rem;
    cursor: pointer;

    background: url("assets/backgrounds/off-knob.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;

  }

.project-selection{
    width: 27%; /* 25% of parent width = 50% total for 2 buttons */
    /*background-color: brown;*/
    padding: 2.5rem;
    cursor: pointer;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    font-family: "Tomorrow", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5rem;
}

.active {
    background: url("assets/backgrounds/on-knob.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

/*
.switch:nth-child(1):{

}
*/
.description{
    background-color: blue;
    flex:2;
    overflow-y: scroll;
    padding: 5%;
    background: url("assets/backgrounds/description-bg.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
}

.project{
    display: flex;
    background-color: orange;
    height: 50px;   
}

.control{
    flex: auto;
    background-color: purple;
    align-items: center;
    justify-items: center;
    background: url("assets/backgrounds/off-switch-bg\ \(2\).jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
}

.control-active{
    background: url("assets/backgrounds/on-switch-bg\ \(2\).jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
  tool tips
.control-tt{

}
  
*/

.label{
    width: 80%;
    /*background-color: orangered;*/
    text-align: center;
    background: url("assets/backgrounds/project-bg.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    font-family: "Tomorrow", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.label:hover{
    background-color: rgb(85, 85, 85);
    cursor: pointer;
}

#project-link {
    display: inline-block;
    margin-top: 1rem;
    background: #28a745;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
  }

  #project-link.hidden {
    display: none;
  }

/* TOOLTIPS 

.tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
  }
  
  #switch-1:hover + #tooltip-switch-1,
  #switch-2:hover + #tooltip-switch-2 {
    opacity: 1;
    pointer-events: auto;
  }

  */
  
  /* Optional: Position tooltips above the switches */
  #tooltip-switch-1,
  #tooltip-switch-2 {
    transform: translateY(-120%);
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
  }

/*FORM*/
  #content-description {
    display: flex;
    flex-direction: column;

    align-items: center;
    text-align: left; /* Optional: change to center if you prefer centered labels */
    height: 100%;
    padding: 2rem;
    font-family: "Tomorrow", sans-serif;
    font-weight: 400;
    height: 100%; /* Or use a specific value like 60vh or 500px */
    position: relative; /* Optional, useful for other layout needs */

  }
  
  #content-description form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
    font-family: "Tomorrow", sans-serif;
    font-weight: 400;

  }
  #content-image {
    display: block;
    margin: 2rem auto 0 auto;  /* Adds top spacing, keeps it centered */
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
  }