@font-face {
  font-family: "LemonJuice";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/lemon_juice.otf") format("opentype");
}

@font-face {
  font-family: "Outrun";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/outrun_future.otf") format("opentype");
}

@font-face {
  font-family: "Outrun-bold";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/outrun_future_bold.otf") format("opentype");
}

@font-face {
  font-family: "Outrun-bold-italic";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/outrun_future_bold_italic.otf") format("opentype");
}

@font-face {
  font-family: "Typrewrtiter";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/typewriter.otf") format("opentype");
}

@font-face {
  font-family: "Typrewriter-Bold";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/typewriter-bold.otf") format("opentype");
}

@font-face {
  font-family: "Typrewriter-Black";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/typewriter-black.otf") format("opentype");
}

@font-face {
  font-family: "Mind-Boggle";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/mind_boggle.otf") format("opentype");
}

@font-face {
  font-family: "Rock-Bottom";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/rock_bottom.ttf") format("truetype");
}

@font-face {
  font-family: "Homework";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/homework.ttf") format("truetype");
}


.icon
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
	  font-size: 20px;
      speak: never;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }

html {
	background-color: #009EE3;
	background-image: url('img/bg.png');
	background-repeat: repeat-x;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

a {
	text-decoration: none;
	color: #000000;
}

.main {
	text-align: left;
	display:flex; 
	justify-content: space-around;
}

.main .box {
	width: 40%;
	background-color: #ffffff;
	display: flex; 
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	border-radius: 3px 15px 5px 30px;
	margin-top: 150px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 15px;
	padding-top: 15px;
}

.main .box .avatar_sazambi {
	width: 250px;
	height: 250px;
	background-image: url('img/sazambi_png32.png');
	border-radius: 100% 100% 100% 100%;
	margin: 0 auto;
	border: 3px #000000 solid;
}

.main .box .avatar_kaptain {
	width: 250px;
	height: 250px;
	background-image: url('img/sazambi_png32.png');
	border-radius: 100% 100% 100% 100%;
	margin: 0 auto;
	border: 3px #000000 solid;
}

.main .box .social {
	margin-left: -15px;
	margin-right: -15px;
	background-color: #E5007D;
	color: #ffffff;
	display:flex; 
	justify-content: space-around;
}

.main .box .social .icon {
	display: flex; 
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 30px;
}

.main .box .social a {
	color: #ffffff;
}

.main .box .social a:hover {
	color: #FFED00
}

.main .box .social .icon:hover {
	color: #FFED00;
}

.main .box .stream {
	margin: 0 auto;
}

.main .box .frage {
	width: 200px;
	font-family: "Typrewriter-Bold";
}

.main .box .antwort {
	font-family: "Homework";
	font-size: 30px;
}

.main .box table {
	margin: 0 auto;
}

.name_headline {
	background-color: #FFED00;
	color: #E5007D;
	font-family: "Outrun-bold-italic";
	font-size: 40px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
	height: 75px;
}

.headline {
	background-color: #FFED00;
	color: #E5007D;
	font-family: "Mind-Boggle";
	font-size: 60px;
	padding-left: 20px;
	padding-right: 20px;
	width: max-content;
	margin: 0 auto;
}