@font-face {
  font-family: 'Betm Rounded';
  src: url('Betm-Rounded-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sunday Best';
  src: url('Sunday-Best.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

header h1, header h2 {
  font-family: 'Betm Rounded', sans-serif;
}

header body {
  font-family: 'Betm Rounded', sans-serif;
}

header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  text-align: center;
  background-color: #fff;
  font-size: 17px;
  box-shadow: 0px 1px 5px rgb(0 0 0);
  font-family: 'Sunday Best', sans-serif;
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  padding-left: 10px;
  text-decoration: none;
}

span {
  background-image: linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #8B00FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.menu li a {
  display: block;
  font-size: 20px;
  white-space: nowrap;
  font-weight: bold;
  color: #000;
  text-align: center;
  text-decoration: none;
}

nav ul li {
  display: inline-block;
  position: relative;
}

.menu li {
  margin: 0;
}

nav ul li a {
  display: block;
  padding: 3px 7px;
  color: #333;
  zoom: 100%;
  text-decoration: none;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: -10px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1;
}
      
nav ul ul li {
  display: block;
}

nav ul li:hover > ul {
  display: inherit;
  text-align: center;
  margin: 0px -100px;
}

li {
  margin-top: 5px;
}

.grand {
  display:block
}

.petit {
  display:none
}

@media screen and (max-width: 1050px) {
  
.grand {
  display:none
}
  
.petit {
  display:block
}
}