*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
    background-color: #E8E7E2;
    overflow-x: hidden;
    overflow-y: hidden;
}

body {
    width: 100vw;
    height: 100vh;
}

header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 90px;
    top: 0;
    z-index: 999;
    pointer-events: none;
}

#logo {
    object-fit: contain;
    width: clamp(49px, 4vw, 72px);
    height: auto;
    padding: 0.7rem;
    margin-left: 0.4rem;
}

h1 {
    z-index: 12;
    color: #E8E7E2;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:  1.7rem;
    padding: 0.7rem;
    margin-right: 0.4rem;
}

main {
    display: flex;
    justify-content : center;
    align-items : center;
    position: relative;
    height: 100vh;
}

#papier {
    position: fixed;
    object-fit: contain;
    width: auto;
    height: 70vh;
    z-index: 0;
}

#serrurenoire {
    position: absolute;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    z-index: 4;
    pointer-events: none;
}

#oeilserrure {
    position: absolute;
    object-fit: contain;
    width: clamp(270px, 29vw, 329px);
    height: auto;
    top: 0;
    z-index: 2;
    margin-top: clamp(84px, 9vh, 90px);
    margin-right: clamp(4px, 0.49vw, 7px);
}

#pupille {
    position: absolute;
    object-fit: contain;
    width: clamp(17px, 7vw, 142px);
    height: auto;
    top: 38%;
    left: 47.7%;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.24, 0.4, 0.24, 0.9);
}

footer {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    bottom: 0;
    z-index: 27;
    color: #E8E7E2;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: clamp( 9px, 0.7rem, 12px);
    padding: 1.2rem;
    pointer-events: none;
}
/*
@media (min-width: 1440px) {
    #oeilserrure { 
        width: clamp(201px, 272vw, 397px); 
        margin-top: 12.1vh; 
        margin-right: 0.7vw; 
    }
    #pupille { 
        width: clamp(119px, 29.7vw, 121px);
        top: 38%;
        left: 47.4%;
    }
}*/

@media (max-width: 1280px) {
    #oeilserrure { 
        width: clamp(197px, 272vw, 347px);
        margin-top: 12.4vh; 
        margin-right: 0.5vw; 
    }
    #pupille { 
        width: clamp(72px, 29.7vw, 102px);
        top: 38.2%;
        left: 47.9%;
    }
}

@media (max-width: 1024px) {
    #oeilserrure { 
        width: clamp(197px, 142vw, 297px);
        margin-top: 12.4vh; 
        margin-right: 0.7vw; 
    }
    #pupille { 
        width: clamp(72px, 29.7vw, 87px);
        top: 38.2%;
        left: 47.4%;
    }
}

@media (max-width: 768px) {
    #oeilserrure { 
        width: clamp(120px, 72vw, 397px); 
        margin-top: 12.4vh; 
        margin-right: 0.7vw; 
    }
    #pupille { 
        width: clamp(92px, 29.7vw, 127px);
        top: 38.2%;
        left: 44.7%;
    }
}

@media (max-width: 480px) {
    body {
        background-color: black;
    }
    main {
        align-items : flex-start;
    }
    #serrurenoire { 
        height: 197vw; 
    }
    #oeilserrure { 
        width: clamp(64px, 76.7vw, 497px);
        margin-top: clamp(2vh, 12.7vh, 12.9vh); 
        margin-right: 0.7vw; 
    }
    #pupille { 
        width: clamp(27px, 22.9vw, 127px);
        top: 40%;
        left: 44%;
    }
}