/* Nom du projet: Vigie-Sommeil
* @file <piechart.js>
* @version : <5>
* @brief <Fichier de style de l'ensemble des fichiers php et html>
* @author <BORDES Valentin> 
* @date <05/05/2024>  */

body{
    background: linear-gradient(#5F7AD5, #829BED);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.title, .piechartTitle, .label, .input, .button{
    font-family: Montserrat;
    color: white;
    text-align: center;
    position:relative;
}

.piechartTitle{
    top: 20px;
    overflow: clip;
}

.title{
    padding: 10px 0px 10px 0px;
    font-size:25px;
}

.label{
    top : 15px;
    text-align: left;
    width:90%;
    
    display: block;
    margin: auto;
}

.titleBackground, .doughnutBackground{
    width:35%;
    min-width:450px;

    border-radius:20px;
    background-color:#002060;

    margin-left:auto; 
    margin-right:auto; 
}

.nuitTitleBackground{
    width:85%;
    background: #001030;
    border-radius:20px;
    margin-left:auto; 
    margin-right:auto; 
}

.doughnutBackground{
    height: 300px;
}

.piechart{
    display: inline-block;
    position:relative;
    overflow: clip;

    left: 50%;
    transform: translate(-50%, -20px);

    width: auto;
    min-width:600px;
    height: 300px;
}

.input{
    display: block;
    margin: auto;
    padding: 10px 15px 10px 15px;
    text-align: left;
    
    width:85%;
    font-size:14px;
    background-color: #001030;
    border: none;
    border-radius:10px;
}

.button{
    display: block;
    margin: auto;
    background: linear-gradient(#F8DD36, #EBBD29);
    border: none;
    border-radius:10px;
    padding: 10px;
    font-size:16px;
}

.button:hover, .button:active{
    background: linear-gradient(#EBBD29, #D6931E);
    cursor: pointer;
}

.mobile-br{
    display: none;
}

@media only screen and (max-width:1000px) {
    .title{
        padding: 20px 0px 20px 0px;
        font-size:50px;
    }

    .piechartTitle, .label, .button{
        font-size:35px;
    }
    .titleBackground, .doughnutBackground{
        width:80%;
    }

    .doughnutBackground{
        height: 450px;
    }

    .piechart{
        top:-30px;
        min-width:875px;
        height: 450px;
    }

    .input{
        font-size:30px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .button{
        padding: 15px;
    }

    .mobile-br{
        display: block;
        font-size:5px;
        height: 0px;
        color:none;
    }
}