@media only screen and (min-width:560px) and (max-width: 768px) {
	
	/* @keyframes aniName {
		from { font-size: 0vw;}
		to { font-size: 12vw;}
	}
	
	.navbar .logo #rr {
		height: 90px;
		width: 146.25px;
	}

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

	p.title-name {
		font-size: 12vw;
		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(--four));
	}
	
	#hindi {
		font-size: 1.25vw;
		display: inline-block;
		position: absolute;
		margin-top: -2em;
		margin-left: 1.5em;
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}

	#urdu {
		font-size: 1.25vw;
		display: inline-block;
		position: absolute;
		margin-left: 4.25em;
		margin-top: -2em;
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}
	
	p.post-title {
		margin-left: 9em;
		margin-top: -1.5em;
		font-size: 1.75vw;
		font-family: 'Kristi';
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	} */
	
	.custom {
		font-size: 2vw;
	}
	
}

@media only screen and (min-width:320px) and (max-width:560px) {
	
	@keyframes aniName {
		from { font-size: 0vw;}
		to { font-size: 18vw;}
	}
	
	.navbar {
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		z-index: 100;
		backdrop-filter: blur(2px);
		height: 16vh;
	}
	
	.navbar .logo #rr {
		height: 12vh;
		width: 19.5vh;
	}
	
	.navbar .navlinks {
		margin: 0;
	}

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

	p.title-name {
		font-size: 18vw;
		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(--four));
	}
	
	
	#hindi {
		font-size: 14px;
		display: inline-block;
		position: absolute;
		margin-left: 1em;
		margin-top: -1.5em;
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}

	#urdu {
		font-size: 14px;
		display: inline-block;
		position: absolute;
		margin-left: 4.25em;
		margin-top: -1.5em;
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}
	
	p.post-title {
		margin-left: 8em;
		margin-top: -1em;
		font-size: 28px;
		font-family: 'Kristi';
		animation-name: opacity;
		animation-iteration-count: 1;
		animation-duration: 2s;
		animation-timing-function: linear;
	}
	
	.about {
		padding: 24px;
	}
	
	.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(--three),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;
	}
	
	.custom {
	    font-size: 3vw;
	}
	
}

@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;
    }
}