@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;300;400;500;600&family=Manrope:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700;800&display=swap');
body {
    background-color: #f4f4ee;
}

@font-face {
    font-family:Aeonik ;
    src: url('./font/Aeonik-Medium.otf');
}
@font-face {
    font-family: AeonikLight;
    src: url('./font/Aeonik-Light.otf');
}
@font-face {
    font-family: AeonikRegular;
    src: url('./font/Aeonik-Regular.otf');
}
.font-manrope {
    font-family: 'Manrope', sans-serif;
}

.font-mono {
    font-family: 'IBM Plex Mono', sans-serif;
}
.font-aeonik{
    font-family: Aeonik;
}
.font-aeonik-light {
    font-family: AeonikLight;
}
.font-aeonik-regular {
    font-family: AeonikRegular;
}
.font-exo {
    font-family: 'Exo', sans-serif;
}
.box-shadow{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.bg-height {
    height: 450px;
}

@media screen and (max-width:800px) {
    .bg-height {
        height: 620px;
    }
}

@media screen and (max-width:450px) {
    .bg-height {
        height: 750px;
    }
}
@media screen and (max-width:350px) {
    .bg-height {
        height: 820px;
    }
}
@media screen and (max-width:300px) {
    .bg-height {
        height: 1000px;
    }
}