/* 1. Register the Regular weight */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
  font-weight: 400;       /* Normal weight */
  font-style: normal;
  font-display: swap;    /* Prevents invisible text while loading */
}

/* 2. Register the Bold weight */
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/playfair-display-v40-latin-italic.woff2') format('woff2');
  font-weight: 400;       /* Bold weight */
  font-style: italic;
  font-display: swap;
}
:root {
      /* Some default fonts and colors  */
    --font: Georgia; /* Georgia italic is also good*/
    --font-mono: "IBM Plex Mono", monospace;
    --font-play: "Playfair Display", serif;
    --font-color: #562F00;
    --font-color2: rgba(165, 42, 42, 0.791);
    --back-color: #FF9644;
    --hover-color: #FFCE99;
    --hover-b-color: #FFFDF1;
    --small: 8px;
    --normal: 16px;
    --large: 24px;
    --larger: 36px
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
    background-color: var(--hover-b-color);
}
/* All links will be idential */
a{
    text-decoration: none;
    color: var(--font-color);
}
a:hover{
    text-decoration: underline;
}
li{
    list-style: none;
}
/*  All links in navbar */
nav{
    padding: 10px 0;
}
nav ul {
    display: flex;
    justify-content: center;
    gap: 20px;
}




/* From Here Styling starts */
/* some atomic border */
.bordered{
    border: 2px solid var(--back-color);
    border-radius: 8px;
}
em{
    font-style: italic;
}