#container{ width: 100%; height: 100vh; } #header{ /* FIX: du hadde "100%-100" som ikke er gyldig CSS. Dette tilsvarer det du egentlig prøvde på: full bredde. */ width: 100%; padding: 50px; background-image: url(https://img.freepik.com/free-photo/futuristic-metaverse-empty-room-product-display-presentation-abstract-technology-scifi-with-neon-light-3d-background_56104-2314.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; color: white; border: 2px solid white; box-sizing: border-box; } #leftnav{ float: left; width: 15%; background-color: rgba(27,25,78,255); height: 810px; font-family: monospace; color: rgba(30,200,243,255); border: 2px solid white; text-decoration: none; box-sizing: border-box; } #rightnav{ float: right; width: 15%; background-color: rgb(27, 25, 78); height: 810px; font-family: monospace; color: #f583bc; border: 2px solid white; box-sizing: border-box; } #content{ background-color: rgb(27, 25, 78); width: 70%; height: 799px; float: left; padding: 5px; text-align: Center; color: #fff; border: 2px solid white; box-sizing: border-box; } #calc{ background-color: rgb(20, 19, 57); width: 40%; height: 350px; text-align: Center; color: #fff; border: 2px solid white; margin: auto; margin-top: 100px; box-sizing: border-box; } #footer{ clear: both; background-color: gray; width: 100%; height: 50px; font-family: monospace; text-align: center; padding-top: 10px; border: 2px solid white; box-sizing: border-box; } .button { background-color:#23c7f7; border: 2px solid white; color: white; padding: 15px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; cursor: pointer; border-radius: 25%; } .button1{ background-color:red; border: 2px solid white; color: white; padding: 15px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; cursor: pointer; border-radius: 25%; } .start-button{ background-color:rgb(0, 206, 0); border: 2px solid white; color: white; padding: 15px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; cursor: pointer; border-radius: 1%; } .button:disabled { background-color:rgb(20, 19, 57); border: 2px solid lightgray; color: lightgray; cursor: not-allowed; } .start-button:disabled { display: none; } .gues-button{ background-color:#23c7f7; border: 2px solid white; color: white; padding: 15px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; cursor: pointer; border-radius: 15%; } .gues-button:disabled{ display:none; } .input-spill{ width: 75%; padding: 10px 10px; margin: 8px 0; box-sizing: border-box; border: none; background-color: rgb(27, 25, 78); color: white; border: 2px solid white; } .input-spill:disabled{ display:none; } .restart-button{ background-color:rgb(255, 0, 0); border: 2px solid white; color: white; padding: 15px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; cursor: pointer; border-radius: 10%; } .restart-button:disabled{ display:none; } .pongcanvas{ border: 2px solid white; margin-top: 50px; background-image: url(night\ sky.jpg); } .canvas{ border: 2px solid white; margin-top: 1px; background-color: #141339; } /* ================================================== CHAT-STYLING (påvirker KUN chat-siden!) Krever: ================================================== */ body.chat-page #content{ text-align: left; /* ikke senter chat-tekst */ padding: 30px; } /* Chat-panel (vi bruker IKKE #calc på chat-siden) */ body.chat-page .chat-panel{ width: 100%; max-width: 950px; margin: 40px auto 0 auto; padding: 22px; background-color: rgb(20, 19, 57); border: 2px solid white; box-sizing: border-box; color: white; font-family: monospace; } body.chat-page .chat-title{ text-align: center; margin: 0 0 18px 0; font-size: 2rem; } /* Chat logg */ body.chat-page .chat-box{ width: 100%; height: 520px; overflow-y: auto; padding: 14px; background: rgba(10, 10, 40, 0.6); border: 2px solid rgba(255,255,255,0.7); box-sizing: border-box; } /* Meldinger */ body.chat-page .chat-row{ display: flex; width: 100%; } body.chat-page .chat-msg{ max-width: 75%; padding: 10px 12px; margin: 8px 0; border: 2px solid white; white-space: pre-wrap; word-break: break-word; line-height: 1.35; box-sizing: border-box; } body.chat-page .chat-user{ margin-left: auto; background: rgba(35, 199, 247, 0.2); } body.chat-page .chat-bot{ margin-right: auto; background: rgba(255, 255, 255, 0.1); } /* Inputrad */ body.chat-page .chat-input-row{ display: flex; gap: 10px; margin-top: 12px; width: 100%; align-items: center; } body.chat-page .chat-input-row input{ flex: 1; min-width: 0; } body.chat-page .chat-input-row select{ flex: 0 0 220px; max-width: 220px; }