@media screen and (min-width: 1300px) {
    html {
        font-size: 140%;
    }
}
@media screen and (max-width: 1300px) {
    html {
        font-size: 250%;
    }
}
body {
	background-color: #4b525e;
	color: #c7ced9;
	font-family: monospace;
}

body::before {
	content: "";
    position: absolute;
	width: 200px;
	height: 200px;
	background-image: url('../favicon/favicon.svg');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	filter: blur(8px);
	opacity: 0.4;
	z-index: 0;
}

h1 {
    padding-top: 75px;
    padding-bottom: 100px;
    margin-left: 100px;
    filter: blur(1px);
    opacity: 0.5;
}

a {
    color: #c7ced9;
}

ul {
    list-style: none;
    display: inline;
}
li {
    margin-bottom: 0.5em;
}

div.link-group {
    margin: 25px;
    backdrop-filter: brightness(90%);
    padding: 10px;
    border-radius: 12px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
    width:400px;
}

@media screen and (min-width: 1300px) {
    div.link-group {
        display:inline-flex;
    }
}
@media screen and (max-width: 1300px) {
    div.link-group {
        width:90%;
        margin-left: auto;
        margin-right: auto;
    }
}

a {
    text-decoration: none;
}

a[target="_blank"]::after {
    content: "↗";
    margin-left: 0.3em;
    font-size: 0.9em;
    vertical-align: middle;
}