* {box-sizing: border-box; font-family: 'Roboto','Segoe UI'; font-size: 12px;}
body { margin: 5px; padding: 5px; overflow-x: hidden;}


#idac893ce0c6c9cf27d98ec7e90f47d0 {
position: absolute; z-index: 20; top: 0vh; height: 0vh; width: 100%;
background-color: #F2F5F6; opacity:0.75;
backdrop-filter: saturate(180%) blur(2px);
background-image: url('upperCurtain.png');
background-size: cover; /* Ensures the image covers the entire div */
background-position: center; /* Centers the image */
background-repeat: no-repeat; /* Prevents the image from repeating */
}

#id3dda6c730269ccbb79c9a5ffe95fd1 {position: relative; z-index: 10; top: 0;}
#id95365596c7aec2eec28c61498dec9a {
position: absolute; z-index: 20; top: 100vh; height:85vh;
background-color: #F2F5F6;opacity:0.75;
backdrop-filter: saturate(180%) blur(2px);
background-image: url('lowerCurtain.png');
background-size: cover; /* Ensures the image covers the entire div */
background-position: center; /* Centers the image */
background-repeat: no-repeat; /* Prevents the image from repeating */
}

.img-preview {height: 100px; width: auto;}
.img-gallery {width: 100%;height: auto;opacity: 0.5;}
.img-gallery:hover {opacity: 1.0;}

#logo {box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;}

textarea {
    height: 250px; width: 100%;
    overflow:scroll;
    resize: vertical;
    white-space: wrap;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
}

.grid {
  display: grid;
  grid-gap: 15px;
}

