@font-face {
    font-family: KozGoPro-Regular;
    src: url("../fonts/KozGoPro-Regular.otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: KozGoPro-Light;
    src: url("../fonts/KozGoPro-Light.otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: KozGoPro-ExtraLight;
    src: url("../fonts/KozGoPro-ExtraLight.otf");
    font-weight: normal;
    font-style: normal;
}

html, body{
    width: 100%;
    height: 100%;
}




.tweet {
  border:1px solid rgb(230,236,240);
  border-radius: 4px;
  padding: 20px;
  /*max-width:500px;*/
  text-align: left;
  margin:auto;
  margin-top: 20px;
  font-size: 200%;
}

h2 {
  margin-bottom: 0; 
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 10px;
}

.avatar-outer{
  padding-top: 10px;
}

#tweet_text{
  margin-left: 90px;
}


button {
  background-color: rgb(38,164,240);
  border: none;
  border-radius: 4px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  /*font-size: 16px;*/
  font-size: 250%;
  width: 45%;
  margin: 5px;
}

.next-button {
  background-color: rgb(109,117,125);
  width: 93%;
}

button:disabled {
  background: #dddddd;
}

button:hover {
  cursor: pointer;
}

.top-banner-first{
  width: 100%;
}

.top-banner-second{
  width: 100%;
}

.top-banner-first-inner{
    font-family: KozGoPro-Light;
    font-size: 350%;
    width: 65%;
    margin: auto;
    padding-top: 5px;
}

.top-banner-second-inner{
    font-family: KozGoPro-ExtraLight;
    font-size: 205%;
    width: 100%;
    padding: 0% 2%;
}

.top-banner-bg {
  width: 100%;
  background: #f8f8f8;
  height: 9%;
}

.small-link{
  font-size: 200%;
}

.title-span{
  font-size: 280%;
  font-weight: 400;
}

#score{
  font-size: 250%;
}

.info-content{
  font-size: 200%;
}

.info-content-img{
  width: 100%;
}

.image-bottom-text-inner{
  width: 20%;
}

.image-bottom-text-outer{
  font-size: 70%;
}


@media only screen and (min-width: 1000px) {
  .top-banner-first{
    width: 40%;
    float: left;
  }

  .top-banner-second{
    width: 60%;
    float: right;
    padding: 0.5% 2%;
  }

  .top-banner-first-inner{
    font-size: 150%;
    display: block;
    padding: 1% 4%;
    margin: none;
    width: auto;
  }

  .top-banner-second-inner{
    display: inline-block;
    float:right; 
    font-size: 130%;
    padding: 0;
    width: auto;
  }

  .top-banner-bg{
    height: 50px;
  }

  .small-link{
    font-size: 100%;
  }

  .title-span{
    font-size: 200%;
  }

  .tweet {
    max-width: 500px;
    font-size: 100%;
    padding: 10px;
  }

  .avatar {
    width: 50px;
    height: 50px;
  }

  .avatar-outer{
    padding-top: 0;
  }

  #tweet_text{
    margin-left: 60px;
  }

  #score{
    font-size: 120%;
  }

  button{
    font-size: 100%;
  }

  .info-content{
    font-size: 100%;
  }

  .info-content-img{
    width: 50%;
  }

  .image-bottom-text-outer{
    font-size: 90%;
  }

  .image-bottom-text-inner{
    width: auto;
  }
}