@font-face {
    font-family: "Windows Regular";
    src: url("../font/WindowsRegular.ttf") format("truetype"),
           
   }

*{
    padding: 0;
    margin: 0;
    font-family: "Windows Regular";   
}


body{
    background-image: url(../images/moon.gif);
    background-size: cover;
    text-align: center;
    color: white;
}

h1{
    font-size: 100px;
}

h2{
    font-size: 30px;
}

.matête{
    position: relative;
    width: 8%;
    border-radius: 60%;
}

.button /* Tout d'abord, on initialise le button*/ {
    cursor: pointer;
    border: 0px;
    background:transparent;
    position: relative;
    transition: all .2s;
    overflow: hidden;
    font-size: 4rem;
    text-decoration: none;
    color: rgb(255, 255, 255);
  
  }
  
  
  .button:hover /* la pseudo classe hover permet de spécifier l'apparence que va prendre un élément au survol de celle-ci*/ {
    background-color: rgba(8, 8, 162, 0.586);
    color: rgb(164, 176, 247);
    border: dashed 5px rgba(194, 179, 179, 0.732);
}


.button::after /* la pseudo classe after permet d'excuter les derniers éléments qui ont était selectionnés*/ {
  content: '';
  position: absolute;
  top: -50px;
  left: -100px;
  z-index: -1;
  transition: all .5s;
  box-shadow: inset -10px -10px 25px 0px rgba(129, 118, 143, 0.25), -10px 10px 25px 0prgba(103, 120, 125, 0.25)5;

}

@media screen and (max-width: 900px) {

    body{
        font-family: "Windows Regular";
    }
    
   a{
    position: relative;
    bottom: 50px;
   }

   .matête{
    position: relative;
    width: 35%;
    border-radius: 60%;
    }

    h1{
        font-size: 70px;
        border: 1px solid rgb(255, 255, 255);

    }
}