@media only screen and (min-width:560px) and (max-width: 768px) {
	
	@keyframes aniName {
		from { font-size: 0px;}
		to { font-size: 180px;}
	}
	
	.navbar .logo {
		font-size: 36px;
		margin-left: 40px;
		font-family: 'Cinzel';
	}
	
	.navbar .navlinks {
		margin-right: 40px;
	}

	.navbar .navlinks a {
		margin: 0 8px;
		font-size: 16px;
	}
	
	p.pre-title {
		margin-left: -12em;
		margin-bottom: -0.45em;
		font-size: 36px;
		font-family: 'Babylonica';
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}

	p.title-name {
		font-size: 160px;
		line-height: 1;
		animation-name: aniName;
		animation-iteration-count: 1;
		animation-duration: 1.5s;
		animation-timing-function: linear;
		text-align: center;
		position: relative;
		font-family: 'Cinzel';
		color: rgb(var(--one));
	}
	
	#hindi {
		font-size: 18px;
		display: inline-block;
		position: absolute;
		margin-top: -1em;
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}

	#urdu {
		font-size: 18px;
		display: inline-block;
		position: absolute;
		margin-left: 5.25em;
		margin-top: -1em;
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}
	
	p.post-title {
		margin-left: 9em;
		margin-top: -1em;
		font-size: 40px;
		font-family: 'Kristi';
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}
	
}

@media only screen and (min-width:320px) and (max-width:560px) {
	
	@keyframes aniName {
		from { font-size: 0px;}
		to { font-size: 80px;}
	}
	
	.navbar {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		z-index: 100;
		backdrop-filter: blur(2px);
		height: 14vh;
	}
	
	.navbar .logo {
		font-size: 42px;
		font-family: 'Cinzel';
		margin: 0;
	}
	
	.navbar .navlinks {
		margin: 0;
	}

	.navbar .navlinks a {
		margin: 0 8px;
		font-size: 16px;
	}
	
	p.pre-title {
		margin-left: -7.75em;
		margin-bottom: -0.25em;
		font-size: 24px;
		font-family: 'Babylonica';
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}

	p.title-name {
		font-size: 80px;
		line-height: 1;
		animation-name: aniName;
		animation-iteration-count: 1;
		animation-duration: 1.5s;
		animation-timing-function: linear;
		text-align: center;
		position: relative;
		font-family: 'Cinzel';
		color: rgb(var(--one));
	}
	
	#hindi {
		font-size: 10px;
		display: inline-block;
		position: absolute;
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}

	#urdu {
		font-size: 10px;
		display: inline-block;
		position: absolute;
		margin-left: 5.25em;
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}
	
	p.post-title {
		margin-left: 7em;
		margin-top: -0.55em;
		font-size: 24px;
		font-family: 'Kristi';
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}
	
	.about h1 {
		font-family: 'Babylonica';
		font-size: 60px;
		color: black;
	}
	
	.discography h1 {
		font-family: 'Babylonica';
		font-size: 60px;
		color: black;
	}
	
	.disco-list {
		display: flex;
		flex-direction: column;
	}
	
	img#big {
		height: 70vw;
		width: 57vw;;
	}

	img#small {
		height: 57vw;
		width: 57vw;
	}
	
	.footer {
		display: flex;
		flex-direction: column;
		background: rgba(var(--one),0.5);
		padding: 24px;
		border-radius: 8px;
		box-shadow: 0px 0px 10px rgba(255,255,255,0.5);
		margin: 12px;
	}
	
	.footer .social-links a {
		font-size: 20px;
		padding: 8px 0;
		color: black;
	}

	.footer .social-links h1 {
		font-family: 'Babylonica';
		font-size: 42px;
		color: black;
	}
	
	#about, #discography {
		padding: calc(2vh + 12px);
	}
	
	.custom {
	    font-size: 12px;
	}
	
}

@media only screen and (max-width:319px){
    
    .navbar, .title, .about, .discography, .footer, #about, #discography {
        display: none;
    }
    
    .not-accessible{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
    }
    
    .not-accessible p{
        font-size: 12px;
    }
}