@font-face {
    font-family: 'GalanoGrotesque-Bold';
    src: url('fonts/39E437_0_0.eot');
    src: url('fonts/39E437_0_0.eot?#iefix') format('embedded-opentype'),
         url('fonts/39E437_0_0.woff2') format('woff2'),
         url('fonts/39E437_0_0.woff') format('woff'),
         url('fonts/39E437_0_0.ttf') format('truetype');
}
@font-face {
    font-family: 'GalanoGrotesque-Medium';
    src: url('fonts/39E437_1_0.eot');
    src: url('fonts/39E437_1_0.eot?#iefix') format('embedded-opentype'),
         url('fonts/39E437_1_0.woff2') format('woff2'),
         url('fonts/39E437_1_0.woff') format('woff'),
         url('fonts/39E437_1_0.ttf') format('truetype');}

html {
    background-color: #c71629;
    transition: background-color 1s ease;
}

#textContainer {
    position: relative;
}
  
div {
    transition: opacity 1s ease;
}
  
.hidden {
    opacity: 0;
}

#alertText {
    font-family: "GalanoGrotesque-Bold";
    font-size: 50px;
    color: #fff;
    text-transform: uppercase;
    line-height: 200px;
    text-align: center;
    position: absolute;
    margin: auto;
    left: 0;
    width: 100%;
    padding: 12.5% 0;
    z-index: -1;
}

#explanationText > div > h2 {
    font-family: "GalanoGrotesque-Bold";
    font-size: 30px;
    color: #fff;
}

#explanationText > div > p,
ul li {
    font-family: "GalanoGrotesque-Medium";
    font-size: 20px;
    color: #fff;
}

#git-logo {
    position: fixed;
    right: 20px;
    bottom: 0;
    max-width: 50%;
    max-height: 50%;
}