@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Colour scheme */
    --color-dominant: #F7F9FC;
    
    --color-secondary: #1F2A44;
    --color-secondary-hover: #162033;

    --color-accent: #2F7F7A;
    --color-accent-hover: #256965;
    
    --color-border: #E1E6EF;

    --color-text: #1A1A1A;
    --color-text-muted: #5F6C7B;

    --color-success: #2E7D32;
    --color-warning: #C47A2C;
    --color-error: #B00020;

    /* Font */
    --primary-font: 'Raleway', Arial, sans-serif;
    --secondary-font: 'Open Sans', serif; 
    --accent-font: Arial;

    /* Font sizing */
    --standard: 1.6rem;
    --medium: 2rem;
    --large: 2.8rem;
    --extra-large: 3.6rem;

    /* Font style */
    --regular-weight: 400;
    --bold-weight: 700;
    --italic: italic;
    
    /* Spacing scale */
    --space-1: 0.8rem;
    --space-2: 1.6rem; 
    --space-3: 2.4rem;
    --space-4: 3.2rem;
    --space-5: 4rem;

    /* Border width */
    --thin-border: 0.2rem;
    --medium-border: 0.5rem;
    --thick-border: 1rem; 
}


/* General CSS */
html {
    /* Default browser font size is 16px. % value makes that 10px for easier 'rem' calculations and smoother scaling */
    font-size: 62.5%;
    width: 100%;
    max-width: 100%;
}

.page {
    font-size: 1.6rem;
    background-color: var(--color-dominant);
    width: 100%;
    max-width: 100%;
}

/* Typography */

.text {
    font-family: var(--secondary-font);
    font-size: var(--standard);
    font-weight: var(--regular-weight);
    color: var(--color-text);
}

.text--muted {
    color: var(--color-text-muted);
}

.text--white {
    color: var(--color-dominant); 
}

.text--italic {
    font-style: italic; 
}

.text--bold {
    font-weight: var(--bold-weight); 
}

.heading {
    font-family: var(--primary-font);
    font-weight: var(--bold-weight);
    color: var(--color-secondary);
}

.heading--m {
 font-size: var(--medium);
}

.heading--l {
 font-size: var(--large);
}

.heading--xl {
    font-size: var(--extra-large);
}



.hero__item {
    padding: 1rem; 
}


/* Links */

.link--default {
    color: var(--color-secondary);
    font-family: var(--secondary-font);
}

.link--default:hover {
    color: var(--color-secondary-hover);
    text-decoration: none; 
}

.link--alternate {
    color: var(--color-dominant);
    font-family: var(--secondary-font);
    font-size: var(--standard);
    font-weight: var(--regular-weight); 
}


/* Site header */ 
.site-header {
    display:flex;
    align-items: center;
    justify-content: space-around; 
    border-bottom: var(--medium-border) solid var(--color-border);
    flex: 1 1 0;
    width: 100%;
    margin: 0 auto; 
}

.site-header__container {
    padding: 2rem;
    margin: 0 auto;  
}

/* Layout */
.column-block {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
}

.row-block {
    display: flex;
    align-items: stretch;
    
}

.alternate-bg {
    background-color: #fff; 
}

.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    padding: 8rem 2rem 8rem 2rem;
    gap: 5rem;
    margin: 0 auto;
    width: 100%;
}

.section__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2rem;   
}

.section__subtitle {
    width: 80%; 
}

.section__tagline {
    text-align: center;
    margin: 1rem auto; 
}

/* Cards */

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 10px; /* 5px rounded corners */
    padding: 3rem;
    display: flex;
    flex-direction: column; 
    flex: 1 1 0; 
}

.card__content--long {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem; 

}

.card--space-between {
    justify-content: space-between; 
}

.card__button {
    align-self: center; 
}

/* Images */ 

.image--fit {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden; 
}

/* Footer */

.footer {
    background-color: var(--color-secondary);
    display: flex;
    justify-content: center;
    padding-top: 2rem;  
}

.footer__container {
    max-width: 1000px;
    display: flex;
    justify-content: center;  
}

.footer__item {
    padding: 2rem;
}

.footer__links {
    display: flex;
    gap: 2rem;
    flex-direction: column; 
}

@media (min-width:640px) {
    .footer__links {
        flex-direction: row; 
    }
}






/* BEM Syntax with 'state' addition (see BEMIT for state)

Block component
- The block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big).

.btn {} 

Element that depends upon the block
- The element name describes its purpose ("What is this?" — item, text, etc.), not its state ("What type, or what does it look like?" — red, big, etc.).
- The structure of an element's full name is block-name__element-name. The element name is separated from the block name with a double underscore (__).  

.btn__price {}


Modifier that changes the style of the block
- The modifier name describes its appearance ("What size?" or "Which theme?" and so on — size_s or theme_islands), its state ("How is it different from the others?" — disabled, focused, etc.) and its behavior ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).
- The modifier name is separated from the block or element name by a single underscore (_)

.btn--orange {} 
.btn--big {}

State
- States are very temporary.
- Ensure that States are easily noticed and understood in our HTML.
- Never write a bare State class.