body{
    margin:0;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#000;
    background-image:
    linear-gradient(rgba(0,0,40,.7),rgba(0,0,0,.9)),
    url("img/bgimage.jpg");
    background-size:cover;
    color:#00eaff;
    font-family:'VT323', monospace;
    font-size:25px;
}
.container{
    position:relative;
    width:1200px;
    height:750px;
    background:#050505;
    border:2px solid #003cff;
    box-shadow:
        inset 0 0 15px rgba(0,50,255,.15);
}
.box{
    position:absolute;
    background:#020202;
    border:2px solid #004cff;
    color:#00eaff;
    padding:15px;
    box-sizing:border-box;
    box-shadow:
        inset 0 0 8px rgba(0,100,255,.2);
}
.box:hover{
    border-color:#ff00dd;
    box-shadow:
        inset 0 0 10px rgba(255,0,200,.3);
}
h1{
    color:#00ffff;
    text-shadow:
        0 0 5px cyan,
        0 0 1px cyan;
    font-size:25px;
    letter-spacing: 2px;
}
h1{
    color:#00ffff;
    text-shadow:
        0 0 5px cyan,
        0 0 1px cyan;
    font-size:25px;
    letter-spacing: 2px;
}
p{
    color:#eeeeee;
    line-height:1.3;
}
.titre{
    width:250px;
    height:140px;
    top:60px;
    left:50px;
    z-index:3;
}
.contenu{
    width:850px;
    height:300px;
    top:140px;
    left:240px;
    z-index:2;
}
.bas{
    width:650px;
    height:350px;
    top:370px;
    left:60px;
    z-index:1;
}
body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
    repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.03) 1px,
        transparent 1px,
        transparent 3px
    );
}
.image{
    position:absolute;
    width:160px;
    height:110px;
    top:230px;
    left:70px;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    border:none;
    background:transparent;
}
.image img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.galerie1{
    position:absolute;
    width:300px;
    height:240px;
    right:50px;
    bottom:30px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:15px;
    overflow:auto;
}
.galerie1 img{
    width:100%;
    height:100px;
    object-fit:cover;
    border:1px solid #0066ff;
    transition:.2s;
}
.galerie1 img:hover{
    transform:scale(1.05);
    border-color:#00ffff;
}
.logo{
    position:absolute;
    top:35px;
    left:310px;
    color:#FF0000;
    text-shadow:
      0 0 0px #FF0000;
    font-size:64px;
    letter-spacing:10px;
    overflow:hidden;
    white-space:nowrap;
    border-right:4px solid #FF0000;
    animation:
        typing 2s steps(20),
        blink .8s infinite;
}
@keyframes typing{
    from{
        width:0;
    }
    to{
        width:12ch;
    }
}
@keyframes blink{
    50%{
        border-color:transparent;
    }
}
.menu{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.menu-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    height:55px;
    background:#000;
    border:2px solid #0066ff;
    color:#00eaff;
    text-decoration:none;
    font-weight:bold;
    letter-spacing:2px;
    transition:.2s;
}
.menu-btn:hover{
    background:#001133;
    border-color:#ff0000;
    color:#ff0000;
    transform:translateY(-3px);
}