*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition:background 0.3s ease;
}
html,
body {
  height: 100%;
}
@font-face {
  font-family: uaworld;
  src: url(../font/uaworld.TTF);
}
@font-face {
  font-family: au;
  src: url(../font/ua.ttf);
}
body {
  transition: background-color 0.4s ease-in-out;
  background-color: var(--theme-background);
  color: var(--theme-color-);
  display: flex;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: uaworld;
}
.input-radio{
  appearance: none;
  display: none;
}
img{
  width: 100%;
}
a{
  text-decoration: none;
}
::-webkit-scrollbar{
  display: none;
}
/* ---------------------------------- */
.app{
  width:100%;
  overflow: hidden;
}
.au-pages {
  display: flex;
  width: 100%;
  height: 100%;
}

.au-page {
  width: 100%;
  margin-right: -100%;
  overflow-x: hidden;
  padding-bottom: 11vh;
}
[data-page] {
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

 #for-tab-1:checked ~ * [data-page="1"],
 #for-tab-2:checked ~ * [data-page="2"],
 #for-tab-3:checked ~ * [data-page="3"],
 #for-tab-4:checked ~ * [data-page="4"] {
  opacity: 1;
  transform: translateX(0%);
}
 #for-tab-1:checked ~ * [data-page="1"] ~ [data-page],
 #for-tab-2:checked ~ * [data-page="2"] ~ [data-page],
 #for-tab-3:checked ~ * [data-page="3"] ~ [data-page],
 #for-tab-4:checked ~ * [data-page="4"] ~ [data-page] {
  transform: translateX(100%);
}

.cursor-dot,
.cursor-dot-outline {
  pointer-events: none;
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.cursor-dot {
  width: 13px;
  height: 13px;
  background-color: var(--theme-navbar-svg-fill-a-);
}

.cursor-dot-outline {
  width: 25px;
  height: 25px;
  background-color: var(--theme-blue-5-);
}

/* ---------------------------------- */
 #for-tab-1:checked ~ #app {
  --x: 0;
}

 #for-tab-2:checked ~ #app {
  --x: 1;
}

 #for-tab-3:checked ~ #app {
  --x: 2;
}
#for-tab-4:checked ~ #app {
  --x: 2;
}
/* ---------------------------------- */

nav.amazing-tabs {
  background-color: var(--theme-navbar-);
  border-radius: 1.5rem 1.5rem 0 0;
  user-select: none;
  bottom: 0;
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: center;
  height: 10vh;
  transition: all 0.3s ease-in-out;
}

.main-tabs-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 500px;
  border-radius: 1.5rem 1.5rem 0 0;
  padding-top: 2vh;
  background: var(--theme-navbar-);

}

