@font-face {
    font-family: "MaximaEF";
    src: url(assets/fonts/MaximaEF-Light.woff2);
    font-weight: 300;
}

@font-face {
    font-family: "MaximaEF";
    src: url(assets/fonts/MaximaEF-Medium.woff2);
    font-weight: 500;
}

/* Fonts */
:root {
    --fs-14: calc(14/16 * 1rem);
    --fs-40: calc(40/16 * 1rem);

    --font-size-titles:var(--fs-40);
    --font-size-regular:var(--fs-14);
    
}

/* Colours */
:root {
    --white : hsl(40, 50%, 98%);
    --maroon : hsl(348, 89%, 40%);
}

/* Sizes */
:root{
    --padding-sm: 1rem;
    --desktop-breakpoint: 1000px;

    --menu-width: 200px;
    --content-width: calc(100dvw - var(var(--menu-width)))
}

html {
    box-sizing: border-box;
    font-size: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

* {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

p{
    line-height: 1.5;
    font-weight: 300;
}

img, 
picture {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    margin: 0;
    font-family: "MaximaEF", Arial, Helvetica, sans-serif; 
    background-color: var(--white);
    color: black;
    font-size:var(--font-size-regular);
    height: 100dvh;
    /* overflow: hidden; */
}

a {
   text-decoration: inherit; 
   color: inherit;
}

.scroller {
    height: 100dvh;  
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.scroll-section {
    scroll-snap-align: start;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.section{
    margin: 16px;
    /* half goes for the title top margin, the other half goes to title padding bottom */
    margin-top: calc(var(--header-size) / 2);
    padding: auto;
}

.section-title{
    font-size: var(--fs-40);
    position: relative;
    padding-bottom: calc(var(--header-size) / 2);;
}

.section.details {
  margin-top: calc(var(--header-size) * 2); 
  padding-top: 10px;
}

.detailed-info-img{
    max-height: 80vh;
    object-fit: contain;
}

.detail_page_img_container{
    padding-bottom: min(50vh, 100px);
    object-fit: contain;
}

.back-button-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
}

.back-button {
    filter: invert(15%) sepia(95%) saturate(3952%) hue-rotate(341deg) brightness(89%) contrast(101%);
    height: 50px;
}

/* might need to update this to use custom variables */
@media (min-width: 1000px) {
    .content-container {
        /* width: 100%; */
        width: var(--content-width);
        margin-right: max(var(--menu-width), 25dvw);
    }
}