@font-face {
    font-family: 'Zarathustra';
    src: url('fonte/Zarathustra.woff2') format('woff2'),
        url('fonte/Zarathustra.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Redaction 20';
    src: url('fonte/Redaction20-Regular.woff2') format('woff2'),
        url('fonte/Redaction20-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@keyframes move {
  0%  { transform: translateX(0%);}
  100%{ transform: translateX(-100%);}
}
















#img2{
width: 12vw;
position: fixed;
top: 12vh ;
left: 73vw;
z-index: 3333;
opacity: 0%;
}

#img2:hover{
  opacity: 100%;
}

#img{
   width: 12vw;
   position: fixed;
   top: 12vh;
   left: 73vw;
   z-index: 33333333;
}

a{
    text-decoration: none;
    color: black;
    position: relative;
}
a:hover{
      color: rgb(255, 56, 156);

}
h1{
    font-family: "Zarathustra";
    font-size: 10vw;
    text-align: center;
    margin: 0.2em;
    position: relative;
    margin-bottom: 20vh;
    transform: rotate(3deg);
}

form{
  font-size: 1em;
}


.list{
    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 1em;
     padding: 2em;
     padding-top: 7vw;
     padding-bottom: 12vw;
     z-index: 00000;
}

ul{ list-style-type: none;
margin: 1em;}

li:before {
    content: "\☆\ ";
    margin: 1em;
}

li {  background-color: #ffffff;
   border-style: solid;
  border-color: #000000;
  border-width: 0.2em;
     font-family: "Zarathustra" ;
     padding: 0.3em;
     }


li:hover{
    color: rgb(255, 56, 156);
}    
.prince{
    
    font-family: "Redaction 20" ;
    bottom: -5vh;
  
    font-size: 4.5vw;
    position:fixed; 
    text-align: center;
  
       background-color: #ffffff;
       width: 100vw;
   border-style: solid;
  border-color: #000000;
  border-width: 0,3em;
  z-index: 333333;
  margin-left: -1vh;
}
body{
     background: #919191;
     min-width: 100%;
  max-width: 100%;

  --s: 51px; /* control the size*/
  --c1: #d4d4d4;
  --c2: #c8ffba;
  
  --_g: #0000 90deg,var(--c1) 0;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g)),
    conic-gradient(from 90deg at 1px 1px,var(--_g)),
    var(--c2);
  background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);




}

form{
    text-align: center;
    color: rgb(0, 0, 0);

}

#lien1{
  position: fixed;
  z-index: 3333;
}




/* CSS */
button {
  background-color: #ffffff;
  border-style: dotted;
  border-color: #ffe0f1;
  position: relative;
}


button:hover{
  transform: translateX(10%) translateY(10%);
  opacity: 1;
  transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}





.boxe{
   display: flex;
  align-items: center;
  justify-content: center;
}




.cadre{
z-index: 33;
     background-color: #ffffff;
   border-style: solid;
  border-color: #000000;
  border-width: 0.2em;
  width: 94vw;
text-align: center;
padding-top: 2vw;
padding-bottom: 2vw;
position: fixed;
margin-top: -7.5vw;

    font-family: "Redaction 20" ;
}



.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#fileToUpload{
  font-size: 1em;
  padding: 0.5em;
  
    font-family: "Redaction 20" ;
}

input{
  font-size: 1em;
  
    font-family: "Redaction 20" ;
 
}


@media screen and (min-width: 740px) and (max-width: 1000px) {
  .cadre{
z-index: 33;
     background-color: #ffffff;
   border-style: solid;
  border-color: #000000;
  border-width: 0.2em;
  width: 90vw;
text-align: center;
padding-top: 2vw;
padding-bottom: 2vw;
position: fixed;
margin-top: -30vw;

    font-family: "Redaction 20" ;
}
.prince{
    
    font-family: "Redaction 20" ;
    bottom: 0vh;
  
    font-size: 4.5vw;
    position: fixed; 
    text-align: center;
  
       background-color: #ffffff;
       width: 100vw;
   border-style: solid;
  border-color: #000000;
  border-width: 0,3em;
  z-index: 333;
  margin-left: -1vh;


}
#img{
   width: 20vw;
   position: fixed;
   top: 10vh;
   left: 77vw;
   z-index: 33333333;
}
.list{
    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 1em;
    padding: 0em;
     padding-top: 10vw;
     margin-left: 1em;
     padding-bottom: 10vh;
    
}

}



@media (max-width: 740px) {




.list{
    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 1em;
    padding: 0em;
     padding-top: 20vw;
     margin-left: 1em;
     padding-bottom: 10vh;
    
}

.cadre{
z-index: 3333;
     background-color: #ffffff;
   border-style: solid;
  border-color: #000000;
  border-width: 0.2em;
  width: 90vw;
text-align: center;
padding-top: 2vw;
padding-bottom: 2vw;
position: fixed;
margin-top: -7.5vw;

    font-family: "Redaction 20" ;
}
.prince{
    
    font-family: "Redaction 20" ;
    bottom: 0vh;
  
    font-size: 4.5vw;
    position: fixed; 
    text-align: center;
  
       background-color: #ffffff;
       width: 100vw;
   border-style: solid;
  border-color: #000000;
  border-width: 0,3em;
  z-index: 333;
  margin-left: -1vh;


}
#img{
   width: 20vw;
   position: fixed;
   top: 93vh;
   left: 70vw;
   z-index: 333333;
}

}