body{ background:#2E2E2E; } article{ display:flex; flex-direction:column; } .line1{ height:80px; flex-direction:column; } #online{ background-color:#298327; border: 2px solid #039600; text-align:center; padding:2px; font-weight:bold; } #offline{ background:red; border: 2px solid #911000; text-align:center; padding:2px; font-weight:bold; } .line1>img{ height:30px; margin-top:20px; margin-left:50px; } .line2{ height:300px; } .left>img{ height:280px; } .line{ display:flex; border:3px solid black; } .left,.right{ margin:10px; } .left{ flex:1; } .right{ flex:2; } .right > span{ color:white; width:100%; height:30px; flex:1; display:inline-block; } label{ background:#212E2E; width:30%; display:inline-block; } .line3{ flex-direction:column; height:200px; overflow:auto; max-height:400px; color:white; padding:5px 20px 20px 20px; } .line3 > h2{ text-align:center; color:white; text-decoration:underline; } .profil_button { width:64px; height:48px; border-right:1px solid #1a1a1a; border-left:1px solid #262626; float:left; -webkit-transition: background-image .15s ease-in; -moz-transition: background-image .15s ease-in; -o-transition: background-image .15s ease-in; -ms-transition: background-image .15s ease-in; transition: background-image .15s ease-in; } .profil_button:hover { background-color: #202020 !important; } .profil_button.mail { background: url(https://static.pennergame.de/img/pv4/profil/mail_normal.png); } .profil_button.friend { background: url(https://static.pennergame.de/img/pv4/profil/friend_normal.png); } .profil_button.attack { background: url(https://static.pennergame.de/img/pv4/profil/attack_normal.png); } .profil_button.bearbeiten { background: url(images/menue_icons/admin.png); border:1px solid #1a1a1a; height:46px; } .profil_button.mail:hover { background: url(https://static.pennergame.de/img/pv4/profil/mail_hover.png); } .profil_button.friend:hover { background: url(https://static.pennergame.de/img/pv4/profil/friend_hover.png); } .profil_button.attack:hover { background: url(https://static.pennergame.de/img/pv4/profil/attack_hover.png); } .profil_button.bearbeiten:hover { background: url(images/menue_icons/admin.png); border:1px solid green; } #ueber{ font-family:'CrackhousefranceRegular'; font-size: 48px; color:#FFF; margin-left:10%; } .line4{ text-align:center; color:white; display:flex; flex-direction:column; } #kommentarform{ } fieldset > input{ min-width:20px; font-size:16px; } .kill{ background:red; color:white; cursor:pointer; padding:0; } .andern{ background:orange; color:white; cursor:pointer; padding:0; } .bewertung_ok{ color:yellow; } /* BUTTONS */ #login1{ color:white; height:120px; width:300px; background-image:linear-gradient(to bottom,#fe4a4b,#930304); border-radius:50px; cursor:pointer; } #loginleft{ font-size:35px; font-weight:900; width:45%; position:relative; left:30px; top:30px; float:left; } #loginright{ font-size:50px; font-weight:900; border-radius:50%; height:80px; width:80px; background-image:linear-gradient(to left,#fe4a4b,#930304); border:2px solid black; position:relative; left:50px; top:18px; float:left; transform: rotate(90deg); } #loginright > span{ position:relative; top:-35px; left:0px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 30px solid white; padding:0; } #reg1{ color:white; height:120px; width:400px; background-image:linear-gradient(to bottom,#fe4a4b,#930304); border-radius:50px; } #regleft{ font-size:35px; font-weight:900; width:63%; position:relative; left:30px; top:30px; float:left; } #regright{ font-size:50px; font-weight:900; border-radius:50%; height:80px; width:80px; background-image:linear-gradient(to left,#fe4a4b,#930304); border:2px solid black; position:relative; left:50px; top:18px; float:left; transform: rotate(90deg); } #regright > span{ position:relative; top:-35px; left:0px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 30px solid white; padding:0; } @media (max-width: 700px) { #komplett{ display:flex; flex-direction:row; transform:scale(0.8); } } @media (min-width: 701px) { #komplett{ display:flex; flex-direction:row; } } @media (max-width: 301px) { #komplett{ display:flex; flex-direction:column; transform:scale(0.4); } } #dumusst{ color:white; text-align:center; padding:5px; } #alles{ display: flex; flex-wrap: nowrap; justify-content: space-around; align-content: space-around; align-items: center; }