@media (max-width: 360px) {
	body {
		overflow-y: auto;
	}
	.container {
		width: 100%;
		height: 100%;
		padding-top: 6rem;
	}
	.card-parent2 {
		width: 100% !important;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}
	.card2 {
		width: 100% !important;
		height: auto !important;
	}
	.currencies-card {
		width: 100% !important;
		height: 10rem;
	}
	.country-parent {
		width: 8rem !important;
		height: 7.8rem;
		font-size: 1.4rem;
	}
	h2 {
		font-size: 2rem;
	}
	body::-webkit-scrollbar {
		background-color: rgba(5, 5, 5, 0.836);
		width: 0.3rem !important;
		box-shadow: rgba(211, 164, 12, 0.507) 10px 20px 15px -20px;
	}
	body::-webkit-scrollbar-thumb {
		background-color: rgba(255, 183, 0, 0.774);
		border-radius: 0.5rem;
		height: 0.5rem !important;
	}
	body::-webkit-scrollbar-thumb:hover {
		background-color: goldenrod;
	}
	.cryptos-card {
		width: 100% !important;
		display: flex;
		justify-content: space-between;
		margin-top: 9rem !important;
	}
	.card {
		width: 40% !important;
		height: 9rem !important;
	}
	.title span {
		width: 3rem;
	}
	.data p {
		font-size: 1.8rem;
	}
	.select-menu {
		width: 90%;
	}
	.input::placeholder {
		font-size: 1.5rem;
	}
	.inputs-pparent {
		flex-direction: column;
		align-items: center;
	}
	.select-menu .select-btn {
		font-size: 1rem !important;
		font-weight: 400;
	}
	.select-btn i {
		font-size: 1.4rem;
	}
	.input {
		font-size: 1.6rem;
		width: 17.88rem;
	}
	.input-border {
		width: 19rem;
	}
	.input-alt {
		font-size: 1.2rem;
	}
	.input-alt:focus {
		width: 19rem;
	}
	.convert-btn,
	.change-btn {
		height: 3.7rem;
		width: 6rem;
		font-size: 1.2rem;
	}
	.crypto-modal-list li {
		width: 16rem;
	}
	.crypto-modal-list li div {
		width: 4rem;
	}
	.crypto-modal-list p {
		font-size: 1.4rem;
	}
	.currency-modal-list li {
		width: 90% !important;
	}
	.currency-modal-list li div {
		width: 3rem;
	}
	.currency-modal-list p {
		font-size: 1.2rem;
	}
	.result {
		font-size: 1.5rem !important;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-weight: 400 !important;
	}
}

@media (max-width: 450px) {
	.container {
		padding-top: 0 !important;
	}
}
@media (max-width: 750px) {
	body {
		overflow-y: auto;
	}
	.container {
		width: 100%;
		height: 100%;
	}
	.card-parent2 {
		width: 100% !important;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}
	.card2 {
		width: 100% !important;
		height: auto !important;
		margin-bottom: 1rem;
	}
	.currencies-card {
		width: 100% !important;
		height: 10rem;
	}
	.country-parent {
		width: 10rem !important;
		height: 7.8rem;
		font-size: 1.4rem;
	}
	h2 {
		font-size: 2.3rem;
	}
	body::-webkit-scrollbar {
		background-color: rgba(5, 5, 5, 0.836);
		width: 0.3rem !important;
		box-shadow: rgba(211, 164, 12, 0.507) 10px 20px 15px -20px;
	}
	body::-webkit-scrollbar-thumb {
		background-color: rgba(255, 183, 0, 0.774);
		border-radius: 0.5rem;
		height: 0.5rem !important;
	}
	body::-webkit-scrollbar-thumb:hover {
		background-color: goldenrod;
	}
	.cryptos-card {
		width: 100% !important;
		display: flex;
		justify-content: space-between;
		margin-top: 9rem !important;
	}
	.card {
		width: 45% !important;
		height: 9.4rem;
	}
	.title span {
		width: 3rem;
	}
	.data p {
		font-size: 2.3rem;
	}
	.select-menu {
		width: 90%;
	}
	.input::placeholder {
		font-size: 1.5rem;
	}
	.inputs-pparent {
		flex-direction: column;
		align-items: center;
	}
	.select-menu .select-btn {
		font-size: 1.4rem !important;
		font-weight: 400;
	}
	.select-btn i {
		font-size: 1.4rem;
	}
	.input {
		font-size: 1.6rem;
		width: 17.88rem;
	}
	.input-border {
		width: 19rem;
	}
	.input-alt {
		font-size: 1.2rem;
	}
	.input-alt:focus {
		width: 19rem;
	}
	.convert-btn,
	.change-btn {
		height: 3.7rem;
		width: 6rem;
		font-size: 1.2rem;
	}
	.crypto-modal-list li {
		width: 16rem;
	}
	.crypto-modal-list li div {
		width: 4rem;
	}
	.crypto-modal-list p {
		font-size: 1.4rem;
	}
	.currency-modal-list li {
		width: 80%;
	}
	.currency-modal-list li div {
		width: 3rem;
	}
	.currency-modal-list p {
		font-size: 1.5rem;
	}
	.result {
		font-size: 1.5rem !important;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-weight: 400 !important;
	}
}
@media (max-width: 900px) {
	/* Styles for screens smaller than 900px */
	.card-parent2 {
		width: 50rem;
	}
	.card2 {
		width: 30rem;
		height: 23.5rem;
	}
	.currencies-card {
		width: 50rem;
		height: 10rem;
	}
	.country-parent {
		width: 10rem;
		height: 7.2rem;
		font-size: 1.2rem;
	}
	h2 {
		font-size: 1.8rem;
	}
	.card {
		width: 17rem;
		height: 9.4rem;
	}
	.title span {
		width: 2.6rem;
	}
	.data p {
		font-size: 2.2rem;
	}
	.select-menu {
		width: 15rem;
	}
	.input::placeholder {
		font-size: 1.5rem;
	}
	.select-menu .select-btn {
		font-size: 1.2rem;
		font-weight: 500;
	}
	.select-btn i {
		font-size: 1.2rem;
	}
	.input {
		width: 18rem;
	}
	.input-border {
		width: 18rem;
	}
	.input-alt {
		font-size: 1.2rem;
	}
	.input-alt:focus {
		width: 18rem;
	}
	.convert-btn,
	.change-btn {
		height: 3.2rem;
		width: 6.4rem;
		font-size: 1.2rem;
	}
	.crypto-modal-list li {
		width: 15rem;
	}
	.crypto-modal-list li div {
		width: 2.7rem;
	}
	.crypto-modal-list p {
		font-size: 1.3rem;
	}
	.currency-modal-list li {
		width: 16.3rem;
	}
	.currency-modal-list li div {
		width: 2.7rem;
	}
	.currency-modal-list p {
		font-size: 1.2rem;
	}
	.result {
		font-size: 1.6rem;
		font-weight: 500;
	}
}

