@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900");
@import url('https://fonts.googleapis.com/css?family=Montserrat:500');

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

/* Type */

	body, input, select, textarea {
		color: #000000;
		font-family: Montserrat, "Source Sans Pro", Helvetica, sans-serif;
		font-size: 16pt;
		font-weight: 300;
		line-height: 1.75;
        background-color: white;
	}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 11pt;
			}

            .tiles > article > a > div > p {
                font-size: 9pt;
            }
		}

		@media screen and (max-width: 750px) {

			body, input, select, textarea {
				font-size: 10pt;
			}

            .tiles > article > a > div > p {
                font-size: 8pt !important;
            }
		}

    .page-grid > #header > img { grid-area: image;  max-width: 25%; }
    .page-grid > #header > h1 { grid-area: heading; color: #ff6633; }
    .page-grid > #header
        {
            grid-area: header;
            display: grid;
            place-items: center center;
            justify-content: space-between;
            grid-template-rows: auto auto;
            grid-template-areas: 
            'image'
            'heading';
        }
    .page-grid > .tile-grid { grid-area: tile-grid; }
    .page-grid {
        display: grid;
        justify-items: center;
        grid-template-rows: auto auto;
        grid-template-areas:
            'header'
            'tile-grid';
    }

    .tile-grid {
        display: grid;
        width: 80%;
        justify-items: center;
    }

    .tiles {
        justify-self: center;
        width: 80%;
        display: grid;
        gap: 2rem 2rem;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .tiles > article {
        border-radius: 10%;
        text-decoration: none;
        background-color: #666666;
        box-shadow: 0px 0px 15px 0px #3d33fa;
        padding-top: 20px;
        -moz-transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
        -webkit-transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
        -ms-transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
        transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
    }

    .tiles > article:hover {
        background-color: #d3d3d3;
        box-shadow: inset 0px 0px 10px 0px #ff6633;
    }

    .tiles > article:hover > a {
        color: #666666;
        text-shadow: 0px 0px 25px #ff6633;
    }

    .tiles > article > a {
        display: grid;
        place-items: center center;
        color: white;
        text-decoration: none;
    }

    .tiles > article > a > div {
        display: grid;
    }

    .tiles > article > a > div > p {
        justify-self: center;
        font-size: 10pt;
    }

    .tile-icon {
        font-size: 4em;
    }

    .footer {
        margin-top: 1rem;
        display: grid;        
        place-items: center center;
        justify-content: space-between;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
            'footer-text'
            'copyright'
            'image';
    }

    .footer-text {
        grid-area: footer-text;
        font-size: 0.8em;
        color: #666666;
    }

    .copyright { 
        grid-area: copyright;
     }

    .footer > img { 
        grid-area: image;  
        max-width: 15%; 
    }

    .footer > span > a:hover {
        color: #ff6633 !important;
    }