ul.main-tabs{
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

ul.main-tabs li {
  display: inline-flex;
  position: relative;
  padding:0 1.5vh 0 1.5vh;
  z-index: 1;
}

.avatar,
.avatar img {
  height: 6vh;
  width: 6vh;
  border-radius: 50%;
  pointer-events: none;
}

.avatar img {
  object-fit: cover;
}

.round-button {
  height: 5vh;
  width: 5vh;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease-in-out;
}

.round-button svg {
  pointer-events: none;
  transform: translate(0, 0);
}

.main-slider {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  position: absolute;
  top: 1vh;
  left: 0;
  padding-left: 0;
  z-index: 0;
  transition: transform 0.4s ease-in-out;
  transform: translateX(var(--translate-main-slider));
}

.main-slider-circle {
  height: 6vh;
  width: 6vh;
  border-radius: 50%;
  transition: background-color 0.4s ease-in-out;
  background-color: var(--theme-blue-5-);
}
.main-slider div{
  height: 7vh;
  width: 7vh;
}
.tab-1-path-1,.tab-1-path-2,.tab-2-path-1,.tab-3-path-1{
  fill:var(--theme-navbar-svg-fill-);
  stroke: var(--theme-stroke-);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width: 32px;
  transition: sroke 0s ease-in-out 0.3s;
}
#for-tab-1:checked ~ * .main-slider{
  transform: translateX(0);
}
#for-tab-2:checked ~ * .main-slider{
  transform: translateX(25%);
}
#for-tab-2:checked ~ *.amazing-tabs{
  border-radius: 0;
}
#for-tab-3:checked ~ * .main-slider{
  transform: translateX(50%);
}
#for-tab-4:checked ~ * .main-slider{
  transform: translateX(75%);
}
#for-tab-1:checked ~ * .tab-1-path-1,
#for-tab-2:checked ~ * .tab-2-path-1,
#for-tab-3:checked ~ * .tab-3-path-1{
  fill: var(--theme-navbar-svg-fill-a-);
  stroke: var(--theme-stroke-a-);
}
#for-tab-2:checked ~ * .filters-container{
  bottom: 35px;
  opacity: 1;
}
.animate-jello {
  animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
/*-----------------------------------------------------------------------------------*/
#tab-posts{
  padding-bottom: calc(11vh + 30px);
}
.au-postcard.show {
    animation: show 0.4s ease;
}
@keyframes show {
  10%{transform: rotate3d(1,1,1,10deg);}
 100%{transform: rotate3d(1,1,1,360deg);}
}
.post{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.au-postcard{
	box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	overflow: hidden;
	width: 95%;
	max-width: 400px;
  margin: 10px 10px 10px 10px;
  background: rgb(127, 190, 201);
}
.au-card-img-holder{
	height: 230px;
	background: #777;
	background-position: center !important;
}
.au-card-img {
	display: none;
	object-fit: scale-down;
	height: 100%;
	width: 100%;
	background: transparent;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.au-card-content{
	display: flex;
  flex-direction: column;
	padding: 10px;
  background: var(--theme-post-bg-);
}
.au-post-about{
	display: flex;
    flex-direction: column;
}
.au-post-tike{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.au-post-title{
  font-size: 20px;
}
.au-post-source {
	display: flex;
  flex-direction: column;
}
.au-post-descs {
	display: flex;
  flex-direction: column;
	margin: -15px 0 10px 0;
	max-width: 85%;
}
.au-post-desc{
  margin-top: 0px;
  font-size: 15px;
}
.au-post-sourcer{
	margin: 0 0 5px 0;
}
.au-post-like{
	top: -8px;
	position: relative;
}
.au-post-like ul {
  list-style: none;
  clear: both;
  margin: 0;
  padding-left: 0px;
}
.au-post-liker ul::after {
  content: "";
  display: block;
  clear: both;
}
.au-post-like ul li {
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}
.au-post-like ul li .count {
  font-size: 15px;
  display: block;
  margin-top: -20px;
  color: var(--theme-color-);
}
.counter1 li .icon {
  font-size: 20px;
  display: block;
}
.counter1 li[data-action=like] .icon::before {
  content: "";
}
.counter1 li[data-action=dislike] .icon::before {
  content: "";
}
.counter1 li[data-action=like][data-status=voted] .icon svg path{
  fill: red !important;
  stroke: red !important;
}
.icon svg path{
  fill: var(--theme-post-bg-);
  stroke: var(--theme-color-);
  stroke-width: 15px;
}
.counter li {
  position: relative;
}
.counter li:hover::before {
  opacity: 1;
  visibility: visible;
}
.counter li::after {
  content: "";
  position: absolute;
  left: 50%;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  margin-left: -7px;
  height: 0;
  width: 0;
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10000;
}
.content-hide{
	display: none !important;
}

.dummy-txt {
	width: 80%;
}
.animated-bg {
	background-image: linear-gradient(to right, #e3e7eb 0%, #d3d6df 10%, #e1e7ee 20%, #dee2e6 100%);
	background-size: 200% 100%;
	animation: bgPos 1s linear infinite;
}

.animated-bg-title {
	border-radius: 50px;
	display: inline-block;
	margin: 0;
	height: 25px;
	width: 60%;
}
.animated-bg-text {
	width: 40%;
}
.animated-bg-text.dummy-txt {
	width: 90%;
	margin: 5px 0 5px 0;
}

.animated-bg-text {
	border-radius: 50px;
	display: inline-block;
	margin: 0;
	height: 10px;
}

@-webkit-keyframes bgPos {
  0% {
    background-position: 50% 0;
  }
  100% {
    background-position: -150% 0;
  }
}
@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }
  100% {
    background-position: -150% 0;
  }
}


.filters-container {
  bottom: 0px;
  right: 0;
  left: 0;
  position: absolute;
  background-color: var(--theme-navbar-);
  width: 100%;
  display: flex;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  height: 100%;
  padding-top: 5px;
  opacity: 0;
}
.filter-tabs {
  list-style-type: none;
  display: flex;
  height: 30px;
  padding: 2px 2px;
  border-radius: 10px 10px 0 0;
  overflow: scroll;
  background-color: var(--theme-navbar-);
}

.item{
  padding: 2px 18px;
  margin: 0px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--theme-navbar-svg-fill-a-);
  border-radius: 50px;
  border: 2px solid var(--theme-navbar-svg-fill-a-);
  transition: all 0.3s ease;
}
.filter-tabs::-webkit-scrollbar{
  display: none;
}
.filter-tabs span.active,
.filter-tabs span:hover{
  color: var(--theme-color-filt-);
  background: var(--theme-navbar-svg-fill-a-);
}
#darkmode:checked ~ * .darkm{
  transform: translateX(28px);
}
#cursor:checked ~ * .cursorm{
  transform: translateX(28px);
}
#setting:checked ~*.setting{
  left: 0;
}
.search{
  position: sticky;
  top: -20vh;
  background: var(--light-color);
  z-index: 9;
  width: 100%;
 
}
.fool,.filt{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.au-post-user{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px;
    background: var(--theme-post-bg-);
}
.au-about-pic-user{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 90%;
}
.au-user-img-holder{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.au-user-img{
    display: none;
    border-radius: 50%;
}
.au-user-about{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 5px;
    width: 80%;
}
.au-user-about span{
    width: 70%;
}
.au-post-menu{
    width: 20px;
    height: 20px;
}
.search input{
  width: 95%;
  max-width: 600px;
  height: 33px;
  border-radius: 20px;
  border: none;
  margin: 5px;
  outline: none;
  padding: 0 10px;
  box-shadow: var(--theme-contact-shadow-outset-);
  background-color: var(--theme-navbar-);
  color: var(--theme-color-);
}

.autocom-box{
  display: none;
  flex-direction: column;
  background: #BEC9D6;
  padding: 2px 10px;
  width: 95%;
  max-width: 600px;
  max-height: 150px;
  overflow-y: scroll;
  border-radius: 20px;
}
.autocom-box::-webkit-scrollbar{
  width: 2px;
  display: block; 
  margin-left: 30px;
}
.autocom-box::-webkit-scrollbar-track{
  opacity: 0;
}
.autocom-box::-webkit-scrollbar-thumb{
  display: block;
  background: #00192952;
  border-radius: 2px;
}
.search.active .autocom-box{
  display: flex;
  animation: slow 0.3s ease;
}
.search.active .filters-container{
  display: none;
}
@keyframes slow{
    0%{ max-height: 0vh;}
  100%{ max-height:30vh;}
}
.autocom-box li{
  list-style: none;
  padding: 8px 12px;
  width: 100%;
  cursor: default;
  border-radius: 3px;
  color: black;
  border-bottom: #0000002f solid 1px;
}
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  margin-top: 30px;
}
.error-page h1 {
  font-size: 30vh;
  font-weight: bold;
  position: relative;
  margin: -8vh 0 0;
  padding: 0;
}
.error-page h1:after {
  content: attr(data-h1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: transparent;
  /* webkit only for graceful degradation to IE */
  background: -webkit-repeating-linear-gradient(-45deg, #06e2ff, #0b7bc5, #a23cca, #d63a29, #b025e7, #107ec7, #9005c7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 400%;
  animation: animateTextBackground 5s ease-in-out infinite;
}
.error-page h1 + p {
  color: #d6d6d6;
  font-size: 8vh;
  font-weight: bold;
  line-height: 10vh;
  max-width: 600px;
  position: relative;
  margin: 0;
}
.error-page h1 + p:after {
  content: attr(data-p);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: var(--theme-font-color-);
  text-shadow: 2px 2px 2px rgba(0, 95, 124, 0.568);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

@keyframes animateTextBackground {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 100% 0;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0 100%;
  }
  100% {
    background-position: 0 0;
  }
}
/* ----------------------ddddddddddddddddddddddddddddd--------*/
.post-load{
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    overflow:hidden;
}
.post-load h1 {
 position: absolute;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  left: 50%;
  top: 58%;
  margin-left: -20px;
}

.post-loader {
  position: absolute;
  top: 50%;
  margin-left: -50px;
  left: 50%;
  animation: speeder 0.4s linear infinite;
}
.post-loader > span {
  height: 5px;
  width: 35px;
  background: var(--theme-color-);
  position: absolute;
  top: -19px;
  left: 60px;
  border-radius: 2px 10px 1px 0;
}

.base span {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 100px solid var(--theme-color-);
  border-bottom: 6px solid transparent;
}
.base span:before {
  content: "";
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: var(--theme-color-);
  position: absolute;
  right: -110px;
  top: -16px;
}
.base span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-right: 55px solid var(--theme-color-);
  border-bottom: 16px solid transparent;
  top: -16px;
  right: -98px;
}

.face {
  position: absolute;
  height: 12px;
  width: 20px;
  background: var(--theme-color-);
  border-radius: 20px 20px 0 0;
  transform: rotate(-40deg);
  right: -125px;
  top: -15px;
}
.face:after {
  content: "";
  height: 12px;
  width: 12px;
  background: var(--theme-color-);
  right: 4px;
  top: 7px;
  position: absolute;
  transform: rotate(40deg);
  transform-origin: 50% 50%;
  border-radius: 0 0 0 2px;
}

.post-loader > span > span:nth-child(1),
.post-loader > span > span:nth-child(2),
.post-loader > span > span:nth-child(3),
.post-loader > span > span:nth-child(4) {
  width: 30px;
  height: 1px;
  background: var(--theme-color-);
  position: absolute;
  animation: fazer1 0.2s linear infinite;
}

.post-loader > span > span:nth-child(2) {
  top: 3px;
  animation: fazer2 0.4s linear infinite;
}

.post-loader > span > span:nth-child(3) {
  top: 1px;
  animation: fazer3 0.4s linear infinite;
  animation-delay: -1s;
}

.post-loader > span > span:nth-child(4) {
  top: 4px;
  animation: fazer4 1s linear infinite;
  animation-delay: -1s;
}

@keyframes fazer1 {
  0% {
    left: 0;
  }
  100% {
    left: -80px;
    opacity: 0;
  }
}
@keyframes fazer2 {
  0% {
    left: 0;
  }
  100% {
    left: -100px;
    opacity: 0;
  }
}
@keyframes fazer3 {
  0% {
    left: 0;
  }
  100% {
    left: -50px;
    opacity: 0;
  }
}
@keyframes fazer4 {
  0% {
    left: 0;
  }
  100% {
    left: -150px;
    opacity: 0;
  }
}
@keyframes speeder {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -3px) rotate(-1deg);
  }
  20% {
    transform: translate(-2px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 3px) rotate(-1deg);
  }
  60% {
    transform: translate(-1px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-2px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
.longfazers {
  position: absolute;
  width: 100%;
  height: 100%;
}
.longfazers span {
  position: absolute;
  height: 2px;
  width: 20%;
  background: var(--theme-color-);
}
.longfazers span:nth-child(1) {
  top: 20%;
  animation: lf 0.6s linear infinite;
  animation-delay: -5s;
}
.longfazers span:nth-child(2) {
  top: 40%;
  animation: lf2 0.8s linear infinite;
  animation-delay: -1s;
}
.longfazers span:nth-child(3) {
  top: 60%;
  animation: lf3 0.6s linear infinite;
}
.longfazers span:nth-child(4) {
  top: 80%;
  animation: lf4 0.5s linear infinite;
  animation-delay: -3s;
}

@keyframes lf {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}
@keyframes lf2 {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}
@keyframes lf3 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}
@keyframes lf4 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}
/*------------------------------------------------------------------*/

.setting{
  width: 80%;
  max-width: 300px;
  background: var(--theme-setting-);
  backdrop-filter: blur(10px);
  top: 0;
  left: -300px;
  height: 100vh;
  position: fixed;
  z-index: 5;
  transition: all 0.3s ease;
}
#notification:checked ~ *.notification{
  left: 0;
}

