/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 22 janv. 2021, 18:02:44
    Author     : charlotte
*/


body {  
    font-size:1rem;
    font-family: 'Roboto', serif;
    background-color: #f2f2f;
}


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

img {
    border-radius: 20px;
}

* {
  margin: 0 auto;
  padding: 0;
  max-width: 100%; 
}

.header_fond {
    display:block;
    position:relative;
    width:100%;
    height:10rem;
    border-bottom: lightblue;
    border-bottom-style: solid;
    border-width: thin;
}

.header_arbo {
    text-decoration:none;
    height:2rem;
    text-transform:uppercase;
    padding:0 1rem;
    float:left;
}

.header_logo {
    height:5rem;
    background-size: cover;
    color: white;
    text-align: center;
    line-height: 5rem;
    text-transform: uppercase;
    font-size: 2rem;
}
@media (max-width: 35em) {
  .header_logo {
    line-height: 2.8rem;
  }
}

.header_contact {
    display:block;
    float:left;
    text-decoration:none;
    text-transform:uppercase;
    padding:0 1rem;
    right:0;
    text-align: right;
}

.portrait {
    width: 90%;
    line-height: 1.2rem;
    font-style: italic;
}



.contact {
	/*centering*/
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag; 
        height:2rem;
        text-transform:uppercase;
        padding:0 1rem;
    
    	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 60px;
	background-color: white;
	/*position: relative;*/
}

#result {
    font-family:"Din";
    font-size:16px;
    text-align:center;
    padding: 5px;
    padding-top:2px;
    padding-bottom:2px;
    
    background:white;
    border:1px solid #ddd;
    -ie-border-radius:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:5px;
    
    color:darkgrey;
    
    position:absolute;
    top:90px;
    width:50%;
    left:50%;
}
#result.wrong{color:darkred;}
#result.good{color:darkgreen;}