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

html {scroll-behavior: smooth;}

body{
    /*height: 95vh;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #d7dcc7;
    min-height:100vh;
}

.blurbg {
    /* Taille du conteneur (ex. plein écran) */
    width: 100vw;
    height: 100vh;
    background-image: url("../img/laputab.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.castle{
    position:absolute;
    width: 100px;
    animation: float 4s linear infinite;
    right:30px;
    top:30px;
    z-index:1000;
}

.subtitle{
    width:100%; 
    flex-shrink:0;
    margin-top:10px;
    margin-bottom:10px;
    font-size: medium;
    font-weight: bold;
    text-decoration: underline double white 2px;
}

.gallery{
    width:120px;
    height:65px;
    margin:5px;
    margin-bottom:3px;
    justify-content: space-around;
    border-radius:6px;
    transition: .2s ease;
}

.gallery:hover {
    transform: scale(2);
}

.quote{
    text-align: center;
    font-style:italic;
    font-family:'Old Standard TT', Times, serif,monospace;
    color:white;
    font-size:20px;
    margin:10px;
    transition: .2s ease;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4));
}

.quote:hover{
    color:rgb(186, 7, 7);
    text-shadow: 1px 1px #f0f8ff;
}

.pixel{
    margin-top:0px;
}

.tr{
    opacity:0;
    font-size:1px;
}

p{
    margin-bottom:8px;
    text-align:justify;
}

@keyframes float{
    0%   { transform: translateY(  0px); }
    25%  { transform: translateY(-5px); }
    50%  { transform: translateY(  0px); }
    75%  { transform: translateY( 5px); }
    100% { transform: translateY(  0px); }
}

.container{
    display: flex;
    /*border: 3px solid red;*/
    flex-direction: column;
    width: 60%;
    /*height: 85%; */
    max-width:800px;
    justify-content: center;
    margin:auto;
    margin-top:0px;
    overflow:auto;
    height:calc(100vh - 0.5rem);
}

.main{
    display: flex;
    /*border: 3px solid blue;*/
    flex-direction: column;
    /*background-color: rgb(215, 212, 181, 50%);*/
    border-radius:30px;
    color:white;
    overflow:auto;
    flex:1;
}

.text{
    display: flex;
    flex-wrap:wrap;
    /*border: 3px solid blue;*/
    flex-direction: row;
    background-color: rgb(215, 212, 181, 50%);
    height:100%;
    border-radius:30px;
    color:white;
    overflow:auto;
    padding:30px;
    justify-content: center;
    font-size: 15px;
    font-family:'Old Standard TT', Times, serif,monospace;
}

h1{
    font-size:70px;
    z-index:1000;
    color:white;
    /*text-shadow:5px 3px 20px white;*/
    opacity:100%;
    text-decoration: underline double white 5px;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4));
    margin-left:20px;
}

.banner{
    max-width:500px;
    margin-bottom:-110px;
    z-index:999;
    margin-top:0.5rem;
    margin-left:8px;
}

.banner{
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4));
    transition: .2s ease;
}

.banner:hover{
    transform: scale(1.03);
}

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;
}

a{
    color:white;
    text-decoration: none;
    font-family: 'Kode Mono', monospace;
}

@media all and (max-width:550px){
    .container{
        flex-direction: column;   /* les colonnes passent en pile */
    }
    .main{
        width:100%;               /* prend toute la largeur */
        padding:5em 0;            /* espace vertical */
    }
}