.notification{
  width: 80%;
  max-width: 300px;
  background: var(--theme-setting-);
  backdrop-filter: blur(10px);
  top: 0;
  left: -300px;
  height: 100vh;
  position: fixed;
  z-index: 2;
  transition: all 0.3s ease;
}
.hide{
  display: none !important;
}
.setme{
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0;
}
.setme li{
  font-size: 15px;
  font-weight: 500;
  display: flex;
  margin:10px 0;
  align-items: center;
  justify-content: space-between;
}
.home-img-items{
  display: flex;
  flex-direction: row;
  
  margin-top: 10px;
}
.home-img-item{
  margin: 0 5px;
}
.home-img-selector{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  padding: 2px;
  margin: 0px 0px;
  background: radial-gradient(circle at top left, #b400ff,#ff0033);
 -webkit-background-clip: border-box;
 background-clip: border-box;
 -webkit-text-fill-color: transparent;
 font-weight: bolder;
  box-shadow: var(--theme-contact-shadow-outset-);
}
.toogle-base{
  width: 45px;
  height: 16px;
  background: var(--theme-toggle-base-);
  border-radius: 100px;
  display: flex;
  align-items: center;
}
.toogle-switch{
  width: 25px;
  height: 25px;
  background: var(--theme-toggle-switch-);
  border-radius: 50%;
  margin: 0px 0px 0px -2px;
  cursor: pointer;
  transition: transform 400ms;
}

.preview-box{
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.288);
  backdrop-filter: blur(20px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.prebox{
  border-radius: 20px;
  padding: 10px;
  height: 78vh;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.preview-box img{
  max-height: 70vh;
  border-radius:10px;
}
.close{
  background: radial-gradient(circle at top left, #001aff, #0070bf );
  position:fixed;
  display: block;
  text-align: center;
  border-radius: 20px;
  font-size: 2.5vh;
  padding: 5px 10px;
  bottom: 12vh;
  z-index: 9999;
  width:150px;
}
.au-notifi-inner{
  display: inline-flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
}
.notifi-lists{
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  list-style: none;
}
.notifi-lists li{
  width: 100%;
  background: var(--theme-notifi-li-);
  margin: 10px 0px;
  padding: 5px;
  border-radius: 10px;
  border: 2px solid rgba(0, 255, 255, 0.007);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--theme-color-dark-);
}
.notifi-content{
  width: 100%;
  padding: 5px;
}
.hide-notifi{
  align-self: self-end;
}
.hide-notifi line{
  stroke: cyan !important;
  stroke-width: 40px !important;
}
.notifi-lists li label{
  background: radial-gradient(circle at top left, #fa0068,#ff7300);
  padding: 4px 10px;
  border-radius: 20px;
}
.error{
  display: none;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #33333373;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999999999;
}
.error-box{
  width: 70%;
  max-width: 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  padding: 10px 10px 5px;
  border-radius: 20px;
  font-size: 17px;
}
.close-error{
  margin: 15px 5px 0px;
  width: 100px;
  padding: 5px;
  font-size: 15px;
  border: none;
  border-radius: 20px;
  background: #002f3a;
  color: white;
}
.confirm{
  display: none;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #33333373;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999999999;
}
.confirm-box{
  width: 90%;
  max-width: 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  padding: 10px;
  border-radius: 20px;
  font-size: 17px;
}
.dis-confirm,.agree-confirm{
  margin: 15px 5px 5px;
  width: 100px;
  padding: 5px;
  font-size: 15px;
  border: none;
  border-radius: 20px;
  background: #002d33;
  color: white;
}
.agree-confirm{
  background: #72003f;
}
.buttons{
  display: inline-flex;
}
.circle-loader {
 border-radius: 50%;
 width: 40px;
 height: 40px;
 animation: spin 1s linear infinite;
 border-top: 6px solid #D64045;
 border-bottom: 6px solid #1D3354;
 border-left: 6px solid #E9FFF9;
 border-right: 6px solid #b9e7db;
 }
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }

/*------------------------------------------------*/
  a{
    color: inherit;
  }
  .menu-open{
    bottom: 0 !important;
    z-index: 999999999;
  }
  .hr-short{
    position: absolute;
    top: 5px;
    width: 15%;
    border: none;
    height: 2px;
    background: var(--theme-color-);
  }
  .hr-long{
    border: none;
    width: 100%;
    height: 1px;
    background: var(--theme-color-);
  }
  .au-context-menu{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: -300px;
    left: 0;
    background: var(--theme-setting-);
    color: var(--theme-color-);
    fill: var(--theme-color-);
    stroke: var(--theme-color-);
    padding: 20px 10px 10px;
    list-style: none;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px 20px 0px 0px;
    transition: all 0.3s ease;
  }
  .au-c-m-main{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
  }
  .au-c-m-list{
    width: 100%;
    margin: 10px 0px 0px 0px;
  }
  .au-c-m-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
  }
  .au-c-m-item svg{
    border: 2px solid var(--theme-color-);
    border-radius: 50%;
    padding: 0 5px;
  }
  .au-c-m-item span{
    margin-top: 5px;
  }
  .au-c-m-l-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px;
    margin: 5px 0px 0px 0px;
  }
  .au-c-m-l-item:hover{
    border-radius: 5px;
  }
  .au-c-m-l-item span{
    margin: 0px 0px 0px 10px;
    color:var(--theme-color-);
  }
/*-------------------------------------------------------------------------------*/
.contact{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-fm{
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  max-width: 400px;
}
.contact-form{
  outline: 0;
  height: 40px;
  background: var(--theme-background-);
  width: 90%;
  border-bottom: solid 0px cyan;
  color: var(--theme-color-);
  cursor: text;
  font-size: 17px;
  box-shadow: var(--theme-contact-shadow-inset-);
  margin: 10px 0px 20px 0px;
  padding:0px 14px;
  border-radius: 49px;
  border-right: none;
  border-left: none;
  border-top: none;
  font-family: 'uaworld';
}

.text{
  height: 110px;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: -20px;
}
.form-user{
  width: 60%;
  position: relative;
  margin: 10px 0px 20px 0px;
  border-radius: 49px 0px 0px 49px;
  right: 15%;
  font-size: 15px;
}
select.contact-form-user-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: 'uaworld';
  color: var(--theme-color-);
  border: 0;
  border-radius: 0px 49px 49px 0px;
  outline: 0;
  height: 40px;
  width: 30%;
  padding: 4px;
  margin:0 0 0 -5px;
  top: -60px;
  left: 30%;
  position: relative;
  background: var(--theme-navbar-);
  box-shadow: var(--theme-contact-shadow-inset-);
}
::-webkit-input-placeholder{
  color: #058292;
}

select.contact-form-user-select  option {
  color: inherit;
  background-color: var(--theme-navbar-);
  padding: 5px;
  font-size: 12px;
}
select.contact-form-user-select :focus {
  outline: none;
}
select.contact-form-user-select ::-ms-expand {
  display: none;
}
.contact-detail{
  border: solid 1px cyan; 
  border-radius: 10px;
  background: rgba(0, 255, 255, 0.226);
  padding:10px;
  margin: 10px;
  width: 95%;
  max-width:500px;
}
.contact-form-submit{
  background: #a0c9dd;
  box-shadow: var(--theme-contact-shadow-outset-);
  border: none;
  height: 30px;
  width: 50%;
  max-width: 100px;
  border-radius: 20px;
  outline: none;
  padding: 0px 5px;
}
.contact-form-submit:hover,
.contact-form-submit:active{
  box-shadow: var(--theme-contact-shadow-inset-);
}
.social-massenger{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.social-massenger-links{
  display: flex;
  max-width: 400px;
  width: 90%;
  list-style: none;
  padding: 0px;
  float: left;
  text-align: center;
  justify-content: space-evenly;
}

.social-massenger-links li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden!important;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  box-shadow: var(--theme-contact-shadow-outset-);
}
p.smss{
  margin: 10px 0;
}
.social-massenger li a i {
  position: relative;
  z-index: 1;
}
.social-massenger li a svg {
  width: 24px;
}
.place-label{
  align-self: flex-start;
  padding-left: 20px;
}

/*------------------------home------------------------------------*/
.au-header{
  position: sticky;
  top: 0;
  display:flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-direction: row;
  width: 100%;
  background-color: var(--theme-header-);
  padding: 5px 5px 20px;
  fill: var(--theme-color-);
}
.au-set-not{
  display: flex;
}
.au-notifi{
  display: flex;
  margin: 0 0 0 10px;
}
.is-notifi{
  top: -11px;
  left: -10px;
  position: relative;
  width: 30px;
  height: 30px;
}
.is-notifi-dot{
  position: absolute;
  top: 10px;
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
  border: 1px solid var(--theme-header-);
  background-color: #ff002b;
  animation: isnotifylive 1s ease infinite alternate;
}
@keyframes isnotifylive{
  0%{box-shadow: none;}
100%{box-shadow: 0px 0px 6px 3px #ffffff;}
}
.au-for-pre img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.home{
  background: var(--theme-background);
  position: absolute;
  top: 60px;
  width: 100%;
  z-index: 9;
}
.home-main{
  display: flex;
  background: white;
  height: 90vh;
  max-height: 600px;
  overflow: hidden;
  border-radius: 20px 20px 0px 0px;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
}
.home-main img{
  width: 100%;
  height: auto;
  max-width: 430px;
  position: relative;
  left: 0;
  right: 0;
  object-fit: scale-down;
}

.welcome-text{
  padding: 10px 0px 0px 40px;
  font-family: au;
  font-size: calc( 3.5rem + (3.25 - 1.5) * ((100vw - 20rem) / (48 - 20)));
  color: rgb(1, 31, 43);
}
.hlwtxt{
  display: flex;
  flex-direction: row;
  align-items:baseline ;
}
#fireuser{
  font-size: .6em;
  margin-left: 15px;
  text-transform: uppercase;
}
.greet{
  font-size: .7em;
  background: radial-gradient(circle at top left, #6100bd,#ff0033);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*-------------------------------------------------------------------------------*/
#home-section{
  background: linear-gradient(180deg, white 0px, var(--theme-background)0px);
  padding: 0 0px 11vh ;
}
.fake-search{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: sticky;
  top: 0px;
  z-index: 999;
  background: var(--theme-background);
  padding: 10px 0px 5px;
}
.fake-search center{
  width: 100%;
  max-width: 500px;
  cursor: text;
}
.f-s-input{
  display: flex;
  align-items: center;
  width: 90%;
  box-shadow: 0px 0px 10px 0px #00000080;
  border-radius: 20px;
  background: var(--theme-navbar-);
}
.f-s-input span{
  position: relative;
  left: 0px;
  padding: 2px 5px;
  cursor: text;
}
.f-s-input input::-webkit-search-cancel-button{
  display: none;
}
.f-s-input .placehoder{
  width: 250%;
  position: relative;
  top: 0px;
  cursor: text;
}
.f-s-input .placehoder::before{
  content: "";
  animation: animplace 10s ease infinite;
  color: #05829298;
}
@keyframes animplace {
    0%{ content: "search animated"}
   10%{ content: "search cute"}
   20%{ content: "search nature"}
   30%{ content: "search love"}
   40%{ content: "search facts"}
   50%{ content: "search meme"}
   60%{ content: "search funny"}
   70%{ content: "search tricks"}
   80%{ content: "search video"}
   90%{ content: "search prank"}
  100%{ content: "search augalaxy"}
}
.f-s-input input{
  width: 100%;
  outline: none;
  border: none;
  background: none;
  font-size: 15px;
  padding: 0px 5px 0px 0px;
}
.f-s-input label[for="for-tab-2"]{
  position: relative;
  right: 0px;
  padding: 10px;
  border-radius: 0px 20px 20px 0px;
  background: #058292;
}
/* -----------------------------*/
.ua-feature-box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
  margin: 10px 10px 10px 0px;
  border-radius: 0 20px 20px 0;
  box-shadow: 0 0 20px 0px #979797;
}
.f-ABOUT{
  flex-direction: row-reverse;
  margin: 10px 0px 10px 10px;
  border-radius: 20px 0 0 20px;
}
.ua-feature-img{
  max-width: 400px;
}
.ua-feature-title{
  margin: 0;
  color: #011b2b;
  font-size:calc( 1.7874999999999999rem + (3.25 - 1.7874999999999999) * ((100vw - 20rem) / (48 - 20)));
  font-weight: bolder;
}
.ua-feature-desc{
  font-size: 3.2vh;
  font-variant: small-caps;
  max-width: 300px;
}
.ua-feature-btn{
  padding: 3px;
  display: block;
  width: calc(100%/2);
  margin: 10px 10px 10px calc(100%/4);
  text-align: center;
  border-radius: 20px;
}
.ua-feature-btn p{
  border-radius: 20px;
  font-size: 2.5vh;
  padding: 3px  10px;
  transition: background-color 0.4s ease;
}
.ua-feature-btn p:hover{
  background:#002749;
  color: white;
}
@keyframes slight{
  0%{
    display: none;
  }
  100%{
    display: auto;
  }
}
/*-------------------------------------------------------------------------------*/
.au-favs-item-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.favs-item{
  width: 95%;
  max-width: 500px;
  border-radius: 20px;
  background: cadetblue;
  padding: 5px;
  margin: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.favs-img-holder{
  width: 35%;
  border-radius: 20px;
  overflow: hidden;
}
.favs-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: white;
}
.favs-detail{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 63%;
}
.favs-title{
  font-size: 22px;
  color: #002124;
  border-bottom: 2px solid #002124;
  width: fit-content;
}
.favs-about{
  font-size: 15px;
  color: #e3f3f1;
  padding: 5px 0;
}
.favs-lm{
  color: #00f7ff;
  justify-self: flex-end;
  padding:0 0 0 5px;
}
.homeimgchange{
  animation: show ease 1s;
}