*{
    margin:0;
    padding:0;
    font-family:sans-serif;
}
html{
    height:100%;
}

body {
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
    url('../images/DF_BG.png');
  background-size: cover;
  background-position: center;
}

@font-face{
    font-family: "Inversionz";
    src: local(Invensionz), url('../fonts/oldenglishtextmt.ttf') format('opentype');
    font-style: normal;
    font-weight: 400;
}

@font-face{
    font-family: "FuturaExt";
    src: local(FuturaExt), url('../fonts/FuturaExtended.ttf') format('opentype');
    font-style: normal;
    font-weight: 400;
}

@keyframes impact {
    0% {
        background-size: 200% 100%,
        150% 100%,
        100% 100%,
        60% 100%,
        40% 100%,
        20% 100%,
        1% 100%;
    }
    100% {
        background-size: 250% 100%,
        200% 100%,
        150% 100%,
        100% 100%,
        60% 100%,
        40% 100%,
        20% 100%;
    }
}

.fblogo{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.images{
    text-align:center;
}

.likeBtn{
    display:block;
    margin: 0 auto;
}

.heading{
    width:600px;
    height:300px;
    margin:auto;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

.title1{
    display:block;
    text-align:center;
    color:rgb(255, 255, 255);
    font-size:60pt;
    font-family:Inversionz;
}

.subtitle1{
    display:block;
    text-align:center;
    color:rgb(255, 255, 255);
    font-size:16pt;
    font-family:FuturaExt;
}

.title2 {
    display:block;
    margin-top:15px;
    text-align:center;
    color:white;
    font-size:14pt;
    font-family:serif;
}

.register{
    margin:50px auto;
    display:block;
    width:180px;
    height:50px;
    border:3px solid white;
    background-color:rgba(255,255,255,0);
    color:white;
    font-family:sans-serif;
    font-weight:bold;
    font-size:15px;
    border-radius:5px;
    transition:background-color 1000ms, color 1000ms;
}

.register:hover{
    background-color:rgba(255,255,255,1);
    color:#222;
    cursor:pointer;
    transition:background-color 1000ms, color 1000ms;
}

.subtitle2{
    display:block;
    margin-bottom:15px;
    text-align:center;
    color:white;
    font-size:10pt;
    font-family:serif;
}

.centerParagraph{
    width:50%;
    height:auto;
    margin: 0 auto;
}

.leftText{
    display:block;
    margin-bottom:15px;
    text-align:left;
    color:white;
    font-size:10pt;
    font-family:serif;
}

.sotw{
    margin:0 auto;
    width:600px;
    height:auto;
    border:3px solid white;
    background-color:rgba(255,255,255,0);
    color:white;
    font-family:sans-serif;
    font-weight:bold;
    border-radius:5px;
}

.newestSurvivors{
    margin:0 auto;
    width:600px;
    height:auto;
    border:3px solid white;
    background-color:rgba(255,255,255,0);
    color:white;
    font-family:sans-serif;
    font-weight:bold;
    border-radius:5px;
}

.topSurvivors{
    margin:0 auto;
    width:600px;
    height:auto;
    border:3px solid white;
    background-color:rgba(255,255,255,0);
    color:white;
    font-family:sans-serif;
    font-weight:bold;
    border-radius:5px;
}

.inputField{
    font-family:sans-serif;
    font-size:14px;
    width:400px;
    height:30px;
    margin:0 auto;
    display:block;
}

#progressBar {
    display: block;
    height: 5px;
    width: 5%;
    background-color: red;
}

#strength {
    color: red;
}