:root {
    --primary: #2d5a27;
    --primary-light: #4a8f42;
    --secondary: #1a365d;
    --background: #5d717a;
    --surface: #1e293b;
    --surface-light: #17242a;
    --text: #f1f5f9;
    --text-muted: #d79027;
    --accent: #fbbf24;
    --danger: #ef4444;
    --success: #22c55e;
    --fluorescein: #39ff14;
    --chemical-phthalic: #f5f5dc;
    --chemical-resorcinol: #ffe4e1;
    --chemical-acid: rgba(255,255,255,0.3);
    --chemical-water: rgba(135,206,235,0.5);
    --chemical-ammonia: rgba(230,230,250,0.7);
}

body{
    margin: 0;
    background-color: #455A64;
    color: black;
    overflow: hidden;
}

.footer{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0.9vh;
      background: linear-gradient(180deg, var(--surface) 0%, #2a3a4d 100%);
}

.header{
    background: #17242a;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    width: 99.9vw;
}

.header h1{
    font-family: Helvetica, sans-serif;
    margin-top: 2px;
    margin-bottom: 0;
    text-align: center;
   font-size: 3vw ;
   color: rgb(128, 209, 228);
 
}

.simulate{
    width:78vw;
    height: 88vh;
    border: 3px solid black;
    position: relative;
}
#message{
    margin-left: 1%;
    flex: 1;
    background: #6190a6;
    text-align: center;
    border: 3px solid black;
    width: 20vw;
    height: 88vh;
    position: relative;
}
#ins{
    margin: 0;
    padding: 0;
    font-size: 3vw;
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
}
#text{

    margin: 0;
    font-size: 1.5vw;
    font-weight: 700;
    color: rgb(107, 23, 4);
}

/* timer */
.timer-container {
    position: relative;
    top: 5%;
    left: 20%;
    width: 11vw;
    height: 21vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    background: radial-gradient(circle, #222, #000);
}
.progress-ring {
    position: absolute;
    width: 18vw;
    height: 23vh;
}
svg {
    transform: rotate(-90deg);
}
circle {
    transition: stroke-dashoffset 10s linear;
    fill: none;
}

/* simulation */
.simulate #lab{
    height: 100vh;
    width: 78vw;
    visibility: visible;
    position: absolute;
}

#work{
    width:78.9vw;
    height: 77vh;
    position:absolute;
    
}

.pc{
    position:relative;
    visibility: visible;
    margin: 0px;
    padding: 0px;
    width: 25vw;
    height: 35vh;
    transform: translate(5vw, 20vh); 
}

.pc:hover h1{
    visibility: visible;
    transition: 0.1s;
}

.pcimage{
    height: 40vh;
    width: 25vw;
    margin-bottom: 2px;
    padding-bottom: 1rem;
    visibility: visible;
}

.pcimage:hover{
    height: 40.2vh;
    width: 25.2vw;
}

.hovpc{
    position: absolute;
    font-size: 1.5vw;
    color: black;

    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    top: 100%;
}


 #spectrometer{
    position:relative;
    margin: 0;
    padding: 0;
    height: 28vh;
    width: 13vw;
    visibility: visible;
    transform: translate(20vw, -7vh);
}

#spectrometer:hover h1{
    visibility: visible;
    transition: 0.1s;
}

#spectoimg{
    margin-top: 10vh;
    height: 14vh;
    width: 12vw;
    visibility: visible;
}

#spectoimg:hover{
    height: 14.2vh;
    width: 12.2vw;
}

#hovspecto{
    position: absolute;
    font-size: 1.5vw;
    color: black;
    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    top: 70%;
}

#pippete{
    position: relative;
    margin: 0;
    padding: 0;
    height: 3vh;
    width: 13vw;
    visibility: visible;
    transform: translate(32vw, -18vh);
}
#pippete:hover h1{
    visibility: visible;
    transition: 0.1s;
}

.pippeteimg{
    height: 14vh;
    width: 3vw;
    visibility: visible;
    transform: rotate(90deg);
}
.pippeteimg:hover{
    height: 15.1vh;
    width: 3.1vw;
}
#hovpippete{
    position: absolute;
    font-size: 1.5vw;
    color: black;
    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    transform: translate(2vw, -7vh);
}

#conicalflask{
    position: relative;
    margin: 0;
    margin-right: 6vh;
    
    padding: 0;
    height: 20vh;
    width: 5vw;
    visibility: visible;
    transform: translate(38vw, -38vh);
}
#conicalflask:hover h1{
    visibility: visible;
    transition: 0.1s;
}
.flaskimg{
    margin-top: 5vh;
    margin-right: 4vw;
  
    padding-bottom: 0;
    margin-bottom: 0px;
    height: 15vh;
    width: 5vw;
    visibility: visible;
}
.flaskimg:hover{
    height: 15.1vh;
    width: 5.3vw;
}
#hovflask{
    position: absolute;
    font-size: 1.5vw;
    color: black;
    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    transform: translate(2vw, -28vh);
}