#return:hover { color: #dc3545; cursor: pointer; }
.btn:hover { background-color: #ff6600; color: white; }
.modal-footer, .modal-header {justify-content: center;}
.tile:hover .card-header { background-color: #ff5100; color: white; }
.tile:hover .card-footer { background-color: #ff5100; color: white; }

.dropdown-menu > li > a:hover { background-color: #ff5100; color: white;}

.lcd { position: relative; padding-bottom: 56.25%; height: 0;}
.lcd iframe { position: absolute; top: 0; left: 0;width: 100%;height: 100%;}

.tile {
  cursor: pointer;
  display: block;
  border-radius: 5px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  height: 200px;
  width: 240px;
}

#id471ff706d56638761bfd3743ba40d5, #id3953bf5b9cd2c34d6c755a24a79d73, #ide023203da7580293c5d6cd1218f2e4 {
  border-radius: 5px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.snap:hover {
  -webkit-transform: scale(3); /* Safari 3-8 */
  transform: scale(3);
}

#id34ccfe803b91d05d1a59eaa7e14546:hover { color: red; cursor: pointer; }


.floating {
    animation-name: floating;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {transform: scale(1, 1);}
  50% {transform: scale(1.015, 1.015);}
  100% {transform: scale(1, 1);}
}

.glow {
  /* font-size: 80px; */
  color: #fff;
  text-align: center;
  animation: glow 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

/* ------------------- Version 2 (added) -------------------------   */
#idfd8eb3b2f3ca66c6d0ef7ded0ba4eb { color: red; cursor: pointer; }
#idfd8eb3b2f3ca66c6d0ef7ded0ba4eb:hover { color: green; cursor: pointer; }

#id67db1c9080334ef2a64f7bef685fa6, #idaa0b2e4eaee6ef364dfff7e43930c5, #id7ba202a219da2ab072e22173afde41 {
    height: 300px;
    width: 350px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

#ide3ce574226b8469cb8c8696bc88eb9, #f3 {
    height: 100%; width: 100%;
    opacity: 1;
    border-radius: 5px;
}

#in1tail::before { content: "After a while, saw this.."; padding-left: 10px;
                   animation: in1tail 40s linear 20s, finout 4s linear 20s ; }
@keyframes in1tail {
        0%    {content: "Zoomed further..to see the 'Big Bang' event";}
        10%   {content: "Stars, Clusters, Galaxies after Galaxy...";color:blue;}
        20%   {content: "Thoughts started scratching the head.";color:blue;}
        30%   {content: "Which CI/CD combination > in next Project?";color:blue; }
        40%   {content: "Which Cloud services > in next Company?";color:blue; }
        50%   {content: "Which 3P Toolsets > to learn in depth?";color:blue; }
        60%   {content: "Which Certification > to put on Resume?";color:blue; }
        70%   {content: "What Skill-Combination > A secure career?";color:blue;}
        80%   {content: "Instantly, started a chat with LLM";color:blue;}
        90%   {content: "I (user): Looking for a secure IT career..."; color:blue;}
        100%  {content: "LLM (Gen-AI): Really..?"; color:red;}
}

#in3head::before { content: "Welcome to my career portal"; padding-left: 10px;
                   animation: in3head infinite 40s linear 4s, finout 4s infinite;}
@keyframes in3head {
        0%    {content: "Welcome to my career portal"; }
        10%   {content: "Imagination into Code..";}
        20%   {content: "Things you may find here";}
        30%   {content: "1. Ideas";}
        40%   {content: "2. Solutions";}
        50%   {content: "3. Knowledge articles"; }
        60%   {content: "4. Frameworks"; }
        70%   {content: "5. Diagrams"; }
        80%   {content: "6. Key Notes";}
        90%   {content: "7. Cheat Sheets..";}
        100%  {content: "Welcome to my career portal";}
}


@keyframes fin {  0% {opacity:0;}  100%  {opacity:1;} }
@keyframes fout { 0% {opacity:1;}  100%  {opacity:0;} }
@keyframes finout { 0% {opacity:1;} 50%  {opacity:0;} 100%  {opacity:1;} }
@keyframes zoom { 0% {font-size:2px;}  100%  {font-size:12px;} }
@keyframes t_color { 0%{color: red;} 20%{color: yellow;} 40%{color: blue;} 60%{color: green;} 80%{color: while;} 100%{color: red;} }

.universe {position: relative; text-align: center; color: white;}
.bottom-left {position: absolute; bottom: 50px; left: 50px;}
.top-left {position: absolute;top: 50px;left: 50px;}
.top-right {position: absolute; top: 50px; right: 50px;}
.bottom-right {position: absolute;bottom: 50px;right: 50px;}
.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.top-center {position: absolute;top: 10%;left: 50%;transform: translate(-50%, -50%);}
.bottom-center {position: absolute;top: 90%;left: 50%;transform: translate(-50%, -50%);}

.top-center::before { font-weight:bold; content:'.'; font-size:10px; animation: lang 15s infinite 5s linear forwards;}
@keyframes lang {
        0%   {content: "."; font-size:4px; position:absolute; top:0px; left:0px; }
        10%  {content: "."; font-size:6px; position:absolute; top:10px; left:-10px; }
        20%  {content: ".";font-size:7px; position:absolute; top:20px; left:-20px;}
        30%  {content: "C#"; font-size:7px; color:white; position:absolute; top:30px; left:-30px;}
        40%  {content: ".Net";font-size:7px; color:white; position:absolute; top:40px; left:-40px;}
        50%  {content: "Java"; font-size:7px; color: white; position:absolute; top:55px; left:-50px;}
        60%  {content: "Python";font-size:8px; color: white; position:absolute; top:60px; left:-60px;}
        70%  {content: "Go";font-size:8px; color: white;  position:absolute; top:70px; left:-70px;}
        80%  {content: "Galaxy-L";font-size:9px; color: white; position:absolute; top:80px; left:-80px;}
        90%  {content: "";font-size:9px; color:white; position:absolute; top:90px; left:-90px; }
        100% {content: "";font-size:10px; position:absolute; top:0px; left:0px;}
}



.top-left::before { font-weight:bold; content:'.'; font-size:10px; animation: devops 15s infinite 7s linear forwards;}
@keyframes devops {
        0%   {content: "."; font-size:4px; position:absolute; top:0px; left:0px; }
        10%  {content: "."; font-size:6px; position:absolute; top:10px; left:5px; }
        20%  {content: ".";font-size:7px; position:absolute; top:20px; left:10px;}
        30%  {content: "Git"; font-size:7px; color:white; position:absolute; top:30px; left:15px;}
        40%  {content: "Jenkins";font-size:7px; color:white; position:absolute; top:40px; left:20px;}
        50%  {content: "GitHub"; font-size:8px; color: white; position:absolute; top:50px; left:25px;s}
        60%  {content: "Docker";font-size:8px; color: white; position:absolute; top:60px; left:30px;}
        70%  {content: "K8";font-size:9px; color: white;  position:absolute; top:70px; left:35px;}
        80%  {content: "Galaxy-D";font-size:9px; color: white; position:absolute; top:80px; left:40px;}
        90%  {content: "";font-size:9px; color:white; position:absolute; top:100px; left:50px;}
        100% {content: "";font-size:4px; position:absolute; top:0px; left:0px;}
}


.top-right::before { font-weight:bold; content:'.'; font-size:10px; animation: cloud 15s infinite 10s linear forwards;}
@keyframes cloud {
        0%   {content: "."; font-size:4px; position:absolute; top:0px; left:0px; }
        10%  {content: "."; font-size:6px; position:absolute; top:5px; left:-5px; }
        20%  {content: ".";font-size:7px; position:absolute; top:10px; left:-7px;}
        30%  {content: "."; font-size:7px; color:white; position:absolute; top:15px; left:-9px;}
        40%  {content: ".";font-size:7px; color:white; position:absolute; top:20px; left:-11px;}
        50%  {content: "Azure"; font-size:7px; color: white; position:absolute; top:25px; left:-13px;}
        60%  {content: "GCP";font-size:7px; color: white; position:absolute; top:30px; left:-15px;}
        70%  {content: "AWS";font-size:8px; color: white;  position:absolute; top:35px; left:-17px;}
        80%  {content: "Galaxy-Cluster";font-size:8px; color: white; position:absolute; top:40px; left:-20px;}
        90%  {content: "";font-size:9px; color:white; position:absolute; top:50px; left:-25px; }
        100% {content: "";font-size:4px; position:absolute; top:0px; left:0px;}
}

.centered::before { font-weight:bold; content:'.'; font-size:10px; animation: all 20s infinite 40s linear forwards, finout 2s infinite;}
@keyframes all {
        0%   {content: "."; font-size:6px; }
        10%  {content: "Languages"; font-size:6px; color:yellow; }
        20%  {content: "DSA";font-size:7px; color:white; }
        30%  {content: "QA"; font-size:8px; color:yellow; }
        40%  {content: "Frameworks";font-size:9px; color:white;}
        50%  {content: "Toolsets"; font-size:10px; color:yellow; }
        60%  {content: "DevOps";font-size:11px; color:white;}
        70%  {content: "Cloud";font-size:12px; color:yellow;}
        80%  {content: "AI/ML";font-size:13px; color:yellow;}
        90%  {content: "Gen-AI";font-size:14px; color:red;}
        100% {content: "";font-size:10px; }
}


.bottom-left::before { font-weight:bold; content:'.'; font-size:10px; animation: dsa 15s infinite 12s linear forwards;}
@keyframes dsa {
        0%   {content: "."; font-size:4px; position:absolute; top:0px; left:0px; }
        10%  {content: "."; font-size:6px; position:absolute; top:-15px; left:5px; }
        20%  {content: "LL";font-size:7px; position:absolute; top:-30px; left:10px;}
        30%  {content: "Stack"; font-size:7px; color:white; position:absolute; top:-45px; left:15px;}
        40%  {content: "Queue";font-size:7px; color:white; position:absolute; top:-60px; left:20px;}
        50%  {content: "Heap"; font-size:7px; color: white; position:absolute; top:-75px; left:25px;}
        60%  {content: "Tree";font-size:8px; color: white; position:absolute; top:-90px; left:30px;}
        70%  {content: "Graph";font-size:8px; color: white;  position:absolute; top:-100px; left:35px;}
        80%  {content: "Trie";font-size:9px; color: white; position:absolute; top:-120px; left:40px;}
        90%  {content: "";font-size:9px; color:white; position:absolute; top:-140px; left:50px; }
        100% {content: "";font-size:4px; position:absolute; top:0px; left:0px;}
}


.bottom-right::before { font-weight:bold; content:'.'; font-size:10px; animation: qa 15s infinite 15s linear forwards;}
@keyframes qa {
        0%   {content: "."; font-size:4px; position:absolute; top:0px; left:0px; }
        10%  {content: "."; font-size:6px; position:absolute; top:-10px; left:-10px; }
        20%  {content: "UFT";font-size:6px; position:absolute; top:-20px; left:-20px;}
        30%  {content: "ALM"; font-size:6px; color:white; position:absolute; top:-30px; left:-30px;}
        40%  {content: "Tosca";font-size:7px; color:white; position:absolute; top:-40px; left:-40px;}
        50%  {content: "PostMan"; font-size:7px; color: white; position:absolute; top:-50px; left:-50px;}
        60%  {content: "Jira";font-size:8px; color: white; position:absolute; top:-60px; left:-60px;}
        70%  {content: "Selenium";font-size:8px; color: white;  position:absolute; top:-70px; left:-70px;}
        80%  {content: "Galaxy-T";font-size:9px; color: white; position:absolute; top:-80px; left:-80px;}
        90%  {content: "";font-size:9px; color:white; position:absolute; top:-100px; left:-100px; }
        100% {content: "";font-size:4px; position:absolute; top:0px; left:0px;}
}

.bottom-center::before { font-weight:bold; content:'.'; font-size:10px; animation: ai 15s infinite 17s linear forwards;}
@keyframes ai {
        0%   {content: "."; font-size:4px; position:absolute; top:0px; left:0px; }
        10%  {content: "."; font-size:6px; position:absolute; top:-10px; left:10px; }
        20%  {content: "ML";font-size:6px; position:absolute; top:-20px; left:20px;}
        30%  {content: "Vision"; font-size:7px; color:white; position:absolute; top:-30px; left:30px;}
        40%  {content: "Voice";font-size:7px; color:white; position:absolute; top:-40px; left:40px;}
        50%  {content: "NLP"; font-size:7px; color: white; position:absolute; top:-50px; left:50px;}
        60%  {content: "DP";font-size:8px; color: white; position:absolute; top:-60px; left:60px;}
        70%  {content: "GenAI";font-size:8px; color: white;  position:absolute; top:-70px; left:70px;}
        80%  {content: "Galaxy-A";font-size:8px; color: white; position:absolute; top:-80px; left:80px;}
        90%  {content: "";font-size:9px; color:white; position:absolute; top:-100px; left:100px; }
        100% {content: "";font-size:4px; position:absolute; top:0px; left:0px;}
}