.head {
  background-color: black
}



.body {
    background-color: black;
    font-family: Times;
    background-size: cover;
    background-repeat: repeat; 
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    
    
}

.container {
    display: flex; 
    align-items: center; 
    position: relative;
    
    
}
.intro {
    font-family:'Alice_in_Wonderland_3';
    color: white;
    text-align: center;
    border: 5px dotted white;
    font-size: 20px;
    padding: 30px 50px;           
    max-width: 600px;             
    width: 100%;                  
    border-radius: 10px;
    position: relative;
    z-index: 1;
   background-color: rgba(0, 0, 0, 0.7);
}  
  


/* tabs */
.tabs {
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.tab {
    background: #800080;
    background-color: #800080;
    color: white;
    padding: 5px 15px; 
    font-weight: bold;
    position: relative;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    transition: all 0.3s ease;
}

/* Post-it à gauche */
.left-tabs {
    margin-right: -10px; 
    
}
.left-tabs .tab {
    border-radius: 5px 0 0 5px;
    transform-origin: left center;
    margin-bottom: 4.5rem;
}

/* Post-it à droite */
.right-tabs {
    margin-left: -10px; 
}
.right-tabs .tab {
    border-radius: 0 5px 5px 0;
    transform-origin: right center;
    margin-bottom: 4.5rem;
}