/* Define custom font using @font-face */
@font-face {
    font-family: 'SF-Pro';
    src: url('Fonts/SF-Pro.ttf') format('truetype');
    /* Add additional font formats (e.g., woff, woff2) for cross-browser compatibility */
}

/* Apply font-family to the body and other elements */
body {
    color: #FFFFFF;
    font-family: 'SF-Pro', 'Helvetica', sans-serif; /* Use custom font 'SF-Pro', fallback to 'Helvetica', then generic sans-serif */
    background: #1e1e1e;
    margin: 0;
    padding-top: 10px;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
}



.header {
 		margin-top: 30px;
		display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
}



	.dish {
		background-color: #333333;
		border-radius: 75px;
		width: 750px;
		margin-top: 60px;
		padding-top: 0px;
		padding-bottom: 30px;
		padding-left: 10px;
		outline: #484848;
		outline-width: 4px;
		outline-style: solid;

		
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;

		
	}






.namesplash {
	color: white;
    font-size: 40px;
    font-weight: 200;
    text-align: left;
    padding-left: 0px;
    padding-top: 50px;
    margin-top: -40px;
    margin-bottom: 0px;

    transition: font-size 0.5s ease, font-weight 2.0s ease, width 3.0s ease, height 3.0s ease, border-radius 3.0s ease, background-color 0.3s ease, color 0.3s ease, text-shadow 1.0s ease;
}

.namesplash:hover {
    color: #FFFFFF;
    font-weight: bolder;
    justify-content: flex-end;
    text-shadow: 0 0 12px rgba(255, 255, 255, 1.0); /* This adds a white glow effect to the text */
	cursor: pointer;
}



.tagline {
    font-size: 24px;
    font-weight: lighter;
	color: #808080;
	margin-top: -70px;

	
	
}







h1 {
	color: white;
}




ul {
    align-content: left;
    padding-top: 90px;
    font-size: 990px;
}

li {
    background-color: #101010;
    border-radius: 30px;
    margin: 0px;
    align-items: left;
    display: inline;
    list-style: none;
    padding: 60px;
}

a {
    text-decoration: none;
    color: white;
}



h2 {
    font-weight: 400;
}









.container {
    width: 176px;
    height: 176px;
    background-color: #434343;
    border-radius: 50px; /* Initial rounded square shape */
    transition: width 2.0s ease, height 2.0s ease, border-radius 2.0s ease, background-color 0.5s ease, color 0.3s ease, letter-spacing 1.5s ease;
    display: inline-block; /* Display containers inline */
    cursor: pointer;
    position: relative; /* Position relative for absolute positioning of text */
    
	margin-right: 40px; /* Adjust margin between containers */
    margin-top: 30px;
	margin-left: px;
	margin-bottom: 0px;
	
	
	
	
}

.container:hover {
    width: 250px; /* Width remains the same */
    height: 250px; /* Height remains the same */
    border-radius: 50%; /* Transform into a circle */
    background-color: white;
    color: white; /* Change text color to black on hover */
	letter-spacing: 0;
}

.container a {

    text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
    font-weight: 500;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
         
	padding-bottom: 80px;
	margin-top: 30px;
}


.container p {

    text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
    font-weight: 500;
	margin-top: -100px;
	
		display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	height: 18vh;
	
	font-size: 24px;
	
	

}
 



.container img {
	
	width: 128px;

	
}


















/* EXTRA SMALL DEVICES */
/* EXTRA SMALL DEVICES */
/* EXTRA SMALL DEVICES */
/* EXTRA SMALL DEVICES */
/* EXTRA SMALL DEVICES */
@media only screen and (max-width: 450px) {
   .namesplash {
       font-size: 23px; /* Adjust font size for smaller screens */
       margin-left: 0px;
	   color: #FFFFFF;
	   margin-top: -400px;
	   margin-bottom: 40px;
	   font-weight: 200;


    }
	
	.namesplash:hover {
	color: #FFFFFF;
    font-size: 25px;
}
	
	
	.header {
 		margin-top: 0px;
		display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
	
}
	
	
	


    li {
        padding: 40px; /* Adjust padding for list items on smaller screens */
    }

   .tagline {
        font-size: 14px; /* Adjust font size for smaller screens */
		margin-top: -50px;
	   font-weight: light;
	   
    }

	
	
	
	
	.container img {
		 width:  60px;
            height: 60px;
		margin-top: 100px;
	}	

	
.container a {

    text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
    font-weight: 500;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
         
	padding-bottom: 20px;
	margin-top: -85px;
}
	
	.container p {
		text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
    font-weight: 500;
	margin-top: 0px;
	
		display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	height: 3vh;
	
	font-size: 15px;
	}
	

	.container {
		margin-left: 20px;
		margin-top: 30px;
		height: 80px;
		width:  80px;


		border-radius: 25px; /* Transform into a circle */
		margin-right: 3px;
		

			
	}
	
	

	
	.container:hover {
    width: 90px; /* Width remains the same */
    height: 90px; /* Height remains the same */
    border-radius: 40%; /* Transform into a circle */
    background-color: white;
   		color: #1D1D1F;
}
	
    /* Additional styles specific to smaller screens can be added here */
	.dish {
		background-color: #333333;
		border-radius: 40px;

		margin-top: -370px;
		width: 380px;
		height: 115px;

		padding-top: 0px;
		padding-bottom: 30px;
		padding-left: 0px;
		padding-right: 10px;
		
		outline: #484848;
		outline-width: 4px;
		outline-style: solid;

	}	
}








/* ORIGINAL MEDIA QUERY */
/* SMALL DEVICES */
/* SMALL DEVICES */
/* SMALL DEVICES */
/* SMALL DEVICES */
/* SMALL DEVICES */
@media only screen and (min-width: 451px) and (max-width: 600px) {
   .namesplash {
       font-size: 25px; /* Adjust font size for smaller screens */
       margin-left: 0px;
	   color: #FFFFFF;
	   margin-top: -400px;
	   margin-bottom: 40px;
	   font-weight: 200;


    }
	
	.namesplash:hover {
	color: #FFFFFF;
    font-size: 25px;
}
	
	
	.header {
 		margin-top: 0px;
		display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
	
}
	
	
	


    li {
        padding: 40px; /* Adjust padding for list items on smaller screens */
    }

   .tagline {
        font-size: 18px; /* Adjust font size for smaller screens */
		margin-top: -50px;
	   font-weight: light;
	   
    }

	
	
	
	
	.container img {
		 width:  80px;
            height: 80px;
		margin-top: 100px;
	}	

	
.container a {

    text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
    font-weight: 500;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
         
	padding-bottom: 20px;
	margin-top: -85px;
}
	
	.container p {
		text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
    font-weight: 500;
	margin-top: 0px;
	
		display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	height: 4vh;
	
	font-size: 20px;
	}
	

	.container {
		margin-left: 20px;
		margin-top: 30px;
		height: 100px;
		width:  100px;


		border-radius: 25px; /* Transform into a circle */
		margin-right: 3px;
		

			
	}
	
	

	
	.container:hover {
    width: 110px; /* Width remains the same */
    height: 110px; /* Height remains the same */
    border-radius: 40%; /* Transform into a circle */
    background-color: white;
   		color: #1D1D1F;
}
	
    /* Additional styles specific to smaller screens can be added here */
	.dish {
		background-color: #333333;
		border-radius: 60px;

		margin-top: -370px;
		width: 425px;
		height: 160px;

		padding-top: 0px;
		padding-bottom: 30px;
		padding-left: 0px;
		padding-right: 10px;
		
		outline: #484848;
		outline-width: 4px;
		outline-style: solid;

	}
}