#but,
#but2,
#cont,
#form {
    display: none;
}

header {
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 50px;
}

#form {
    margin-top: 30px;
}

button.subrep {
    margin-bottom: 30px;
}

div.img-top {
    height: 45px;
    width: 297px;
    background-image: url("https://charte.radiofrance.fr/images/radiofrance/radio-france.svg");
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-size: 297px 45px;
    margin-bottom: 20px;
}

h1 {
    margin-top: 0px;
    color: #161616;
    font-size: 35px;
    margin-bottom: 0px;
    font-family: Montserrat Subrayada;
    font-weight: normal;
}

h2 {
    margin: 10px;
    font-size: 25px;
}

body {
    text-align: center;
    color: #353535;
    background-color: #E1E1E1;
    font-size: 20px;
    font-family: Montserrat Medium;
}

footer {
    font-size: 10px;
    color: #545454;
    margin-top: 40px;
    font-family: Montserrat Regular;
}

button {
    background-color: rgb(43, 0, 231);
    color: #E1E1E1;
    border-radius: 2px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: Montserrat SemiBold;
    border: none;
    font-size: 18px;
    margin: 10px;
    transition: 0.2s;
}

#submit:hover,
#submit:focus,
#but:hover,
#but:focus,
#but2:hover,
#but2:focus,
button.timeset:focus,
button.timeset:hover,
#blivevid:hover,
#blivevid:focus {
    background-color: #1A008D;
    cursor: pointer;
}

#advsubmit:hover,
#advsubmit:focus {
    cursor: pointer;
}

label {
    font-size: 16px;
}

#arrow {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #E1E1E1;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.4em;
    margin-right: 0.4em;
    transform: rotate(270deg);
    transition: transform 0.4s ease;
}

#advvv {
    transform: scaleY(0);
    transition: transform 0.4s ease-out;
    clear: both;
    transform-origin: top;
    margin-left: auto;
    margin-right: auto;
}

div.hours {
    color: #494949;
    float: right;
    height: 42px;
    vertical-align: middle;
    font-size: 35px;
    margin-right: 20px;
    margin-top: 16px;
    width: 200px;
}

input.vol {
    float: right;
    height: 42px;
    vertical-align: middle;
    margin-top: 16px;
    margin-right: 20px;
    width: 195px;
}

button.timeset {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 15px;
    clear: both;
    width: 80px;
}

button.play {
    background-size: 48px 48px;
    border-top: 0.5em solid rgba(43, 0, 231, .2);
    border-left: 0.5em solid rgba(43, 0, 231, .2);
    border-bottom: 0.5em solid rgba(43, 0, 231, .2);
    border-right: 0.5em solid rgb(43, 0, 231);
    background-color: transparent;
    padding: 0px;
    height: 48px;
    width: 48px;
    border-radius: 25px;
    float: left;
    margin-left: 20px;
    margin-bottom: 0px;
    animation: rotate 1.1s infinite linear;
    transition: none;
}

#playdiv {
    display: none;
}

div.divpause {
    width: 0px;
    height: 15px;
    margin: auto;
    border-left: 8px solid white;
    border-right: 8px solid white;
    display: inline-block;
    padding: 2.5px;
    border-top: none;
    border-bottom: none;
    background-color: transparent;
}

div.divplay {
    display: inline-block;
    background-color: white;
    margin: auto;
    width: 0px;
    height: 0px;
    border-top: 10px solid rgb(43, 0, 231);
    border-bottom: 10px solid rgb(43, 0, 231);
    border-left: 15px solid white;
    border-right: none;
    padding: 0px;
}

button.play:hover,
button.play:focus,
button.mute:hover,
button.mute:focus {
    cursor: pointer;
}

button.mute {
    background-image: url("https://www.francetvinfo.fr/skin/dist/www/img/player-franceinfo/mute-2a46b895c3.png");
    border: none;
    clear: both;
    border-radius: 25px;
    height: 48px;
    width: 48px;
    padding: 0px;
    margin-left: 20px;
    float: left;
}

button#but {
    margin-top: 30px;
}

video {
    display: none;
}

div.preload {
    display: none;
}

a {
    text-decoration: none;
    color: #353535;
    transition: 0.2s;
}

a:hover,
a:focus {
    text-decoration: underline;
    color: #545454;
}

select.selrad {
    min-width: 15em;
    margin-bottom: 15px;
    box-sizing: border-box;
}

select {
    font-family: Arial;
    background-color: #F0F0F0;
    border: 2px solid #353535;
    color: #353535;
    border-radius: 2px;
}

#livevid {
    display: none;
}

#contanim {
    height: 0px;
    overflow: hidden;
    clear: both;
}

::selection {
    background-color: #353535;
    color: #B4B4B4;
}

input[type="number"] {
    font-family: Arial;
    background-color: #F0F0F0;
    border: 2px solid #353535;
    color: #353535;
    border-radius: 2px;
    min-width: 15em;
    box-sizing: border-box;
}

/* Animations */
@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(1turn);
    }
}

/* Polices */

/* latin-ext */
@font-face {
    font-family: 'Montserrat Regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Montserrat Regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin-ext */
@font-face {
    font-family: 'Montserrat Medium';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gfD_u50.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Montserrat Medium';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gnD_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin-ext */
@font-face {
    font-family: 'Montserrat SemiBold';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gfD_u50.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Montserrat SemiBold';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin-ext */
@font-face {
    font-family: 'Montserrat Bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gfD_u50.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Montserrat Bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin */
@font-face {
    font-family: 'Montserrat Subrayada';
    font-style: normal;
    font-weight: 400;
    src: local('MontserratSubrayada-Regular'), url(https://fonts.gstatic.com/s/montserratsubrayada/v9/U9MD6c-o9H7PgjlTHThBnNHGVUORwteQQH8MaOY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Montserrat Subrayada';
    font-style: normal;
    font-weight: 700;
    src: local('MontserratSubrayada-Bold'), url(https://fonts.gstatic.com/s/montserratsubrayada/v9/U9MM6c-o9H7PgjlTHThBnNHGVUORwteQQHe3TfMRiXk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #353535;
        color: #B4B4B4;
    }

    h1 {
        color: #D1D1D1;
    }

    footer {
        color: #969696;
    }

    div.img-top {
        background-image: url("https://charte.radiofrance.fr/images/radiofrance/radio-france-blanc.svg");
    }

    div.hours {
        color: #A4A4A4;
    }

    a {
        text-decoration: none;
        color: #B4B4B4;
    }

    a:hover,
    a:focus {
        text-decoration: underline;
        color: #969696;
    }

    ::selection {
        color: #353535;
        background-color: #E1E1E1;
    }

    select {
        background-color: #494949;
        border: 2px solid #E1E1E1;
        color: #E1E1E1;
    }

    input[type="number"] {
        background-color: #494949;
        border: 2px solid #E1E1E1;
        color: #E1E1E1;
    }
}