@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@100&family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
:root {
    /*   color variables */
    --clr-primary: #6aeeb5;
    --clr-primary-hover: #29e6a7;
    --clr-primary-dark: #039d69;
    --clr-gray100: #f0f7f8;
    --clr-gray200: #cfd8dc;
  
    /*   border radius */
    --radius: 0.2rem;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
  
  body {
    /* font-family: Montserrat, sans-serif; */
    background: var(--clr-gray100);
    list-style-type: none;
    background: url(bg.jpg) no-repeat;
    background-size: cover;
    color: white;
    text-align: center;
    /* text-decoration: none; */ 
    /*padding: 20%;
  */}
  .cent{
    /* background: rgb(125, 140, 141); */
    /* text-align: center; */
    text-decoration: none;
    list-style-type: none;
    /* padding: 20%; */
  }
  div p{
    font-size :25px;
    text-decoration: none;
    /* font-family: 'Permanent Marker', cursive; */
    /* font-family:'Big Shoulders Stencil Display' */
    font-family:  'Pacifico', cursive;

  }
  div li{
    font-size: 30px;
    text-decoration:none;
    list-style-type:none;
    /* font-family:'Cormorant Garamond', serif; */
    font-family: 'Cookie', cursive;
  }
  

  
  .nav-list {
    background: white;
    box-shadow: 0px 0px 10px var(--clr-gray200);
    padding: 1rem 0;
    border-radius: var(--radius);
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  .nav-item {
    list-style: none;
    margin-right: 2rem;
    font-family: Montserrat, sans-serif;
  }
  
  .nav-item a {
    text-decoration: none;
    color: black;
    transition: all 200ms ease-in;
  }
  
  .nav-item a:hover {
    color: var(--clr-primary-dark);
  }
  
  .nav-item:first-child {
    margin-right: auto;
    margin-left: 2rem;
    /* height: 10cm;
    width: 10cm */
  }
  
  
  .btn-primary {
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    background: var(--clr-primary);
    border: none;
    outline: none;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 200ms ease-in;
    
  }
  
  .btn-primary:hover {
    background: var(--clr-primary-hover);
  }