/*  http://tcs.sgdsn.gouv.fr/assets/styles/style.css */

@font-face {
    font-family: 'Marechal Juin';
    src: url('../fonts/marechal-juin.eot');                                    /* IE9 */
    src: url('../fonts/marechal-juin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/marechal-juin.woff')       format('woff'),              /* Most Browsers */
         url('../fonts/marechal-juin.ttf')        format('truetype')           /* Safari, Android, iOS */
}



@font-face {
    font-family: 'VictorMono-SemiBold';
    src: url('../fonts/VictorMono-SemiBold.eot');                                    /* IE9 */
    src: url('../fonts/VictorMono-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/VictorMono-SemiBold.woff')       format('woff'),              /* Most Browsers */
         url('../fonts/VictorMono-SemiBold.ttf')        format('truetype')           /* Safari, Android, iOS */
}



html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;

    /* Default text style (naturally inherited by all tags). */
    font-family: 'Marechal Juin';
    font-size: 100%; /* TODO?: Set an actual size (e.g. 2vw). */
    line-height: 1.15;
    color: #FEFEFE;
    text-align: center;
}

* {
    font-family: 'Marechal Juin';
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;

    display: flex; /* Needed by IE to make the min-height of its child (#overflow-wrapper) work. */
}

div {
    margin: 0;
    padding: 0;
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
}

/* Prevent the button fron shifting during click in IE. */
button:active *, button:focus * {
    position: relative;
    top: 0;
    left: 0;
}

/* Remove the blue outline (in Chrome at least) of buttons with focus. */
button:focus {
    outline: none;
}

/* overflow-x on body doesn't work on mobile, so we use this wrapper div. */
#overflow-wrapper {
    width: 100%;
    min-height: 100%;

    overflow-x: hidden;
    overflow-y: hidden;
}

#main-wrapper {
    min-height: 100%;

    display: flex;
    flex-flow: row nowrap;

    transition: transform 0.5s ease-in-out 0s;
}

.screen-wrapper {
    flex: 0 0 100%;

    width: 100%;
     /* For some reasons I cannot figure out, "min-height: 100%;" does not work. */
    min-height: 100vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;

    background-color: #1B223E;
    background: url('../images/wallpaper.jpg') repeat;
    background-size: cover;
}

.screen-wrapper>div {
    /* TODO? */
}

#start-screen {
    justify-content: center;
}

h1 {
    max-width: 60vw; /* TODO. */
    margin: auto;
    margin-bottom: 2vh;

    font-size: calc(9.6px + 2.21vw);
    line-height: 1.25;
    font-weight: normal;
    text-transform: uppercase;
}

#end-screen h1 {
    max-width: 525px;  /* TODO. */
    margin-top: 5vh;
    font-size: calc(9.6px + 1.79vw);
}

.french-flag {
    width: 20vw;      /* TODO. */
    max-width: 200px; /* TODO. */
    min-width: 100px; /* TODO. */
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
}

.french-flag div {
    flex: 1 1 0px;
    border-width: 1px;
    border-style: solid;
}

.french-flag-blue {
    border-color: #374C86;
}

.french-flag-white {
    border-color: #FEFEFE;
}

.french-flag-red {
    border-color: #A60D16;
}

.test-description {
    width: 33vw;
    margin: auto;
    margin-top: 6vh;
    font-size: calc(9.6px + 0.54vw);
}

.privacy-disclaimer {
    width: 33vw;
    margin: auto;
    margin-top: 5vh;
    font-size: calc(9.6px + 0.23vw);
}

#start-button {
    margin-top: 8vh;
    transform: scale(1, 1);
}

.logo-picture {
    position: absolute;
    left: 3vw;
    bottom: 3vh;
    /*width: 7vw;*/
    height: 9.5vh;
    -ms-interpolation-mode: bicubic; /* Less terrible image resizing in IE? */
}

