body {
	direction: rtl;
	text-align: right;
	background: #000;
	margin: 0;
}

.info-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.info {
	display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

img {
	max-width: 400px;
	border-radius: 50%;
	align-self: center;
}

.info-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.info-text > h1,
.info-text > p
{
	color: white;
	align-self: center;
	margin-left: 40px;
	text-align: center;
}

.lang-bar {
	display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    flex-direction: row-reverse;
}

.lang-button {
	cursor: pointer;	
	color: #000;
    opacity: 0.5;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 5px;
    background-color: #fff;
}

.lang-button:hover,
.lang-button:focus {
	opacity: 0.7;
}

.active {
	font-weight: bolder;
	opacity: 1;
	cursor: default;
}

.active:hover,
.active:focus {
	opacity: 1;
}

.display-4 {
	font-family: 'Markazi Text', serif;
}

@media screen and (max-width:900px) {
	img {
		width: 80%;
	}
}

@media screen and (max-width:800px) {
	.info {
		flex-direction: column;
	}
	
	.info-text > * {
		margin: 10px 0 !important;
		
	}
}

@media screen and (max-width:400px) {
	.info-text {
		font-size: 0.7rem;
	}
}