*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100vh;
    background-image:url("images/background_classroom.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:white;
    font-family:Arial,sans-serif;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:-1;
}

body{
    padding:30px;
}

@font-face {
    font-family: 'Economica';
    src: url('fonts/Economica-Regular.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'Economica-Bold';
    src: url('fonts/Economica-Bold.ttf') format('truetype');
    font-weight: bold;
}

h1{
    font-size:40px;
    margin-bottom:20px;
}

h2{
    font-size:32px;
    margin-bottom:20px;
}

h3{
    font-size:24px;
    margin-bottom:15px;
}

input{
    width:350px;
    max-width:90%;
    padding:15px;
    font-size:18px;
    border:none;
    border-radius:12px;
    background:#f5bf3b;
    color:#111;
    font-weight:bold;
    margin:10px;
}

button{
    padding:15px 35px;
    border:none;
    border-radius:12px;
    background:#f5bf3b;
    color:#111;
    font-size:24px;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;
    margin:10px;
}

button:hover{
    transform:scale(1.05);
}

ul{
    list-style:none;
    margin-top:20px;
}

li{
    font-size:24px;
    margin-bottom:10px;
}

canvas{
    display:block;
    margin:auto;
    background:white;
    border-radius:20px;
    border:4px solid #f5bf3b;
}

img{
    max-width:90%;
    border-radius:20px;
    border:4px solid #f5bf3b;
    margin-top:20px;
    background: #fff
}

#guessStatusBox{
    margin-top:30px;
    padding:20px;
    background:#222;
    border-radius:15px;
    display:inline-block;
}

p{
    font-size:20px;
    margin:10px 0;
}

#logo{
    display:block;
    margin:20px auto;
    width:500px;
    max-width:90%;
    border:none !important;
    border-radius:0 !important;
    background-color: transparent !important;
    margin-top: -60px;
}





#whiteboard{

    width:994px;

    max-width:90%;

    min-height:482px;

    margin:20px auto;

    padding:40px;

    color:black;

    margin-top:-206px;

    text-align:center;

}

#players{

    list-style:none;

    padding:0;

    margin:20px 0;

}

#players li{

    background:#f0f0f0;

    margin:8px auto;

    padding:12px;

    border-radius:10px;

    width:300px;

    font-size:22px;

    font-weight:bold;

}

#createRoom, #startGame, #joinRoom, #clearCanvas, #finishDrawing, #sendGuess, #nextDrawing{

    background:#2c7be5;

    color:white;

    border:none;

    padding:14px 24px;

    border-radius:10px;

    cursor:pointer;

    font-size:20px;

    font-weight:bold;

}


/*Raumcode*/


#roomCodeClipboard{

    position:fixed;

    top:20px;

    right:20px;

    width:240px;

    height:320px;

    background-image:
        url(
            "images/roomcode_clipboard.png"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

    z-index:100;

}

#roomCodeText {
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    font-family: "Economica-Bold", Arial, sans-serif;
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 5px;
}

#copyRoomCode {
    position: absolute;
    top: 200px;
    right: 35px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #f5bf3b;
    cursor: pointer;
    font-size: 22px;
    z-index: 1000;
    transition: .2s;
    padding:0px 0px;
}



#drawingCanvas{
    position: absolute;
    left: 800px;
    top: 180px;
    width: 650px;
    height: 400px;
}

#guessInput{
    position: fixed;
    left: 480px;
    top: 200px;
    width: 300px;
}

.draw_img{
    max-width:90%;
    border:2px solid black;
    position: absolute;
    left: 800px;
    top: 160px;
    width: 650px;
    height: 400px;
}




#clearCanvas, #sendGuess, #nextDrawing{
    position: fixed;
    top: 530px;
    left: 480px;
}

#finishDrawing{
    position: fixed;
    top: 530px;
    left: 620px;
}





.begriff_header{
    left: 495px;
    top: 130px;
    position: absolute;
    color: #000;
    font-size: 30px;
}

.begriff_header_2{
    right: 470px;
    top: 130px;
    position: absolute;
    color: #000;
    font-size: 30px;
}

.begriff_text{
    left: 495px;
    top: 170px;
    position: absolute;
    color: #000;
    font-size: 20px;
}




#indexBtn{
    margin-top: 20px;
    padding: 16px 120px;
    border: none;
    border-radius: 12px;
    background: #f5bf3b;
    color: #111;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
}

#indexBtn:hover{
    transform: scale(1.05);
}





#colorPicker{
    margin: 14px 0;
    top: 520px;
    right: 470px;
    position: fixed;
    z-index: 1;
}

.colorBtn{
    width:40px;
    height:40px;
    border-radius:50%;
    border:3px solid #000;
    margin:0 5px;
    cursor:pointer;
    padding:0;
}

#toolPicker{
    position:fixed;
    top: 500px;
    right: 950px;
    z-index:10;

}

