@font-face {
    font-family: 'lcddot_trregular';
    src: url('font/lcddot-webfont.eot');
    src: url('font/lcddot-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lcddot-webfont.woff2') format('woff2'),
         url('font/lcddot-webfont.woff') format('woff'),
         url('font/lcddot-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

html {
  height: 100%;
	user-select : none;
user-select : text;
user-select : all;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
text-align:center;
max-width:800px;
min-width:650px;
 user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

}
#auteur{
bottom:0px;
position:fixed;
opacity: 0.3;

}

#bouttons
{


display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
  grid-auto-rows: minmax(20px, auto);
/*
  width:100vw;
*/

}


#general
{

top:10px;
display: grid;
  grid-template-columns: auto;
  grid-gap: 10px;
  
  width:100vw;
}

#dessindiv
{
 grid-column:2 ;
  grid-row:1;
 display: flex; 
 margin:auto;

}
#idbouton
{
 grid-column:3 ;
  grid-row:1;
 display: flex; 
 margin:auto;


}

#info
{
 grid-column: 2/4 ;
  grid-row:3;
 display: flex; 
}

 
 .carte
 {
 font: 100%/100% DejaVu;
 display: flex; 
    border: 3px solid #6c6666;
            margin: auto; 
width:100px;
height:60px;
border-radius:5px;
cursor: grab;
vertical-align: middle;
box-shadow:10px 5px 5px #ac9b9b;
 }

 
.contenucarte
{
            margin: auto; 
font-size: 26px;
}
#typeexo
{
	padding-top:15px;


 grid-column:1 ;
  grid-row:1;
 
 margin:auto;
}
#redaction
{
padding-top:15px;
width:430px;
font-size: 20px;
 grid-column:4 ;
  grid-row:1;
 
 margin:auto;
}


.fraction {
    display: inline-block;
    vertical-align: middle; 
    margin: 0 0.2em 0.4ex;
    text-align: center;
}
.fraction > span {
    display: block;
  
    padding-top: 0.15em;
}
.fraction span.fdn {border-top: thin solid black;}
.fraction span.fdng {border-top: thin solid green;}
.fraction span.bar {display: none;}

.fraction > span>span {
    display: inline-flex;
  
}
.case{
display:inline-flex;

width:100px;
height:50px;
background-color:LightGray;
margin:2px;
border-radius:5px;

border-width:3px;
border-color:#1fe0;
border-style:solid;

}

.contenucartereduit
{
	         margin: auto; 
font-size: 15px;
}
 .bouton
 {
 font: 100%/100% DejaVu;
 display: flex; 
    border: 3px solid #6c6666;
            margin: auto; 
width:100px;
height:60px;
border-radius:5px;
cursor: pointer;
vertical-align: middle;
margin-bottom : 10px;

 }

 .bouton:hover
 { 
    border: 3px solid #000;
 

 }
 
 .angle
 {
background-image: url("chapeau.png");	 
 }
 
 @media (min-width: 1230px)  {
  #bouttons
{
 grid-template-columns: repeat(3, 1fr);
}
}

#calc
{
position : absolute;
bottom:0px;
left:0px;
	background-image: url("calculatrice.png");	 
	width:341px;
	height:169px;

}
#calcecritav
{
font-size: 26px;
font-family: 'lcddot_trregular';

top: 30px;
left: 50px;
position: absolute;
	
}
#calcecrit
{
font-size: 36px;
font-family: 'lcddot_trregular';
top: 100px;
left: 60px;
position: absolute;
}
#scorecadre
{
	height: auto;
}

@media (orientation: portrait) {
#typeexo
{
grid-row: 1;
grid-column: 1 / 2;
}
#redaction
{
grid-row: 2;
grid-column: 3 / 5;
}
#dessindiv
{
grid-row: 1;
grid-column: 2 / 5;
}
#idbouton
{
grid-row: 2;
grid-column: 1 / 3;
}
#calc
{
grid-row: 3;
grid-column: 1 / 4;
}
 }