@media (min-width: 950px) and (max-width: 1199px) {
	/* Styles for screens between 950px and 1199px */
	.card-parent2 {
		width: 60rem;
	}
	.card2 {
		width: 35rem;
		height: 23.5rem;
	}
	.currencies-card {
		width: 60rem;
		height: 11rem;
	}
	.country-parent {
		width: 12rem;
		height: 7.4rem;
		font-size: 1.2rem;
	}
	h2 {
		font-size: 2rem;
	}
	.card {
		width: 19rem;
		height: 9.4rem;
	}
	.title span {
		width: 3rem;
	}
	.data p {
		font-size: 2.4rem;
	}
	.select-menu {
		width: 16.5rem;
	}
	.input::placeholder {
		font-size: 1.8rem;
	}
	.select-menu .select-btn {
		font-size: 1rem !important;
		font-weight: 600;
	}
	.select-btn i {
		font-size: 1.3rem;
	}
	.input {
		width: 20.7rem;
	}
	.input-border {
		width: 21rem;
	}
	.input-alt {
		font-size: 1.23rem;
	}
	.input-alt:focus {
		width: 21rem;
	}
	.convert-btn,
	.change-btn {
		height: 3.4rem;
		width: 6.4rem;
		font-size: 1.3rem;
	}
	.crypto-modal-list li {
		width: 16rem;
	}
	.crypto-modal-list li div {
		width: 3rem;
	}
	.crypto-modal-list p {
		font-size: 1.4rem;
	}
	.currency-modal-list li {
		width: 17rem;
	}
	.currency-modal-list li div {
		width: 3rem;
	}
	.currency-modal-list p {
		font-size: 1.2rem;
	}
	.result {
		font-size: 1.85rem;
	}
}

@media (min-width: 1200px) {
	/* Styles for screens larger than 1200px */
	.card-parent2 {
		width: 65rem;
	}
	.card2 {
		width: 35rem;
		height: 23rem;
	}
	.currencies-card {
		width: 65rem;
		height: 11.5rem;
	}
	.country-parent {
		width: 15rem;
		height: 7.8rem;
		font-size: 1.4rem;
	}
	h2 {
		font-size: 2.3rem;
	}
	.card {
		width: 20rem;
		height: 9.4rem;
	}
	.title span {
		width: 3rem;
	}
	.data p {
		font-size: 2.6rem;
	}
	.select-menu {
		width: 18.5rem;
	}
	.input::placeholder {
		font-size: 1.5rem;
	}
	.select-menu .select-btn {
		font-size: 1.4rem;
		font-weight: 500;
	}
	.select-btn i {
		font-size: 1.4rem;
	}
	.input {
		font-size: 1.6rem;
		width: 17.88rem;
	}
	.input-border {
		width: 19rem;
	}
	.input-alt {
		font-size: 1.2rem;
	}
	.input-alt:focus {
		width: 19rem;
	}
	.convert-btn,
	.change-btn {
		height: 3.7rem;
		width: 7rem;
		font-size: 1.5rem;
	}
	.crypto-modal-list li {
		width: 16rem;
	}
	.crypto-modal-list li div {
		width: 4rem;
	}
	.crypto-modal-list p {
		font-size: 1.4rem;
	}
	.currency-modal-list li {
		width: 18rem;
	}
	.currency-modal-list li div {
		width: 3rem;
	}
	.currency-modal-list p {
		font-size: 1.2rem;
	}
	.result {
		font-size: 2rem;
	}
}