@font-face { font-family:fr; src: url('FRADMCN.TTF'); }
-webkit-appearance: none;

html { width:100vw; height:100vh; overflow:hidden; background:black; padding:0; margin:0; }

body { position:fixed; padding:0; margin:0; width:100vw; height:100vh; background:black; overflow:hidden;
	font-family:fr; color:white; font-size:30px; overscroll-behavior: none;}

#appcontainer { position:absolute; height:100%; width:100%; max-width:56vh; left:50%; transform:translateX(-50%); background:black; }

#main { position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; background-image: url('back.jpg'); background-size:cover; }
#backcache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }

#standings { position:relative; width:100%; height:100px; top:0; text-align:center; font-size:30px; line-height:100px; color:rgba(255,255,255,0.7); }
#standt1 { position:absolute; width:30%; top:0; left:0; }
#standt2 { position:absolute; width:30%; top:0; right:0; }

#saison { position:relative; width:100%; height:50px; background:rgba(0,0,0,0.2); border-top:4px solid white; font-size:40px; }

#teams { position:relative; top:0; display:flex; width:100%; border-top:4px solid white; border-bottom:4px solid white; }
.team { flex:1; position:relative; }
.team img { width:100%; display:block; }
.teamcache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); }
.teamname { position:absolute; width:100%; top:0; filter:drop-shadow(0 0 5px black); }
.teamscore { position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%, -40%); font-size:90px; filter:drop-shadow(0 0 5px black); }

#newgame { position:relative; width:85%; top:120px; left:50%; transform:translateX(-50%); }

#cache { display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }

#partiepanel { display:none; position:relative; width:100%; height:50%; top:10%; text-align:center;}
#t1input { left:5%; }
#t2input { right:5%; }
.scoreinput { position:absolute; top:4px; width:40%; height:50px; line-height:50px; background:rgba(0,0,0,0.2);
	border:2px solid white; border-radius:10px; font-family:fr; color:white; font-size:40px;  }
#keypad {display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; width:90%; left:5%; top:150px; }
.key { width:30%; margin-bottom:2%;  }
.grey { border-color:grey; color:grey; }
#enter { position:relative; width:90%; left:5%; top:155px; background:rgba(255,255,255,0.2); }

#promptpanel { display:none; position:absolute; width:80%; height:50%; top:50%; left:50%; transform:translate(-50%,-50%); background:black; border:4px solid white; border-radius:20px; font-size:40px; }
#promptwinner { position:relative; width:100%; top:10%; }
#promptnon { position:absolute; bottom:10%; left:10%; color:grey; }
#promptoui { position:absolute; bottom:10%; right:10%; }

#reload { position:absolute; bottom:10px; right:10px; width:50px; }

.button { width:100px; height:50px; background:rgba(0,0,0,0.2); border:2px solid white; border-radius:10px; font-size:40px; }