html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html,body {
  margin: 0;
  padding: 0;
}

body {
  background: #040406;
  font-family: 'Dosis', sans-serif;
  color: #aaa;
}

#page {
  background: url('./img/web-bg.png') top center repeat-x;
}

#main {
  max-width: 810px;
  background: url(./img/botious-web.png) top center no-repeat;
  margin: 0 auto;
}

#logo img {
  max-width: 100%;
  margin: 0 auto;
}

a {
  color: #a1aee3;
}

h1 {
  background: -webkit-linear-gradient(#3c54bf, #dfe9fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

h2,h3 {
  background: -webkit-linear-gradient(#82198f, #d4a5d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

hr {
  background: none;
  border: none;
  border-top: 1px solid #ff6dfa;
  clear: both;
}

#content {
  margin: 0 50px;
  padding: 480px 0 0 0;
}

input, textarea, button {
  width: 300px;
  font-size: 1.2em;
  padding: 8px;
  margin: 8px 0 8px 0;
  border: none;
  display: block;
  background: #181822;
  font-family: 'Dosis', sans-serif;
  color: #ff6dfa;
}

button {
  cursor: pointer;
  border: 1px solid #ff6dfa;
}

.error {
  color: #ffff6d;
}

.cool-beans{
  color: #0f0;
  font-size: 1.2em;
  text-shadow: 0 0 10px #0f0;
}

#footer {
  text-align: right;
  font-size:.7em;
}

#footer a {
  color: #aaa;
}

.entry .date {
  font-size: .7em;
  color: #777;
}
.entry .title {
  font-size: 1.1em;
  color: white;
}
.entry .img img {
  max-width: 100%;
  max-height: 100%;
}
.entry .img {
  width: 150px;
  height: 150px;
  float: left;
  margin: 0 16px 16px 0;
}

.pronounce{
  display: inline-block;
  font-size:.7em;
  cursor:pointer;
  background: none;
  -webkit-text-fill-color: initial;
}

.stream{
  display:inline-block;
  margin: 4px 4px 0 0;
  width:32px;
  height:32px;
}

.stream img{
  width: 100%;
}

.platform a {
    display: inline-block;
    margin: 8px 5px;
    margin-left: none;
}

.platform {
  display: inline-block;
}

.platform a:hover {
  -webkit-filter: drop-shadow(0 0 3px rgba(255, 55, 255, 1));
  filter: drop-shadow(0 0 3px rgba(255, 55, 255, 1));
}

@media only screen and (max-width: 799px) {
  #page,#main {
    background-size: 570px;
  }
  #main {
    max-width: 640px;
  }
  #content{
    padding: 360px 0 0 0;
  }
}

@media only screen and (max-width: 639px) {
  #page,#main {
    background-size: 400px;
  }
  #main {
    max-width: 480px;
  }
  #content{
    padding: 260px 0 0 0;
  }
}

@media only screen and (max-width: 479px) {
  #page,#main {
    background-size: 360px;
  }
  #main {
    max-width: 360px;
  }
  #content{
    padding: 240px 0 0 0;
    margin: 0 10px;
  }
  input, textarea, button {
    width: 100%;
    font-size: 1em;
  }
}

@media only screen and (max-width: 359px) {
  #page,#main {
    background-size: 320px;
  }
  #main {
    max-width: 320px;
  }
  #content{
    padding: 210px 0 0 0;
    margin: 0 10px;
  }
  input, textarea, button {
    width: 100%;
    font-size: 1em;
  }
}