#penTool,
#eraserTool{
    width:55px;
    height:55px;
    padding:0;
    font-size:28px;
}

.toolActive{
    background:#4caf50 !important;
    color:white !important;
    border:3px solid white !important;
}






#correctGuessersBox{
    position: fixed;
    right: 10px;
    background: #fff;
    color: #000;
    padding: 10px;
    border: #111011 solid 5px;
    border-radius: 14px;
}

/* =========================================
   footer
========================================= */

footer {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;    
}

.footer-right {
    position: fixed;
    /* text-align: right; */
    color: white;
    right: 20px;
    bottom: 20px;
    background-color: #000000b5;
    padding: 10px;
    border-radius: 10px;
}

#legal_Text {
    font-family: "Economica-Bold", Arial, sans-serif;
    font-size: 17px;
    color: #f5f7f7;
    font-weight: 900;
}

#soundvolume {
    font-family: "Economica-Bold", Arial, sans-serif;
    padding: 16px 16px;
    border: none;
    border-radius: 12px;
    background: #f5bf3b;
    color: #111;
    font-size: 30px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.2s;
}

#soundvolume:hover {
    transform: scale(1.05);
}

/* =========================================
   Index Version History
========================================= */

#versionHeader{
    cursor:pointer;
    font-size:18px;
    font-weight:bold;
    margin-top: 5px;
    font-family: "Economica-Bold", Arial, sans-serif;
}

#versionToggle{
    margin-left:10px;
    cursor:pointer;
    background:#2a1d0e;
    border:2px solid #c28c35;
    color:white;
    border-radius:6px;
    padding:2px 8px;
    font-size:14px;
    transition:.2s;
}

#versionToggle:hover{
    transform:scale(1.05);
}

#versionHistory{
    display:none;
    margin-top:15px;
}

/* =========================================
   HOST GETRENNT FENSTER
========================================= */

#hostDisconnectOverlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.55);

    display:flex;

    justify-content:center;
    align-items:center;

    z-index:999999;
}

#hostDisconnectBox{

    width:560px;

    background:#efefef;

    border-radius:30px;

    padding:40px;

    text-align:center;

    box-shadow:
        0 10px 0 rgba(0,0,0,.25);
}

#hostDisconnectImage{
    width:140px;
    display:block;
    margin:0 auto 20px auto;
    user-select:none;
    border: none;
    background: transparent;
}

#hostDisconnectBox h1{

    color:#333;

    font-size:35px;

    margin-bottom:15px;
}

#hostDisconnectBox p{

    color:#555;

    font-size:20px;

    margin-bottom:35px;
}

#hostDisconnectButton{

    width:100%;

    padding:20px;

    border:none;

    border-radius:18px;

    background:#4a57ff;

    color:white;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:
        0 5px 0 rgba(0,0,0,.25);
}

#hostDisconnectButton:hover{

    transform:translateY(1px);
}

/* =========================================
   Uhr
========================================= */

#analogClock{
    position:fixed;
    top: 20px;
    left: 265px;
    z-index:999;
}

.clock-face{
    width:140px;
    height:140px;
    border:6px solid #111;
    border-radius:50%;
    background:#ece1d4;
    position:relative;
    box-shadow:0 4px 15px rgba(0,0,0,.4);
}

.number{
    position:absolute;
    font-size:16px;
    font-weight:bold;
    color:#111;
}

.n12{top:5px;left:50%;transform:translateX(-50%);}
.n1{top:15px;right:32px;}
.n2{top:32px;right:14px;}
.n3{top:50%;right:5px;transform:translateY(-50%);}
.n4{bottom:32px;right:14px;}
.n5{bottom:15px;right:32px;}
.n6{bottom:5px;left:50%;transform:translateX(-50%);}
.n7{bottom:15px;left:32px;}
.n8{bottom:32px;left:14px;}
.n9{top:50%;left:5px;transform:translateY(-50%);}
.n10{top:32px;left:10px;}
.n11{top:15px;left:28px;}

#hourHand{
    position:absolute;
    width:5px;
    height:35px;
    background:black;
    left:50%;
    bottom:50%;
    transform-origin:bottom center;
    margin-left:-2.5px;
    border-radius:4px;
}

#minuteHand{
    position:absolute;
    width:3px;
    height:50px;
    background:black;
    left:50%;
    bottom:50%;
    transform-origin:bottom center;
    margin-left:-1.5px;
    border-radius:4px;
}

#secondHand{
    display: none;
    position:absolute;
    width:2px;
    height:58px;
    background:red;
    left:50%;
    bottom:50%;
    transform-origin:bottom center;
    margin-left:-1px;
}

.clock-center{
    position:absolute;
    width:10px;
    height:10px;
    background:black;
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}








#wordChoiceContainer{

    position:fixed;

    top:40%;
    left:50%;

    transform:
        translate(
            -50%,
            -50%
        );

    display:flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:0px;

}

