aiblob.css

/* Felix */
.personal-assistant {
	position: relative;
	margin-top: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}
.felix {
	position: absolute;
	bottom: 50px;
	width: 110px;
	height: 95px;
	border-radius: 45%;
	border: 3px solid #fff;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
	animation: breathe-and-jump 3s linear infinite;
	cursor: pointer;
	z-index: 1;
}
.felix::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 3px);
	height: calc(100% + 2px);
	background-color: #18c;
	background: linear-gradient(to bottom, #5fc, #1a8);
	background: -webkit-linear-gradient(to bottom, #5cf, #18c);
	border-radius: 45%;
	opacity: 0;
	transition: 0.3s linear all;
}
.felix > .eyes { position: relative; }
.felix > .eyes > .eye {
	position: absolute;
	top: 20px;
	width: 20px;
	height: 25px;
	border-radius: 15px;
	background-color: #fff;
	box-shadow: 0 0 7px rgba(255, 255, 255, 0.5);
	animation: blink 5s linear infinite;
}
.felix > .eyes > .eye.left { left: 25%; }
.felix > .eyes > .eye.right { right: 25%; }

/* Platforms */
.platform {
	transform: rotateX(70deg);
	width: 100px;
	height: 100px;
	box-shadow: 0 0 100px #fff,
		         0 0 15px #fff inset;
	animation: jump-pulse 3s linear infinite;
}
.platform,
.command-list > li::before {
	border-radius: 50%;
	transition: 0.2s linear all;
}
.command-list > li::before {
	content: '';
	position: absolute;
	bottom: -35px;
	left: 50%;
	width: 65px;
	height: 65px;
	transform: translate(-50%) rotateX(70deg);
	box-shadow: 0 0 50px #fff,
		         0 0 15px #fff inset;
}

/* Hover */
.felix:not(.active):hover {
	animation: shake-to-alert 0.5s linear;
	height: 105px;
	transform: translateY(-4px);
}
.felix:not(.active):hover,
.felix:not(.active):hover > .eyes > .eye {
	border-color: #fc5;
	box-shadow: 0 0 5px #fc5;
}
.felix:not(.active):hover + .platform {
	box-shadow: 0 0 100px #fc5,
		         0 0 15px #fc5 inset;
	animation: shake-pulse 0.5s linear;
}

/* Awaiting Command */
.felix.active { animation: bounce-then-breathe 5s linear infinite; }
.felix.active::before { opacity: 1; }
.felix.active,
.felix.active > .eyes > .eye {
	border-color: #5fc;
	box-shadow: 0 0 5px #5fc;
}
.felix.active + .platform {
	box-shadow: 0 0 100px #5fc,
		         0 0 25px #5fc inset;
	animation: bounce-pulse 5s linear;
}

/* Deactivation */
.felix.inactive {
	animation: deactivate 0.75s linear,
				  breathe-and-jump 3s linear infinite;
}
.felix.inactive + .platform {
	animation: deactivate-platform 0.75s linear;
}

/* Command List */
.command-list {
	position: absolute;
	bottom: 35px;
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 100%;
	z-index: 0;
}
.command-list > li {
	display: none;
	width: 45px;
	height: 45px;
	line-height: 37px;
	font-size: 25px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 5px #fff;
	margin: 10px 12px;
	cursor: pointer;
	opacity: 0;
}
.felix.active ~ .command-list > li {
	display: inline-block;
	animation: fade-in 1s linear forwards;
}
.command-list > li:hover {
	border-color: #5cf;
	box-shadow: 0 0 5px #5cf;
}
.command-list > li:hover::before {
	box-shadow: 0 0 50px #5cf,
		         0 0 15px #5cf inset;
}
.command-list > li:hover > i { color: #5cf; }
.command-list > li:nth-child(1) { transform: translateX(100px) translateY(45px); }
.command-list > li:nth-child(1):hover ~ .hey-felix::after { content: "Hey Felix, how's the weather?"; }
.command-list > li:nth-child(2) { transform: translateX(-15px) translateY(-15px); }
.command-list > li:nth-child(2):hover ~ .hey-felix::after { content: "Hey Felix, what time is it?"; }
.command-list > li:nth-child(3) { transform: translateX(-35px) translateY(-55px); }
.command-list > li:nth-child(3):hover ~ .hey-felix::after { content: "Hey Felix, what's today?"; }
.command-list > li:nth-child(4) { transform: translateX(35px) translateY(-55px); }
.command-list > li:nth-child(4):hover ~ .hey-felix::after { content: "Hey Felix, tell me a joke."; }
.command-list > li:nth-child(5) { transform: translateX(15px) translateY(-15px); }
.command-list > li:nth-child(5):hover ~ .hey-felix::after { content: "Hey Felix..."; }
.command-list > li:nth-child(6) { transform: translateX(-100px) translateY(45px); }
.command-list > li:nth-child(6):hover ~ .hey-felix::after { content: "Hey Felix, what inspires you?"; }

/* Hey Felix */
.hey-felix {
	position: relative;
	transform: translateY(50px);
	margin: 0;
}
.hey-felix::after {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	white-space: nowrap;
	background-color: #fffa;
}

/* Response */
.response-frame {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #000c;
	z-index: -1;
	opacity: 0;
}
.response-frame.active {
	z-index: 1000;
	opacity: 1;
}
.response-frame > .lead {
	padding: 10px;
	margin: 10px;
	border-radius: 5px;
	background-color: #fff;
	color: #333;
}
.response-frame > .fas {
	width: 50px;
	height: 50px;
	font-size: 25px;
	line-height: 45px;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 10px #fff, 0 0 5px #fff inset;
	transition: 0.3s linear all;
}
.response-frame > .fas:hover {
	border: 2px solid #f55;
	box-shadow: 0 0 15px #f55, 0 0 5px #f55 inset;
	color: #f55;
}

/* Animations */
@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes breathe {
	0%, 100% {
		height: 95px;
		transform: translateY(0);
	}
	50% {
		height: 100px;
		transform: translateY(-5px);
	}
}
@keyframes bounce-then-breathe {
	0%, 5%, 10%, 15% { transform: translateY(0); }
	2.5%, 7.5%, 12.5% { transform: translateY(-15px); }
	20%, 40%, 60%, 80%, 100% {
		height: 95px;
		transform: translateY(0);
	}
	30%, 50%, 70%, 90% {
		height: 100px;
		transform: translateY(-5px);
	}
}
@keyframes shake-pulse {
	0%, 20%, 40%, 60%, 80%, 100% { box-shadow: 0 0 100px #fc5, 0 0 15px #fc5 inset; }
	10%, 25%, 35%, 50%, 65% { box-shadow: 0 0 115px #fc5, 0 0 15px #fc5 inset; }
	15%, 30%, 45%, 55%, 70% { box-shadow: 0 0 95px #fc5, 0 0 15px #fc5 inset; }
}
@keyframes bounce-pulse {
	0%, 5%, 10%, 15% { box-shadow: 0 0 30px #5fc, 0 0 45px #5fc inset; }
	2.5%, 7.5%, 12.5% { box-shadow: 0 0 100px #5fc, 0 0 15px #5fc inset; }
	20%, 40%, 60%, 80%, 100% { box-shadow: 0 0 30px #5fc, 0 0 45px #5fc inset; }
	30%, 50%, 70%, 90% { box-shadow: 0 0 70px #5fc, 0 0 25px #5fc inset; }
}
@keyframes jump-pulse {
	0%, 40%, 80%, 100% {
		box-shadow: 0 0 30px #fff,
		         	0 0 45px #fff inset;
	}
	20%, 60%, 70%, 90% {
		box-shadow: 0 0 70px #fff,
		         	0 0 25px #fff inset;
	}
	85% {
		box-shadow: 0 0 100px #fff,
		         	0 0 15px #fff inset;
	}
}
@keyframes breathe-and-jump {
	0%, 40%, 80%, 100% { height: 95px; transform: translateY(0); }
	20%, 60%, 70%, 90% { height: 100px; transform: translateY(-5px); }
	85% { height: 85px; transform: translateY(-20px); }
}
@keyframes shake-to-alert {
	0%, 20%, 40%, 60%, 80%, 100% { transform: rotate(0) translateY(-5px); }
	10%, 25%, 35%, 50%, 65% { transform: rotate(5deg) translateY(-5px); }
	15%, 30%, 45%, 55%, 70% { transform: roate(-5deg) translateY(-5px); }
}
@keyframes blink {
	0%, 100% { transform: scale(1, 0.05); }
	5%, 95% { transform: scale(1, 1); }
}
@keyframes deactivate {
	0% { border-color: #5fc; }
	20%, 60% { border-color: #f55; }
	40%, 80%, 100% { border-color: #fff; }
}
@keyframes deactivate-platform {
	0% { box-shadow: 0 0 100px #5fc, 0 0 15px #5fc inset; }
	40%, 80%, 100% { box-shadow: 0 0 15px #fff, 0 0 15px #fff inset; }
	20%, 60% { box-shadow: 0 0 100px #f55, 0 0 15px #f55 inset; }
}

/* Template Overrides */
html, body {
	scroll-behavior: smooth;
    background: rgb(22, 9, 56);
	background-image: linear-gradient(to top, rgb(22, 9, 56), rgb(24, 12, 58), rgb(26, 14, 60), rgb(27, 17, 62), rgb(29, 19, 64), rgb(31, 22, 66), rgb(33, 24, 67), rgb(35, 27, 69), rgb(37, 29, 71), rgb(38, 32, 73), rgb(40, 34, 75), rgb(42, 37, 77));
	background-image: -webkit-linear-gradient(to top, rgb(22, 9, 56), rgb(24, 12, 58), rgb(26, 14, 60), rgb(27, 17, 62), rgb(29, 19, 64), rgb(31, 22, 66), rgb(33, 24, 67), rgb(35, 27, 69), rgb(37, 29, 71), rgb(38, 32, 73), rgb(40, 34, 75), rgb(42, 37, 77));
	color: #fff;
}
* { user-select: none; }

.start{
    height: 50px;
    width: 100px;
    background-color: red;
    border-radius: 20px;
}
.sectionnn{
    display: flex;
    
transition: 5s;
}
.sectionnn input{
height: 50px;
display: none;
width: 0px;
border-radius: 20px;
background-color: #000c;
border: solid white 1px;
color:white;
padding: 10px;

transition: 5s;
}
.hotels{
    display: none;
    width: fit-content;
    justify-content: center;
    background-color: rgb(135 162 178 / 5%);
    height: 300px;
    margin: 20px;
    border-radius: 20px;
}
/* .block{
    min-width: 250px;
    scroll-behavior: auto;
    overflow: hidden;
    width: 250px;
    background-color: rgb(1, 42, 62);
    border-radius: 20px;
    margin: 20px;
} */

 /* Styles for the block */
 .block {
	min-width: 250px;
	width: 250px;
	height: 250px; /* Adjust height as needed */
	background-color: rgb(2, 36, 53);
	border-radius: 20px;
	margin: 20px;
	position: relative; /* Required for absolute positioning */
	overflow: hidden; /* Hide overflowing content */
}

/* Animation for the shimmer effect */
.block::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.215) 50%, transparent 80%);
	animation: shimmer 2s infinite linear;
}

/* Animation keyframes for the shimmer effect */
@keyframes shimmer {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}


.next{
    height: 50px;
    width: 100px;
    background-color: red;
    border-radius: 20px;
    display: none;
}

.headlinks{
    display: flex;
    flex-direction: row-reverse;
    padding: 10px;
}
.headlinks h5{
	cursor: pointer;
    font-size: 12px;
    font-family: monospace;
    margin: 20px;
}