body{
	margin:0;
	min-height:100vh;
	background-image:url("https://raw.githubusercontent.com/XyrelMC/xyrelmc.github.io/refs/heads/main/assets/background.webp");	
	background-position: center;
	background-repeat: repeat;
	background-size: cover;
	background-attachment: fixed;
}

#bar{
	height:185px;
	background-color: rgb(0,0,0,0.3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter:blur(10px);
	color: white; 
	padding: 10px;
	position: fixed;
	width: 100%;
	top: 0;
	left:0;
	z-index:1000;
	display: flex;
	flex-direction: column;
}

#about{
	font-size:30px;
}

textarea{
	margin-top: -70px;
	width: 30%;
	padding: 30px;
	border:1px solid rgb(69,69,69);
	border-radius: 32px;
	background-color: rgb(49, 49, 49,0.5);
	backdrop-filter: blur(10px); /* blur for chromium browsers /
	-webkit-backdrop-filter: blur(10px); / i think this is blur for safari */
	font-family:helvetica;
	font-weight: lighter;
	font-size: 20px;
	margin-left: auto;
	margin-right: auto;
	text-color: white;
	color: white;
	transition:0.3s;

}
		
textarea:hover{
	box-shadow: 0 8px 30px rgba(0,0,0,0.5);
	transform: translateY(-3px); /* card move upwards by 3 pixels */
		}
		
#post_button{
    border:1px solid white;
    padding: 4px;
    border-radius:15px;
    font-size:20px;
	font-weight: lighter;
    background-color:rgb(0,0,0,0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color: white;
    padding: 8px;
}

#post_bar{
    margin-top: 190px;
    background-color: transparent;
    padding: 10px;
}

@keyframes appear{
    from {
        scale: 0.5;
        transform: TranslateX(-100px);

    } to {
        scale: 1;
        transform: translateX(0px);
    }
}

.post{
    padding:10px;
    font-size:20px;
	font-weight: lighter;
    display:flex;
    border:1px solid rgb(69,69,69);
    background-color:rgb(49,49,49,0.4);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    width: 700px;
    border-radius: 15px;
    margin: 20px;
    color: white;
    transition: 0.3s;

  /*  animation: appear linear;
    animation-timeline: view();
    animation-range: entry 30%;
    */
}

.post:hover{
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    transform: translateY(-3px); /* card move upwards by 3 pixels */
        
}