/**
Thème MAZCTF basé sur l'univers des films OSS 117
**/

/**
Structuration
**/
body {
    font-size: 16px;
    font-size: 2rem;
    font-family: Helvetica;
    font-weight: 500;
    height: 100%;
    margin: 0;
    color: #FFF;
  }
  
  header {
    margin-top: 5px;
    position: absolute;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  
  /**
  Les titres
  **/
  h1 {
    position: relative;
    text-align: left;
    text-shadow: 2px 2px #000;
    font-size: 250%;
  }
  
  blockquote {
    border: none;
    margin-bottom: 1rem;
    font-size: 2.25rem;
    min-height: 100px;
    text-shadow: 2px 2px #000;
  }
  
  input[type="text"] {
    color: black;
  }
  
  button, input[type="submit"], input[type="reset"] {
    color: black;
    border: none;
    padding: 2;
    font: inherit;
    cursor: pointer;
    outline: inherit !important;
  
    border: none;
    text-decoration: none;
    background: #9bdeee;
    color: black;
    box-shadow: 0 1px 0 white;
  }
  
  footer {
    text-align: center;
    background-color: #f68122;
    border-radius: 15px 50px 30px;
    padding-top: 10px;
  }
  
  footer a {
    color: white;
  }
  
  #app {
    width: 900px;
    max-width: 100%;
    margin: auto;
    padding-top: 60px;
  }
  
  #contexte {
    position: relative;
    color: white;
  }
  
  #challenge{
    background-color: white;
    color: black;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 1%;
    border-radius: 20px;
    border: 7px solid #9bdeee;
  }
  
  #side-image{
    z-index: -1;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 600px;
    width: 460px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../img/oss-1.jpg");
    background-position:top;
  }
  
  .center{
    text-align: center;
  }
  
  .success{
    color: green;
  }
  
  .error{
    color: #A00;
  }
  
  .question {
    margin-top: 20px;
    text-align: right;
    color: #D9E8F5;
    display: block;
  }
  
  .question::before {
    content: "\2014 \00A0";
  }
  
  .bulle {
    z-index: -1;
    width: 200px;
    height: 200px;
    background-color: #F68121;
    border-radius: 100%;
    position: absolute;
    top: 50px;
    opacity: 0.6;
  }
  
  img.ombre{
    box-shadow: 1px 1px 12px #555;
  }
  
  .main-wrapper {
    min-height: 100vh;
  }
  
  .container-row {
    display: flex;
    flex-direction: row;
  }
  
  .container-column {
    display: flex;
    flex-direction: column;
  }
  
  /**
  Thèmes spécifiques
  **/
  body.caire {
    background: #FF5D0C;
  }
  
  body.rio {
    background: #FFF;
    color: #FF5D0C;
  }
  
  body.black {
    background: #000;
  }
  
  body.jack {
    height: 100%;
    height: 100vh;
    margin: 0;
    background-image: url("../img/t-mauvais-jack.jpg");
    background-repeat: repeat;
    background-position: center;
  }
  
  .rio #img-container img {
    color: #FFF;
  }
  
  .rio .bulle {
    background-color: #A2DEF8;
  }
  
  .rio .bulle, .caire .bulle {
    opacity: 1
  }