// Page stylesheet for the individual pages
// The license is included in the file LICENSE.txt
// If you did not receive a copy of the license with this file, you may download it under https://mit-license.org/
// Copyright © 2024 Milan Mišić (eMail: twoexem@gmail.com)

.grid {
        // Displays the selection grid
	
	letter-spacing: 0px;
        display: flex;
	justify-content: center;

        display: grid;
        grid-template-columns: 300px 300px 300px;
        gap: 20px;
	
	// Make the titles be good
	.title {
		border: transparent solid 10px;
		border-radius: 5px;
		text-align: center;
		//backdrop-filter: blur(1px) brightness(100%);
		padding: 3px;
		max-width: auto;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;

		// Add animations woo yeah
		transition: 0.2s ease-in-out;
		&:hover {
			backdrop-filter: blur(5px) brightness(80%);
			// Apple WebShit compatibility
			-webkit-backdrop-filter: blur(5px) brightness(80%);
			transition: 0.2s ease-in-out;
		}

	}

        .image {
                // Gives the grid images a nice round edge
                border-radius: 5px;
		overflow: hidden;
		height: 180px;
		width: auto;
	}

        img {
                // Sets the images for the individual boxes properly
                width: 100%;
                height: 100%;
                object-fit: cover;
		display: flex;
		justify-content: center;
        }
}

.center_img {

	overflow: hidden;
	width: 400px;
	padding: 5px;
	display: block;
	margin-left: auto;
	margin-right: auto;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 5px;
	}
}

.button {
        // Used to display an anchor tag properly
	
	//font: 14px 'Varela';
        display: flex;
	justify-content: center;
        width: auto;

        div {
		

		// Secondary div to *really* center this div

                border: 3px solid transparent;
                border-radius: 5px;
                padding: 5px;
                max-width: max-content;
                text-align: center;
		backdrop-filter: blur(1px) brightness(70%);
		// Apple WebShit compatibility
		-webkit-backdrop-filter: blur(1px) brightness(70%);
		transition: 0.2s ease-in-out;
                
		&:hover {
                        backdrop-filter: blur(5px) brightness(60%);
			// Apple WebShit compabilitity
			-webkit-backdrop-filter: blur(5px) brightness(60%);
                        transition: 0.2s ease-in-out;
                }

                a {
                        // Colours the link white for readability

                        color: white;
                }
        }
}

.text {
	border: transparent solid 10px;
	border-radius: 5px;
	padding: 3px;
	backdrop-filter: blur(5px) brightness(80%);
	// Apple WebShit compatibility
	-webkit-backdrop-filter: blur(5px) brightness(80%);
	color: white;
}

// Font settings
.title {
	font-size: 18px;
}