#cuvette{
    position: relative;
    margin: 0;
    padding: 0;
    height: 5vh;
    width: 3vw;
    visibility: visible;
    transform: translate(42vw, -39vh);
}
#cuvette:hover h1{
    visibility: visible;
    transition: 0.1s;
}
.cuvetteimg{
    height: 3vh;
    width: 2vw;
    margin-top: 5.5vh;
    visibility: visible;
}
.cuvetteimg:hover{
    height: 4.1vh;
    width: 3.1vw;
}
#hovcuvette{
    position: absolute;
    font-size: 1.5vw;
    color: black;
    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    transform: translate(2vw, -3vh);
}

#box1{
    position: relative;
    margin: 0;
    padding: 0;
    height: 20vh;
    width: 10vw;
    visibility: visible;
    transform: translate(42vw, -66vh);
}
#box1:hover h1{
    visibility: visible;
    transition: 0.1s;
}
.box1img{
    height: 10vh;
    width: 8vw;
    margin-top: 18vh;
    visibility: visible;
}
.box1img:hover{
    height: 11.1vh;
    width: 9.1vw;
}
#hovbox1{
    position: absolute;
    font-size: 1.5vw;
    color: black;
    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    transform: translate(2vw, -28vh);
}

#box2{
    position: relative;
    margin: 0;
    padding: 0;
    height: 20vh;
    width: 12vw;
    visibility: visible;
    transform: translate(48vw, -85vh);
}
#box2:hover h1{
    visibility: visible;
    transition: 0.1s;
}
.box2img{
    height: 10vh;
    width: 8vw;
    margin-top: 13vh;
    visibility: visible;
}
.box2img:hover{
    height: 11.1vh;
    width: 9.1vw;
}
#hovbox2{
    position: absolute;
    font-size: 1.5vw;
    color: black;
    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    transform: translate(2vw, -29vh);
}

#box3{
    position: relative;
    margin: 0;
    padding: 0;
    height: 18vh;
    width: 10vw;
    visibility: visible;
    transform: translate(57vw, -104vh);
}
#box3:hover h1{
    visibility: visible;
    transition: 0.1s;
}
.box3img{
    height: 14vh;
    width: 8vw;
    margin-top: 6vh;
    margin-right: 2vw;
    visibility: visible;
}
.box3img:hover{
    height: 15.1vh;
    width: 9.1vw;
}
#hovbox3{
    position: absolute;
    font-size: 1.5vw;
    color: black;
    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    transform: translate(2vw, -26vh);
}

#box4{
    position: relative;
    margin: 0;
    padding: 0;
    height: 18vh;
    width: 11vw;
    visibility: visible;
    transform: translate(65vw, -118vh);
}
#box4:hover h1{
    visibility: visible;
    transition: 0.1s;
}
.box4img{
    height: 15vh;
    margin-top: 7vh;
    width: 9vw;
    visibility: visible;
}
.box4img:hover{
    height: 16.1vh;
    width: 10.1vw;
}
#hovbox4{
    position: absolute;
    font-size: 1.5vw;
    color: black;
    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    transform: translate(2vw, -25vh);
}


#alfoil{
    position: relative;
    margin: 0;
    padding: 0;
    height: 10vh;
    width: 5vw;
    visibility: visible;
    transform: translate(56vw, -123vh);
}
#alfoil:hover h1{
    visibility: visible;
    transition: 0.1s;
}
.alfoilimg{
    height: 10vh;
    width: 5vw;
        margin-top: 2vh;
    margin-right: 1vw;
    padding-right: 2vw;
    visibility: visible;
}
.alfoilimg:hover{
    height: 11.1vh;
    width: 6.1vw;
}
#hovalfoil{
    position: absolute;
    font-size: 1.5vw;
    color: black;
    background-color: white;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    
}

#start{
    position: absolute;
    border-radius: 30%;
    font-size: 3vw;
    left: 35%;
    top: 70%;
    border: none;
    color: white;
    background-color: green;
    box-shadow: 2px 2px 0px 1px black;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;
    padding: 1%;
}

#start a{
    text-decoration: none;
    color: white;
}

/* steps */
#ph {
    position: absolute;
    height: 8vh;
    width: 5vw;
    transition: all;
    transition-duration: 1s;
    animation: blink 1s;
    animation-iteration-count: infinite;
    visibility: visible;
    rotate: 180deg;
    transform: translate(17vw,-59.4vh);
}

@keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

.machine{
    width: 25.5vw;
    height: 40vh;
    transform: translate(5vw, 35vh);
}

.conicalflask {
    width: 5vw;
    transform: translate(20vw, 28vh);
    transition: all 2s ease-in-out;
    transform-origin: top right;
}

.cuvette {
    position:absolute;
    width: 6vw;
    height: 11vh;
    transition: all 2s ease-in-out;
    transform: translate(38vw, 18vh);
}
#message{
    background: linear-gradient(180deg, var(--surface) 0%, #2a3a4d 100%);
}
#text{
      background: linear-gradient(135deg, var(--fluorescein) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.header {
     text-align: center;
    width: 99.9vw;

  
    height: 10vh;
    background: #17242a;
    padding-top: 2vh ;
    
    border-bottom: 2px solid var(--surface-light);
    margin-bottom: 20px; 
    
}

.header h1 {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2rem;
    background: linear-gradient(135deg, var(--fluorescein) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--background) 0%, #1a202c 100%);
    color: var(--text);
   
    min-height: 100vh;
}