body {
    margin:0;
    padding:0;
    color:#eee;
    background-color:#1a1a1a;
    font-family:monospace;
    font-size: calc(0.8em + 1vw);
    text-align: center;
    }
    @font-face {
    font-family: mapolice;
    src: url("src/Action_Comics.ttf");
}
       
    
#global {   /* conteneur qui permet de centre le site web */ 
position:relative;
margin: 0 auto;
width:90%;
border:0.1em solid #ddd;
background:linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.1));
/*background-image: url("src/logo_stex.png");
background-repeat: no-repeat;
background-position:95% 95%;
background-size: 10%;*/
border-radius:0 0 0.5em 0.5em;
}

@media screen and (min-width: 1366px){
    body{font-size: calc(0.6em + 0.8vw);}
    #global{ width:60%;}
}

#nav {
    overflow: hidden;
    width: 100%;
    background-color: #444;
}
#nav li {
    float: left;
    display: block;
    margin:0;
    padding: 1em;
    font-family: mapolice;
    }
#nav  li:hover{
    cursor:pointer;
    }  
#nav  li:hover:not(.active) {
    background-color: #111;
    }
#nav .active {
    background-color: #d65013;
    animation: arcenciel 10s infinite;
    }
    
#nav #lycee, #nav #ndc{
    padding: 0;  
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#nav #ndc{
    background-image: url("nuitducode/ndc.png");
}
#nav #lycee{
    float: right;
    background-image: url("src/logo_stex.png");
}
#nav #lycee, #nav #ndc a{
    display: flex;
    border: none;
    border-radius: 0;
    height: 100%;
    padding: 1em 1.5em;
    color: rgba(255,255,255,0%);
}

#url {
    min-height:250px;
    margin-top:30px;
}
#url a {
    margin : 0.2em;
    color : #080;
    padding: 0.4em;
    text-decoration: none;
    border:0.1em solid rgba(255,255,255,0%);
    display: inline-block;
}
#url a:hover, a:active {
    border:0.1em solid rgba(255,255,255,15%);
    border-radius:0.5em;
    background-color:rgba(255,255,255,5%);
    color : #0f0;
}

@keyframes arcenciel {
0% {color: red;}
17% {color: yellow;}
34% {color: green;}
51% {color: cyan;}
68% {color: blue;}
85% {color: magenta;}
100% {color: red;}
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline;
}
.blue{
color:blue;
}

 


#logos li{
    display: inline-block;
}
#logos a{
    border:none;
    }
#logos a:hover{
    filter:blur(1px);
    }