/*
/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Jan 10, 2026, 11:17:32 AM
    Author     : lcg98
*/

body {
  background: black; 
  font-family: "Inter", sans-serif;
  display: flex;
  justify-content: center;
  padding-top: 80px;
}
.main {
    display: block;
    position: absolute;
    top:  80px;
    left: 0px;
    width:  20%;
    height: 30%;
}
.eggos {
    position: absolute;
    top:  10rem;
    left: 15%;
    width:  50%;
    height: 50%;
}  
#eggWords{
    position: absolute;
    top: 65%;
    left: 35%;
    color: red;
    font-size: 20px;
}

.nav-wrapper {
  position: absolute;
  top:  2rem;
  left: 30rem;
  width: 600px;
  height: 120px;
}

/* Track */
.track {
  position: absolute;
  top: 66px;
  left: 0;
  width: 100%;
  height: 12px;
  background:chocolate;
  border-radius: 3px;
}

/* Draggable handle */
.handle {
  position: absolute;
  top: 48px;
  width: 24px;
  height: 24px;
  background:burlywood;
  border-radius: 50%;
  border: 2px solid #4a4a4a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* Teardrop pointer */
.pointer {
  position: absolute;
  top: -20px;
  width: 48px;
  height: 64px;
  background:antiquewhite;
  border-radius: 50% 50% 80% 80%;
  border: 2px solid #4a4a4a;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transform-origin: bottom center;
  pointer-events: auto;
  cursor: pointer;
}

/* Number inside pointer */
.pointer-number {
  position: absolute;
  top: 12px;
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #333;
  user-select: none;
  cursor: pointer;
}

#state {
  position: absolute;
  top: -30px;
  left: 100%; 
  color: yellow; 
}
#one {
  position: absolute;
  top: 12px;
  left: 100%;
}
#two, #three, #four {
  display: none;
  position: absolute;
  top: 12px;
  left: 100%;
}

#HomeIcon {
    position: absolute;
    top:     40rem;
    left:    5rem;
    width:   4rem;
}

#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
    position: absolute;
    top:  50rem;
    width: 85%;
    z-index: -1;
}

/***********************************************************************/
/***************************** SMARTPHONE******************************/
/**********************************************************************/
@media only screen and (max-width : 414px) and (min-width: 240px) {
    
    .main {
        display: block;
        position: absolute;
        top:  8rem;
        left: 0px;
        width:  40%;
        height: 30%;
        margin-bottom: 3rem;
    }
    .eggos {
        position: absolute;
        top:  13rem;
        left: 40%;
        width:  50%;
        height: 30%;
    }
    .nav-wrapper {
        position: absolute;
        top:  2rem;
        left: 5rem;
        width: 200px;
        height: 50px;
    }
    
    #HomeIcon {
        position: absolute;
        top:     32rem;
        left:    5rem;
        width:   4rem;
    }

    #footer {
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
        position: absolute;
        top:  40rem;
        width: 85%;
        z-index: -1;
    }
    
}