h2 {
    max-width: 72%; /* TODO (ou juste width tout court?). */
    margin: auto;
    margin-top: 7.5vh; 
    margin-bottom: 1vh;

    font-size: calc(9.6px + 1.17vw);
    font-weight: normal;

    transition: margin-top 0.5s ease-in-out 0s;
}

.correction h2 {
    margin-top: 5vh;
}

#end-screen h2 {
    margin-top: 6vh;
    font-size: calc(9.6px + 1.32vw);
}

.separator-red {
    width: 7vw;      /* TODO. */
    max-width: 70px; /* TODO. */
    min-width: 35px; /* TODO. */
    margin: 0 auto;
    margin-bottom: calc(3vh + 2px); /* We want 3vh of margin but we have to take into account the 2*1px border. */
    border: 1px solid #A60D16; /* We set the whole border to 1px to get a 2px line. */
}

.separator-lime {
    width: 7vw;      /* TODO. */
    max-width: 70px; /* TODO. */
    min-width: 35px; /* TODO. */
    margin: 0 auto;
    margin-bottom: calc(3vh + 2px); /* We want 3vh of margin but we have to take into account the 2*1px border. */
    border: 1px solid green; /* We set the whole border to 1px to get a 2px line. */
}

#end-screen .separator-red {
    margin-bottom: calc(1vh + 2px); /* We want 1vh of margin but we have to take into account the 2*1px border. */
}

.content-with-image-wrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

.answers-container {
    flex: 1;
    align-self: center; /* Center vertically the content of this container. */
}

.image-container {
    flex: 1;
    align-self: center; /* Center vertically the content of this container. */
}

.image-container img {
    width: 35vw;
}

.answers {
    display: inline-flex;
    flex-flow: column nowrap;
    max-width: 65%; /* TODO. */
    margin: 0;
    padding: 0;

    list-style: upper-alpha inside;
}

.content-with-image-wrapper .answers {
    max-width: 100%;
}

.answers button {
    min-width: 30vw; /* TODO. */
    margin-bottom: 3vh;
    padding: 12px 40px 12px 40px;
    /* border: 1px solid #364A88; */
    /* background-color: #364A88; */

    font-family: 'Marechal Juin';
    font-size: calc(9.6px + 0.54vw);
    color: #FEFEFE;
    line-height: 1.5;

    transform: scale(1, 1); /* Needed so we can animate it down to scale(1, 0) when we hide the button. */
    transition: font-size 0.5s ease-in-out 0s, visibility 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s, background-color 0.5s ease-in-out 0s, color 0.5s ease-in-out 0s, margin 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s, border 0.5s ease-in-out 0s;
}

.answers button:hover {
    border-color: #FEFEFE;
}

.answers button.right-answer {
    cursor: default;
    background-color: #006837;
    border-color: #006837;
}

.answers button.wrong-answer {
    cursor: default;
    background-color: #B92F4A;
    border-color: #B92F4A;
}

.answers button.hidden-answer {
    cursor: default;
    visibility: hidden;
    margin-bottom: 0vh; /* We must specify the unit so IE does not get confused. */
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
    border-bottom: 0;
    /*
     * We use 'font-size: 0;' & 'transform: scale(1, 0);' instead of 'height: 0;' because
     * we would need to specify a fixed height to '.answers button' to animate it. 
     */
    font-size: 0;
    transform: scale(1, 0);
}

.content-with-image-wrapper .answers button {
    margin-bottom: 2vh;
    font-size: calc(9.6px + 0.33vw);
}

.right-answer-text {
    display: block;
    width: 33vw;
    margin: auto;
    margin-bottom: 0.5em;

    font-size: calc(9.6px + 0.54vw);
    text-transform: uppercase;
}

.explanation {
    display: block;
    width: 33vw;
    margin: auto;
    
    font-size: calc(9.6px + 0.54vw);
}

.content-with-image-wrapper .right-answer-text, .content-with-image-wrapper .explanation {
    font-size: calc(9.6px + 0.33vw);
}

.explanation p {
    margin: 0;
    margin-top: 0.5em;
}

.result {
    font-size: calc(9.6px + 4.44vw);
}

