/* CSS file for ooops */
@import 'fonts/fonts.css';
@import 'fonts/fontawesome.css';

* {
    box-sizing: border-box; 
  }

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  font-size: calc(0.8rem + 0.5vw);
  background-color: #228bcc;
}

header, footer{
  padding: 0.7em 1.5em;
  box-shadow: 0 0 .25em rgba(0,0,0,.25);
}

header {
  background:#FFF;
  height: 15vh;
}

footer {
  background:rgba(255, 255, 255, 0.1);
  height: 15vh;
}

#main {
  display: flex;
  flex: 1;
}

.logo{

  background-image: url('logo_academ.svg');
  background-repeat: no-repeat;
  height:12vh;
}

#main > article {
  flex: 1;
  order: 1;
}
  
.content {

  box-sizing:border-box;
  left:50%;
  position:fixed;
  top:50%;
  transform:translate(-50%, -50%);
  min-width: 60vw;

}
.content .box{
  background-color:rgba(245,245,245,.4);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  padding: 6vmin;
}

.content .subbox{
  font-size:0.6em;
  text-align: right;
  color: rgb(255, 255, 255, 0.5);
}
.content .subbox a{
  text-decoration: none;
}

h1 {
  font-size: calc(1.8rem + 0.5vw);
  color : #27497C;
  font-family: "mariannebold";
  margin: 1vmin 0;
}

p {
  font-family: "roboto";
  font-weight: 300;
  margin: 0.5vmin 0;
}
.additionnal{
  font-size: calc(0.6rem + 0.5vw);;
}

strong{
  font-family: "roboto";
  font-weight: bold;
 }
 
@media (max-height: 900px){
   .box img{
      max-height:20vh;
   }
}

@media (min-width: 1200px){
   .box img{
      max-width:25vw;
   }
}