:root{
    --main-bg-color:#1E2022;
    --logo-before-color:#52616B;
    --logo-color:#08D9D6;

    /* Heading Font Sizes */
    --logo-div-width-min: 10px;
    --logo-div-width-pref: 20px;
    --logo-div-width-max: 50px;

    --logo-min: 2vmin;
    --logo-pref: 4vmin;
    --logo-max: 7vmin;

}

body{
    background-color: var(--main-bg-color);
    overflow: hidden;
    /* For Spinner */
    --background-color: #212529;
}
.flex-container{
    display: flex;
    align-items: center;
}
.flex-column {
    flex-direction: column;
}
.justify-content-center{
    justify-content: center;
}

.logo-container{
    padding: 1vmin;
    padding-bottom: 2vh;
    /* border: medium solid green; */
}
.logo{
    font-family: 'Ubuntu Mono', monospace;
    font-size: clamp(var(--logo-min), var(--logo-pref), var(--logo-max));
    width: max-content;
    color: var(--logo-color);
    align-self: center;
}
.logo::before{
    content: 'guest@guna:~> ';
    font-size: clamp(var(--logo-min), var(--logo-pref), var(--logo-max));
    color: var(--logo-before-color);
}
.slideshow-container{
    padding-top: 1em;
}

.works-slideshow{
    width: 80vw;
    height: 20rem;
    background-color: #393E46;
}
.works-slideshow::after{
    display: block;
    content: '';
    background-color: black;
}

.temp-text {
    color: white;
    text-align: center;
}

.iot-redirection, .resume-redirection {
    padding-top: 3vh;
    font-size: 2.5vmax;
    padding-bottom: 2vh;
}


/* Spinner CSS */
.spinner-container{
    padding-top: 4rem;
    --spinner-outer-mag:160px;
    --spinner-primary-color:#2eccd1;
    /* height:100vh; */
    
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .preloader{
    position:relative;
    height:var(--spinner-outer-mag);
    width:var(--spinner-outer-mag);
  }
  
  .spinner-outer-circle, .spinner-level-2-dashes, .spinner-level-3-reverse,.spinner-level-4,.spinner-level-4-hider, .spinner-level-5,.spinner-level-6{
    position:absolute;
    border-radius:50%;
  }
  
  .spinner-outer-circle{
    height: var(--spinner-outer-mag);
    width: var(--spinner-outer-mag);
  
    border: 1px solid var(--spinner-primary-color);
    border-top: 5px solid var(--spinner-primary-color);
  
    box-shadow: 0px 0px 8px var(--spinner-primary-color);
  
    animation: rotate-forward 1.5s linear infinite;
  }
  @keyframes rotate-forward{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }
  
  .spinner-level-2-dashes{
    --level-2-mag: calc(var(--spinner-outer-mag) / (250/15));
    top: calc(var(--level-2-mag) / 2);
    left: calc(var(--level-2-mag) / 2);
    height: calc(var(--spinner-outer-mag) - var(--level-2-mag));
    width: calc(var(--spinner-outer-mag) - var(--level-2-mag));
    
    border: 1px dashed transparent;
    border-top: 4px dashed var(--spinner-primary-color);
    /* background-image: linear-gradient(to right, var(--spinner-primary-color), var(--background-color)  2 25% ); */
    /* background-image: linear-gradient(red, yellow); */
  
    box-shadow: 0px 0px 8px var(--spinner-primary-color);
  
    animation: rotate-forward 1s linear infinite;
  
  }
  .spinner-level-3-reverse{
    --level-3-mag: calc(var(--spinner-outer-mag) / (250/40));
    top: calc(var(--level-3-mag) / 2);
    left: calc(var(--level-3-mag) / 2);
    height: calc(var(--spinner-outer-mag) - var(--level-3-mag));
    width: calc(var(--spinner-outer-mag) - var(--level-3-mag));
    
    border: 2px solid var(--background-color);
    border-top: 1px solid var(--spinner-primary-color);
    border-bottom: 1px solid var(--spinner-primary-color);
  
    animation: rotate-backward 2s linear infinite;
  }
  
  @keyframes rotate-backward{
    0% {transform: rotate(360deg);}
    100% {transform: rotate(0deg);}
    }
  .spinner-level-4{
    --level-4-mag: calc(var(--spinner-outer-mag) / (250/80));
    top: calc(var(--level-4-mag) / 2);
    left: calc(var(--level-4-mag) / 2);
    height: calc(var(--spinner-outer-mag) - var(--level-4-mag));
    width: calc(var(--spinner-outer-mag) - var(--level-4-mag));
  
    border: 2px solid var(--spinner-primary-color);
  
    background-image: linear-gradient(var(--spinner-primary-color), white, white);
    box-shadow: 0px 0px 13px var(--spinner-primary-color);
  
    animation: blink 4s ease-in-out infinite;  
  }
  
  @keyframes blink {
    0%, 17%, 23%, 34%, 49%, 59%, 74%,83%,94% {background-image: linear-gradient(var(--background-color), var(--spinner-primary-color), var(--spinner-primary-color));transform: rotate(0deg);}
    10%, 19%, 27%, 38%, 53%,64%,78%,92%,98%,100% { background-image: linear-gradient(var(--spinner-primary-color), white, white);transform: rotate(360deg);}
  }
  .spinner-level-4-hider{
    --level-4-hider-mag: calc(var(--spinner-outer-mag) / (250/93));
    top: calc(var(--level-4-hider-mag) / 1.95);
    left: calc(var(--level-4-hider-mag) / 1.95);
    height: calc(var(--spinner-outer-mag) - var(--level-4-hider-mag));
    width: calc(var(--spinner-outer-mag) - var(--level-4-hider-mag));
  
    border: 2px solid var(--background-color);
    background-color: var(--background-color);  
  }
  .spinner-level-5{
    --level-5-mag: calc(var(--spinner-outer-mag) / (250/105));
    top: calc(var(--level-5-mag) / 1.97);
    left: calc(var(--level-5-mag) / 1.9);
    height: calc(var(--spinner-outer-mag) - var(--level-5-mag));
    width: calc(var(--spinner-outer-mag) - var(--level-5-mag));
    
    border: 2px solid var(--background-color);
    border-top: 2px dotted var(--spinner-primary-color);
    animation: rotate-forward .7s linear infinite;
  }
  
  .spinner-level-6{
    --level-5-mag: calc(var(--spinner-outer-mag) / (250/110));
    top: calc(var(--level-5-mag) / 1.97);
    left: calc(var(--level-5-mag) / 1.9);
    height: calc(var(--spinner-outer-mag) - var(--level-5-mag));
    width: calc(var(--spinner-outer-mag) - var(--level-5-mag));
    
    border: 2px solid var(--background-color);
    border-top: 2px dotted var(--spinner-primary-color);
    animation: rotate-forward .5s linear infinite;
  }