*{
    scrollbar-width: thin;
    font-family:'Old Standard TT', Times, serif,monospace;
    margin: 0px;
    box-sizing: border-box;
}

.flex-container{
  /*border:2px solid red;*/
  overflow:auto;
  height: 80vh;
  padding: .5rem; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

body {
    width: 100vw;
    height: 100vh;
    background-image: url("img/background.png");
    background-repeat: no-repeat;
    background-size:cover;
}

.other {
text-align: center;
/*padding:8px;*/
/*padding: 15px;
margin: 10px;*/
border-radius: 15px;
font-size: 16px;  
/*border:2px solid red;*/
}

footer{
    position:fixed;          /* hors du flux, fixé au viewport */
    left:0;
    right:0;
    bottom:0;                /* colle au bas */
    color:#fff;
    text-align:center;
    /*padding:0.8rem 1rem;*/
    z-index:1000;            /* au-dessus du reste du contenu */
    font-size: 10px;
    font-family: 'Kode Mono', monospace;
}

.box {
display: flex;
flex: 1 0 300px;
border-radius:6px;
max-width: 380px;
max-height: 300px;
border: 1px solid aliceblue;
padding: 10px;
margin: 20px;
text-align: center;
background-color: #9ba5c9;
/*filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4));*/
}

.text {
font-size: 20px;
text-align: center;
padding-left: 20px;
color:#303655;
}

img {
max-width: 100%;
max-height: 300px;
border-radius:6px;
}

h1 {
text-align: center;
font-size: 20px;
margin-bottom: 10px;
background-color: aliceblue;
border-radius: 6px;
padding:8px;
display: inline-block;
color:#303655;
filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
margin-top:20px;
color:#303655;
}

h2 {
font-style: italic;
text-align: center;
margin: 1px;
font-size: 22px;
margin-bottom: 10px;
color:#303655;
}

h3 { 
margin: 1px;
text-align: center;
font-size: 12px;
margin-bottom: 10px;
color:#303655;
}

h4 {
font-style: italic;
text-align: center;
margin-top: 1px;
font-size: 10px;
margin-bottom: 10px;
color:#303655;
}

.button {
/*background:url('img/review.png') no-repeat;*/
cursor:pointer;
border:none;
margin: 0;
background-color: aliceblue;
border-radius: 6px;
padding:5px;
color:#303655;
}

.button:hover{
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.575));
}

a:link, a:visited {
color: #303655;
text-decoration: none;
}

a:hover {
filter: drop-shadow(0 2px 2px rgb(255, 255, 255));
}

.diffa{
  color:aliceblue;
}

.diffa:link{
  color:aliceblue;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
position: relative;
background-color: #9ba5c9;
margin: 0 auto;
padding: 20px;
text-align: left;
text-indent: 30px;
border: 1px solid aliceblue;
border-radius: 6px;
width: 50%; /* Could be more or less, depending on screen size */
max-height: 70%;
font-size: 17px;  
overflow-y: auto;
}

/* The Close Button */
.close {
color: aliceblue;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.spoiler {
  background: #333333;
  color: transparent;
text-decoration: none;
}

.spoiler:hover {
  background: transparent;
  color: black;
text-decoration: none;
}

.blog-img, .home-img, .page-img, .about-img, .lolcow{
    height:20px;
    margin:0;
    padding:0;
    justify-content: space-between;
    vertical-align: bottom;
}

#bio p{
  display:inline-block;
  background-color: aliceblue;
  border-radius: 6px;
  padding:5px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4));
}