@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

*, *::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    
    /* Font */
    --FF:  "Nunito", sans-serif;
    --FS-LARGE: 2rem;
    --FS-STD: clamp(1rem, 2.5vw, 1.5rem);
    --FS-SMALL: 0.8rem;

    /* Colors */
    --BBC: #f5f5f5;
    --BDC: darkblue;
    --HDC: #1e4963;
    --FTC: #1e4963;
    --FTH: #a04b4b;
    --MTC: #000000;
    --HBC: #add8e6;
    --FBC: #add8e6;

    /* Margins */
    --PM: 10px 0;
    --IM: 10px;

    /* Padding */
    --PDD: 10px;
}

html {
    font-family: var(--FF);
    font-size: var(--FS-STD);
}

body {
    background-color: var(--BBC);
    background-image: url("../images/cocora_valley.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
}

header {
    background-color: var(--HBC);
    border-bottom: 2px solid var(--BDC);
    position: sticky;
    top: 0;
    font-size: var(--FS-LARGE);
    color: var(--HDC);
    width: 75%;
    padding: var(--PDD);
    text-align: center;
    z-index: 10;
}

main {
    margin: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    height: 75%;
    color: var(--MTC);
    z-index: 1;
}

img {
    float: left;
    margin-right: var(--IM);
    width: 100px;
    border: 1px solid var(--HDC);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}

main p {
    margin: var(--PM);
    text-align: justify;
}

footer {
    background-color: var(--FBC);
    position: sticky;
    bottom: 0;
    border-top: 2px solid var(--BDC);
    font-size: var(--FS-SMALL);
    width: 75%;
    padding: var(--PDD);
    text-align: center;
    z-index: 10;
}

a {
    text-decoration: none;
    color: var(--FTC)
}

a:hover {
    color: var(--FTH);
    font-size: 0.9rem;
}