:root {
	--main-bg-color: #f0f0f0;
	--text-color: #505050;
	--tile-bg-color: #ffffff;
	--tile-hover-bg-color: hsl(359, 35%, 80%);
	--link-bg-color: #f5f5f5;
	--link-hover-bg-color: #e0e0e0;
	--dropdown-arrow-color: #505050;
	--tile-border-color: #e0e0e0;
	--button-bg-color: #e7e7e7;
	--tile-shadow-color-1: rgba(0, 0, 0, 0.2);
	--tile-shadow-color-2: rgba(0, 0, 0, 0.14);
	--tile-shadow-color-3: rgba(0, 0, 0, 0.12);
	--tile-shadow-color-hover: #808080;
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-bg-color: #303030;
		--text-color: #a0a0a0;
		--tile-bg-color: #505050;
		--tile-hover-bg-color: hsl(201, 50%, 20%);
		--link-bg-color: #101010;
		--link-hover-bg-color: #303030;
		--dropdown-arrow-color: #a0a0a0;
		--tile-border-color: #303030;
		--button-bg-color: #303030;
		--tile-shadow-color-1: rgba(0, 0, 0, 0.3);
		--tile-shadow-color-2: rgba(0, 0, 0, 0.36);
		--tile-shadow-color-3: rgba(0, 0, 0, 0.38);
		--tile-shadow-color-hover: #000000;
	}
}

@font-face
{
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Medium.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
}

*{
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

body
{
	color: var(--text-color);
	background-color: var(--main-bg-color);
    padding: 5px 5px;
	font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-style: normal;
	font-size: 140%;
}

img{
    height: 40px;
}

a:link,
a:visited,
a:active{
    color: var(--text-color);
    text-decoration: none;
}

.download-button{
	display: flex;
	border-radius: 5px 5px 5px 5px;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 250px;
	height: 50px;
	background-color: var(--tile-bg-color);
	-webkit-box-shadow: 0px 2px 1px -1px var(--tile-shadow-color-1),0px 1px 1px 0px var(--tile-shadow-color-2),0px 1px 3px 0px var(--tile-shadow-color-3);
            box-shadow: 0px 2px 1px -1px var(--tile-shadow-color-1),0px 1px 1px 0px var(--tile-shadow-color-2),0px 1px 3px 0px var(--tile-shadow-color-3);
	-webkit-transition: background-color .2s ease-out, box-shadow .2s ease-out, -webkit-box-shadow .2s ease-out;
		 -o-transition: background-color .2s ease-out, box-shadow .2s ease-out, -webkit-box-shadow .2s ease-out;
			transition: background-color .2s ease-out, box-shadow .2s ease-out, -webkit-box-shadow .2s ease-out;
}

.download-button div{
	float: left;
	display: flex;
}

.text{
	width: 200px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon{
	padding: 4px;
	width: 50px;
	height: 50px;
}