@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap');

@font-face {
font-family: 'catharsis-bedouin-modified';
font-style: normal;
font-weight: 1000;
src: url(catharsis-bedouin-modified.woff2) format('woff2');
}

body {
background-color: #000000;
color: #ffffff;
margin: auto;
max-width: 80%;
}

h1 {
font-family: 'catharsis-bedouin-modified', Arial, sans-serif;
text-align: center;
font-size: 125px;
margin-bottom: 20px;
/* Make the font look consistent between Firefox and Chrome. The CSS rules below are from the following source: */
/* https://stackoverflow.com/questions/4698564/fonts-looks-different-in-firefox-and-chrome */
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

div {
text-align: center;
height: calc(100vh - 250px);
}

h2 {
font-family: 'Philosopher', Arial, sans-serif;
text-align: center;
font-size: 36px;
font-weight: bold;
margin-top: 10px;
margin-bottom: 4px;
}

h3 {
font-family: 'Philosopher', Arial, sans-serif;
text-align: center;
font-size: 24px;
margin-top: 0px;
}

img {
border: 4px solid #ffffff;
max-height: 100%;
max-width: 100%;
}