@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

*{
    font-family: 'Kanit', sans-serif;
    padding: 0;
    margin: 0;
}

.bg-horizon{
    background: url(/img/Horizon.jfif);
}

.footer-bar{
    width: 100%;
    height: 70px;
    background: rgb(252,196,43);
    background: linear-gradient(0deg, rgba(252,196,43,1) 0%, rgba(228,143,27,1) 100%);
    position: fixed;
    bottom: 0;
    border-top: 4px solid rgba(252,196,43,1);
    border-radius: 10px 10px 0px 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.logo-position{
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transform: translateY(-25px); 
}

.shadow-grow{
    filter: drop-shadow(0 0 0.75rem rgba(252,196,43,1));
}

.shadow-grow-text{
    text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 20px #ffb726, 0 0 40px #ffb726, 0 0 0 #ffb726, 0 0 44px #ffb726, 0 0 75px #ffb726;
}

.shadow-b{
    filter: drop-shadow(0 1mm 1mm black);
}

.float-img{
    animation: float 3s ease-in-out infinite;
}

.floatx-img{
    animation: float-x 3s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes float-x {
	0% {
		transform: translatex(0px);
	}
	50% {
		transform: translatex(-10px);
	}
	100% {
		transform: translatex(0px);
	}
}

.box-nav{
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
}

.activate.box-nav{
    opacity: 1;
    pointer-events: fill;
    transition: 0.2s ease-in-out;
}

.t-shadow{
    text-shadow: 0 0 10px black, 0 0 20px #00000094;
}

#hr{
    background: linear-gradient(90deg,black,#ecbd7b 30%,#ecbd7b 70%,black);
    width: 100%;
    height: 4px;
}