/* General Styles*/

@font-face {
  font-family: "basiic";
  --src: url("https://cattly.neocities.org/Fonts/basiic.ttf") format("truetype");
  }

@font-face {
 font-family: "Romance" ;
 --src: url("RomanceA.ttf") format("ttf");
}

@font-face {
  font-family: "Cherish";
  --src: url("Cherish.ttf") format("ttf");
}

.light-brown {
  color:#5c3921;
}


h1{
  font-family: "Cherish";
  font-size: 50px;
}

h2{
  font-family: "Romance";
  font-size: 25px;
}

p{
  font-family: "basiic";
  font-size: 20px;
}

body{
  background-image: url('https://cattly.neocities.org/Images/cloudbg.png');
  background-size: 100px 100px;
  background-color: #faf5f0;
}

nav{
  position: sticky;
  top:0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #dbcec1;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 40px;
}

.logo h3 {
  margin-left: 10px;
  color: #5c3921;
  font-size: 28px;
  font-family: "Cherish";
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
}

.nav-links a{
  display: block;
  padding: 30px 16px;
  color: #ad349d;
  text-decoration: none;
  font-size: 16px;
  font-family: "basiic";
  text-transform: uppercase;
  transition: all ease-in-out 100ms;
}

.nav-links a:hover {
  background-color: #f5d0e1;
}


.nav-links .nav-cta-button { 
  padding: 10px 18px;
  margin-left: 16px;
  border: #f5abe4 solid 2px;
  border-radius: 50px;
}

.nav-links .nav-cta-button:hover {
  background-color:#f5d0e1 ;
}

.hamburger {
  display: none;
  cursor: pointer;
  width: 34px;
}

.hamburger .bar {
  flex-basis: 100%;
  height: 4px;
  background-color: #ad349d;
  margin: 3px;
}


/*Responsive Design*/
@media (max-width:768px){
  
  nav{
    flex-wrap: wrap;
  }
    
  .hamburger {
    display: flex;
    flex-wrap: wrap;
    
  }
  
  .logo {
    height:80px
  }
  
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-wrap: wrap;
  }
  
  .nav-links li {
    flex-basis: 100%;
  }
  
  .nav-links a:hover {
    background-color: #f5d0e1 ;
  }
    
  .nav-links .nav-cta-button {
    padding: 30px 16px;
    margin-left: 0;
    border: none;
    border-radius: 0;
    margin-bottom: 20px;
  }
  
  .nav-links .nav-cta-button:hover {
    background-color: #f5d0e1 ;
  }
}