.wordChoice{

    width:350px;

    padding:20px;

    font-size:28px;

    background:#2c7be5;

    color:white;

    border:none;

    border-radius:12px;

    cursor:pointer;

    transition:.2s;

}

.wordChoice:hover{

    transform:scale(1.05);

}


/* =========================================
   1280x720 Layout
========================================= */

@media (max-width: 1366px){
    
    /* =========================================
       Join-Screen
    ========================================= */

    #logo{
        width:300px;
        margin-top:-25px;
        margin-bottom:15px;
    }
    
    #indexBtn {
        margin-top: 20px;
        padding: 10px 50px;
        font-size: 18px;
    }
    
    #hostName{
        width:420px;
        height:40px;
        font-size:15px;
        margin-bottom:15px;
    }
    
    #createRoom{
        font-size: 15px;
        padding: 10px 20px;
    }
    
    #whiteboard h2{
        font-size: 18px;
    }
    
    #players li{
        margin: 7px auto;
        padding: 8px;
        font-size: 15px;
    }
    
    #createRoom, #startGame, #joinRoom, #nextDrawing {
        top: 392px !important;
        right: 300px !important;
        font-size: 15px !important;
        padding: 10px 19px !important;
    }
    
    #roomCodeClipboard {
        top: 12px;
        width: 160px;
    }
    
    #roomCodeText {        
        top: 80px;
        left: 52%;
        font-size: 30px;
    }
    
    #copyRoomCode {
        top: 135px;
        right: 13px;
        width: 35px;
        height: 35px;
    }
    
    input {
        width: 282px;
        font-size: 15px;
        margin-left: 29px;
        padding: 10px;
    }
    
    #roomCode, #playerName{
        margin-top: 140px !important;
    }
    
    /* =========================================
       Spiel
    ========================================= */
    
    .begriff_header {        
        left: 26%;
        font-size: 26px;
        top: 135px;
    }
    
    .begriff_text {     
        left: 26%;
        font-size: 18px;
        top: 165px;
    }
        
    
    #wordChoiceContainer {
        top: 44%;
    }
    
    .wordChoice {
        width: 310px;
        padding: 10px;
        font-size: 16px;
        margin-top: -20px;
    }
    
    #drawingCanvas{
        width: 455px;
        height: 260px;
        left: 518px;
        top: 180px;
    }
    
    #clearCanvas{
        top: 400px;
        left: 318px;
        padding: 10px 15px;
        font-size: 14px;
    }
    
    #finishDrawing{
        top: 400px;
        left: 410px;
        padding: 10px 25px;
        font-size: 14px;
    }
    
    #colorPicker {
        top: 390px;
        right: 313px;
    }
    
    .colorBtn {
        width: 30px;
        height: 30px;        
        border: 2px solid #000;
        margin: 0 2px;
    }
    
    #toolPicker {  
        top: 385px;
        right: 635px;
    }
    
    #penTool, #eraserTool {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    
    
    
    .begriff_header_2 {
        right: 309px;
        top: 136px;  
        font-size: 20px; 
    }

    .draw_img{
        width: 455px;
        height: 260px;
        left: 518px;
        top: 165px;
    }
    
    #guessInput {
        left: 300px;
        top: 200px;
        width: 180px;
    }
    
    #sendGuess{
        top: 400px;
        left: 318px;
        padding: 10px 35px;
        font-size: 15px;
    }
    
    /* =========================================
       Clock
    ========================================= */
    
    #analogClock {
        top: 60px;
        left: 170px;
    }
    
    .clock-face{
        width:110px;
        height:110px;
        border:5px solid #111;
    }

    .number{
        font-size:12px;
    }

    .n12{top:4px;}
    .n1{top:12px;right:25px;}
    .n2{top:25px;right:10px;}
    .n3{right:4px;}
    .n4{bottom:25px;right:10px;}
    .n5{bottom:12px;right:25px;}
    .n6{bottom:4px;}
    .n7{bottom:12px;left:25px;}
    .n8{bottom:25px;left:10px;}
    .n9{left:4px;}
    .n10{top:25px;left:8px;}
    .n11{top:12px;left:22px;}

    #hourHand{
        width:4px;
        height:28px;
        margin-left:-2px;
    }

    #minuteHand{
        height:40px;
    }

    #secondHand{
        height:46px;
    }

    .clock-center{
        width:8px;
        height:8px;
    }
    
    
    /* =========================================
       Footer
    ========================================= */

    footer{
        left:12px;
        bottom:12px;
    }

    .footer-right{
        right:12px;
        bottom:12px;
        padding:8px 12px;
        border-radius:8px;
        font-size: 14px;
    }

    #legal_Text{
        font-size:14px;
    }

    #versionHeader{
        font-size:15px;
    }

    #versionToggle{
        font-size:12px;
        padding:2px 6px;
        margin-left:6px;
    }

    #soundvolume{
        font-size:22px;
        padding:12px;
    }
}