.result-description {
    width: 33vw;
    margin: auto;
    margin-top: 4vh;
    font-size: calc(9.6px + 0.54vw);
}

.next-button, #sgdsn-button, #restart-link {
    display: block;
    margin: auto;
    padding: 10px 40px;
    border: 1px solid #FEFEFE;
    background: transparent;

    font-family: 'Marechal Juin';
    font-size: calc(9.6px + 0.54vw);
    color: #FEFEFE;
    text-transform: uppercase;
    line-height: 2;
    vertical-align: middle;
}

.next-button:hover, #sgdsn-button:hover, #restart-link:hover {
    background-color: #FEFEFE;
    color: #203555;
}

.next-button, .next-button:hover, #sgdsn-button, #sgdsn-button:hover, #restart-link, #restart-link:hover {
    transition: background-color 0.5s ease-in-out 0s, color 0.5s ease-in-out 0s;
}

.right-answer-text, .explanation, .next-button {
    transform: scale(1, 0);
}

.correction .right-answer-text, .correction .explanation, .correction .next-button {
    transform: scale(1, 1);
    animation: correction-anim 1s ease-in-out;
}

@keyframes correction-anim {
    0% {
        transform: scale(1, 0);
    }
    50% {
        transform: scale(1, 0);
    }
    100% {
        transform: scale(1, 1);
    }
}

#end-screen-buttons {
    margin: 0;
    flex: 1; /* Take all the remaining space */

    display: flex;
    flex-direction: column;
    justify-content: center;
}

#restart-link {
    margin-top: 4vh;
    padding: 5px 20px;
    font-size: calc(9.6px + 0.23vw);
}

.question-number {
    margin: 3vh 0;
    font-size: calc(9.6px + 0.54vw);
}





@media (max-width: 1024px) {
    .test-description, .privacy-disclaimer, .right-answer-text, .explanation, .result-description {
        width: 50vw;
    }

    .answers button {
        padding: 12px 30px 12px 30px;
    }
}

@media (max-width: 720px) {
    .test-description, .privacy-disclaimer, .right-answer-text, .explanation, .result-description {
        width: 66vw;
    }

    .answers button {
        padding: 12px 20px 12px 20px;
    }
}

@media (max-width: 500px) {
    .screen-wrapper {
        width: 50vw; /* WTF ????? */
    }

    .screen-wrapper>div {
        /*width: 100vw;*/
    }
}

@media (max-width: 480px) {
    .test-description, .privacy-disclaimer, .right-answer-text, .explanation, .result-description {
        width: 80vw;
    }

    .answers {
        max-width: 90%;
    }

    .answers button {
        padding: 12px 12px 12px 12px;
    }
}

@media (max-height: 500px) {
    #overflow-wrapper {
        overflow-y: visible;
    }
}


.button_custom {
    background-color: #013301;
    border: 1px solid green;
    color:  #bbb;
}

.button_custom:hover {
    background-color: darkgreen;
    color:  white;
}

.button_custom-question {
    padding: 12px 12px 12px 12px;
    margin:  12px 12px 12px 12px;
    font-size: 16px;
    min-width: 240px;
}

.button-custom-start {
    max-width: 200px;
}





/*

Added

*/


.screen-wrapper {
    flex: 0 0 100%;

    min-width: 100%;
     /* For some reasons I cannot figure out, "min-height: 100%;" does not work. */
    min-height: 100vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;

    background-color: #1B223E;
    background: url('../images/wallpaper.jpg') repeat;
    background-size: cover;
}



code {
    color: #bfb;
    font-family: 'VictorMono-SemiBold';
    font-size: calc(15px + 0.33vw);
}


lil_code {
    color: #bbb;
    font-family: 'VictorMono-SemiBold';
    font-size: calc(17px + 0.33vw);
}

.button_custom-question {
    font-size: calc(14px + 0.33vw); wx
    word-wrap: break-word;
    min-height: 20px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    left: 0px;
    display: block; /* Fix for IE7 */
}

yellow {
    color: yellow;
}

