@charset "utf-8";
/* Purple - #4B384C; */
/* Beige - #E7B78A */
/* Burn Yellow - #FFB81C */
/* Wine - #612141 */
/************* FONTS *********************/
 body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    font-size:1.3em;
    font-family: "Georgia",serif;
  }
  main{
    padding:3em;
  }
  *{
  box-sizing: border-box;
  position: relative;
  }
  #validation{
    background-color: red;
    color:white;
  }
  #validation main{
    padding:3em 3em 0;
    text-align: center;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:60vh;
  }
  .link{
  font-size: .6em;
  }
  ul,li{
    list-style: none;
    display:flex;
    margin:0;
    padding: 0;
  }
  h1,h2,h3,h4,h5,h6{
    margin:0;
    padding:0;
  }
  ul.quotes{
    
  }
  ul.quotes > li{
    display: flex;
    flex-direction:column;
    width:34%;
    background-color: #fefefe;
    padding:1em;
  }
  .validator ul{
    justify-content: center;
    gap:1em;
  }
  .validator li{
    text-align: left;
    width:39%;
    padding:0;
    flex-direction: column;
    justify-content: center;
  }
 

  #footer{

    font-family:"Helvetica",sans-serif;
    font-size:.7em;
    text-align:center;
    padding:2em;
    width:100%;
  }
  #footer ul{
    display:flex;
    gap:1em;
    justify-content:center;
    text-transform: uppercase;
  }
  form{
    margin:3em 0 0 0;
  }
  label{
    width:100%;
    padding:1em;
    cursor:pointer;
    border:1px solid white;
    border-radius:.3em;
    
  }
  label:hover,label.checked{
    background-color: white;
    color:red;
  }
  li input{
    display:none
  }
 
  button{
    margin: 3em auto;
    padding:1em 3em;
    cursor:pointer;
    transition: all .3s ease-in-out;
    border:1px solid white;
    background-color: red;
    color:white;
    border-radius:3em;
  }
  button:hover{
    padding:1em 4em;
    background-color: white;
    color:red;
  }
  
  
  ul.quotes {
    gap:2em;
  }
  #unfit{
    display:flex;
    flex-direction:column;
  }
  #unfit div{
    margin-top:3em;
  }
  .icon{
    max-width:180px;
    margin: 0 auto 2em;
    fill:white;
  }
  .logo{
    max-width:380px;
    margin: 0 auto 2em;
    fill:white;
  }
  @media screen and (max-width: 780px) {
   body{
   font-size:1.6em;
   }
   main{
   padding:1em;
   width:100%;
   }
   ul.quotes {
     flex-direction:column;
   }
   .validator ul{
      flex-direction:column; 
      align-items: center;
   }
   .validator li{
    text-align: center;
    width:59%;
   }
   #footer ul{
     flex-direction:column;
     align-items: center;
   
   }
  
  
}
/************* MEDIA QUERIES *********************/
@media print {
	*{
		color:black;
		background: none;
	}
}