@font-face {
        font-family: 'AmaticSC-Regular';
        src: url('AmaticSC-Regular.ttf');
}
text{
        font-family:Helvetica, Arial, sans-serif;
        font-size:15px;
        pointer-events:none;
	font-weight: bold;
	color: #FFFFFF;
    }
    #chart99{
        position:absolute;
        width:500px;
        height:500px;
        top:0;
        left:0;
    }
    #question{
        position: absolute;
        width:400px;
        height:500px;
        top:0;
        left:520px;
    }
    #question h1{
        font-size: 20px;
        font-weight: bold;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        padding: 0;
        margin: 0;
        top:50%;
        -webkit-transform:translate(0,-50%);
                transform:translate(0,-50%);
    }

h1 {
	font-family: 'AmaticSC-Regular', sans-serif;       
	font-size:4.1em;
	position: absolute;
	color: white;
}

.dropbtn {
  font-family: 'Alegreya-Regular';
  src: url('Alegreya-Regular.ttf');
  background-color: #2b2e30;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2b2e30;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #292c2e;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

/* Styles responsives */
@media screen and (max-width: 768px) {
        .container {
                flex-direction: column !important;
                align-items: center !important;
        }

        #chart {
                width: 100% !important;
                max-width: 400px !important;
                margin: 0 auto 20px auto !important;
        }

        .roles-table {
                width: 100% !important;
                max-width: 400px !important;
                margin: 0 auto !important;
        }

        #question {
                position: relative !important;
                width: 100% !important;
                height: auto !important;
                top: auto !important;
                left: auto !important;
                margin-top: 20px !important;
        }

        #question h1 {
                position: relative !important;
                transform: none !important;
                text-align: center !important;
                padding: 10px !important;
        }

        h1 {
                position: relative !important;
                font-size: 3em !important;
                text-align: center !important;
                margin: 20px 0 !important;
        }

        .controls {
                flex-wrap: wrap !important;
        }

        .btn {
                flex: 1 1 45% !important;
                min-width: 120px !important;
        }
}

/* Ajustements pour les très petits écrans */
@media screen and (max-width: 480px) {
        body {
                padding: 10px !important;
        }

        #chart {
                max-width: 300px !important;
        }

        .roles-table {
                max-width: 300px !important;
        }

        .btn {
                font-size: 14px !important;
                padding: 8px 12px !important;
        }

        h1 {
                font-size: 2.5em !important;
        }
}