@font-face {
    font-family: 'JetBrains Mono';
    src: url('./fonts/webfonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('./fonts/webfonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('./fonts/webfonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('./fonts/webfonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('./fonts/webfonts/JetBrainsMono-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('./fonts/webfonts/JetBrainsMono-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('./fonts/webfonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('./fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
	font-family: 'JetBrains Mono';
	color: #c7c7c7;
	background-color: #181818;
	text-align: center;
	min-height: 100vh;
  	margin: 0;
  	position: relative;
}

body::after {
  content: '';
  display: block;
  height: 120px;
  /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
}

.topbar {
	position: sticky;
	text-align: center;
	color: white;
	border-style: solid;
	border-color: white;
	border-width: 1px;
	padding: 3px;
    display: inline-block;
}

.selected {
    color: #666666 !important;
}

a:link { 
	color: #ffffff;
	font-weight: bold;
}

.sun {
    width: 100px;

    animation:spin 4s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}