/* sensation FONT INSTALLATION */
/* Regular */
@font-face {
    font-family: 'Sansation';
    src: url('../assets/font/Sansation_Regular.ttf') format('truetype');
    font-weight: 400;  /* normal */
    font-style: normal;
}
/* ITALIC */
@font-face {
    font-family: 'Sansation';
    src: url("../assets/font/Sansation_Italic.ttf") format('truetype');
    font-weight: 400;  /* normal */
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: 'Sansation';
    src: url('../assets/font/Sansation_Bold.ttf') format('truetype');
    font-weight: 700;  /* bold */
    font-style: normal;
}

/* Light */
@font-face {
    font-family: 'Sansation';
    src: url('../assets/font/Sansation_Light.ttf') format('truetype');
    font-weight: 300;  /* light */
    font-style: normal;
}

/* light-italic */
@font-face {
    font-family: 'Sansation';
    src: url('../assets/font/Sansation_Light_Italic.ttf') format('truetype');
    font-weight: 300;  /* light */
    font-style: italic;
}

/* bold-italic */
@font-face {
    font-family: 'Sansation';
    src: url('../assets/font/Sansation_Bold_Italic.ttf') format('truetype');
    font-weight: 700;  /* light */
    font-style: italic;
}

html{
    scroll-behavior:smooth;
}
body {
    font-family: 'Sansation', sans-serif;
    padding-left:30px;
    padding-right:30px;
    background-color: #FDF6F0;
}

h1 {
    font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
    font-weight: 700;
}
h2 {
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.75rem);
    font-weight: 600;
}
h3 {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
    font-weight: 600;
}

p {
    font-weight: 400;
    font-size: clamp(1rem, 2vw + 0.25rem, 1.25rem); 
}

button {
    font-size: clamp(0.875rem,1.5vw+0.25rem,1rem);
    font-weight: 500;
}

/* menu-bar */
nav.menu-bar {
    /* border:purple 1px solid; DEBUG ONLY */
    /* width: 100%; */
    max-width: 1024px;
    height:100%;
    /* max-height: 40px; */
    margin: auto;
    margin-top: 30px;
    padding: 7.5px 15px;
    background-color: #C79DA3;
    border-radius: 100px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    gap: 10px;
}

nav.menu-bar a {
    /* border:gray 1px solid; DEBUG ONLY */ 
    border:none;
    background-color: #FDF6F0;
    border-radius: 100px;
    flex:1 1 150px;
    min-width: 130px;
    max-width: 200px;
    height: clamp(25px, 2vw, 40px);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #58524B;
    transition: color 0.2s ease;
    text-align: center;
    align-content: center;
    text-decoration: none;
    font-size: clamp(0.575rem,1.5vw+0.25rem,1rem);
    font-weight: 400;
}
    /* pseudoclasses */
nav.menu-bar a:hover {
    /* border:#F2C6B0 solid 1.5px; */
    transition: color 0.2s ease;
    transform:scale(1.01);
}
nav.menu-bar a:active {
    background-color:#F2C6B0;
    transform: scale(0.99);
    transition: color 0.2s ease;
}


/* footer */
ul.footer-container {
    /* border:purple 1px solid; */
    /* width: 100%; */
    max-width: 1024px;
    margin: auto;
    display:flex;
    flex-direction: column;
    list-style-type: none;
    list-style-position:inside;
    padding:30px;
}

li.first-row {
    /* border:gray 1px solid; */
    /* flex:1; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}
li.first-row p {
    /* border:green 1px solid;DEBUG ONLY */
    margin: 5px 0px;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 300;
    color: #58524B;
    
}
li.first-row a {
    text-decoration: none;
    color: #58524B;
}

li.second-row {
    /* border:gray 1px solid; DEBUG ONLY */
    /* flex:1; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
li.second-row p {
    /* border:green 1px solid;DEBUG ONLY */
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 300;
    margin: 5px 0px;
    color: #58524B;
}
li.second-row a {
    text-decoration: none;
    color: #58524B;
}

li.last-row {
    /* border:gray 1px solid; DEBUG ONLY */
    /* flex:1; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
li.last-row p {
    /* border:green 1px solid;DEBUG ONLY */
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 300;
    margin: 5px 0px;
    color: #58524B;
}

ul.footer-container a{
    color:#58524B;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 300;
    text-decoration: none;
    transition: color 0.2s ease;
}

    /* pseudo-element */
li a:hover{
    color: #F2C6B0;
    transition: color 0.2s ease;
}

    /* @media */
@media (max-width: 480px){
div.menu-bar {
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;

  };
}
@media (max-width:600px){
    li.first-row,
  li.second-row,
  li.last-row {
    flex-direction: column;
    gap: 20px;
  };
}
@media (max-width: 600px){
  li.first-row p,
  li.second-row p,
  li.last-row p {
    text-align: center;
  }
}