/* :::::::::::::::::::::::: Base styles */
:root {
    --color-white: #ffffff;
    --color-black: #4B4C4C;
    --color-cloud: #E2E2E2;
    --color-queso: #EABD3F;
    --color-pool: #00B3CC;
    --color-clementine: #FA9250;
    --color-blueberry: #2D64A4;

    --fontsize-small: .8rem;
    --fontsize-default: 1rem;

    --spacing-xs: .5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;

    --radius-default: 2rem;
    --radius-full: 100%;

    --footer-size-sm: 260px;
    --footer-size-md: 350px;

}
::selection {
  background: var(--color-clementine);
  color: white;
}

body {
    font-family: "Red Hat Display", inter, helvetica, arial, sans-serif;
    font-style: normal;
    font-size: var(--fontsize-default);
    color: var(--color-black);
    min-height: calc(100vh);
    position: relative;
    @media screen and (min-width: 700px) {
        height: 760px;
    }
    @media screen and (min-width:900px) {
        height: 850px;
    }
    @media screen and (min-width:1200px) {
        height: 900px;
    }
}
header img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
}
main {
    padding: var(--spacing-sm);
    @media screen and (min-width: 800px) {
            max-width: 1300px;
            margin: 0 auto;
        }
}

.header-logo {
    padding-bottom: var(--spacing-sm);
}
a.button {
    text-decoration: none;
    border-radius: var(--radius-default);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-pool);
    color: var(--color-white);
    transition: all .2s ease;
    &:hover {
        background: var(--color-clementine);
    }
}


/* :::::::::::::::::::::::: Typography */
h1 {
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 0;
    @media screen and (min-width: 900px) {
        font-size: 2.5rem;
        span {
            display:block;
        }
    }
    @media screen and (min-width: 1100px) {
        font-size: 3rem;
    }
    @media screen and (min-width: 1300px) {
        font-size: 3.8rem;
    }
    
}

h2 {
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--color-blueberry);
    margin-bottom: var(--spacing-md);
    @media screen and (min-width: 900px) {
        font-size: 1.6rem;
    }
    @media screen and (min-width: 1100px) {
        font-size: 2rem;
    }
}
/* :::::::::::::::::::::::: Content */
.content {
        display: flex;
        flex-direction: column;
        vertical-align: middle;
        @media screen and (min-width: 700px) {
            flex-direction: row;
            padding-top: var(--spacing-md);
        }
        .portrait {
            align-self: end;
        }
        
    }
/* :::::::::::::::::::::::: Message */
.message {
    margin-bottom: var(--spacing-md);
    @media screen and (min-width:1400px) {
        padding-top: var(--spacing-sm);
    }
}
.social {
    padding-top: var(--spacing-md);
    a {
        color: var(--color-pool);
        margin-right: var(--spacing-xs);
        transition: ease .2s all;
        &:hover {
            color: var(--color-clementine);
        }
    }
}
/* :::::::::::::::::::::::: Portrait */
.portrait {
    transform: translate(15%, 0);
    position: relative;
    z-index: 2;
    max-width: 400px;
    @media screen and (min-width: 560px) {
        transform: translate(15%, -15%);
    }

    @media screen and (min-width: 700px) {
        max-width: 450px;        
    }
    @media screen and (min-width: 980px) {
        max-width: 500px;        
    }
    @media screen and (min-width: 1150px) {
        width: 600px;    
        max-width: 600px; 
        padding-top: var(--spacing-md);
    }
    &:after {
        content: '';
        width: 60px;
        height: 60px;
        background: var(--color-blueberry);
        position: absolute; 
        top: 16%;
        left: 1%;
        border-radius: var(--radius-full);
        opacity: .7;
        @media screen and (min-width:1000px) {
            top: 79%;
            left: 5%;
        }
        @media screen and (min-width:1750px) {
            left: auto;
            top: 34%;
            right: -5%;
        }
    }
    &:before {
        content: '';
        width: 120px;
        height: 120px;
        background: var(--color-pool);
        position: absolute; 
        top: 36%;
        left: -15%;
        border-radius: var(--radius-full);
        opacity: .7;
        display: block;
        @media screen and (min-width:1000px) {
            top: 56%;
        }
        @media screen and (min-width:1750px) {
            left: auto;
            top: 11%;
            right: 0;
        }
    }
    img {
        width: 100%;
    }
    
}
/* :::::::::::::::::::::::: Footer */
footer {
    background: url(img/pattern.svg) no-repeat center top;
    background-size: 980px;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-size-sm);
    @media screen and (min-width:700px) {
        background-size: 1200px;
        height: var(--footer-size-md);
    }
    @media screen and (min-width:900px) {
        background-size: 150%;
    }
}

.madebyahuman {
    background: var(--color-white);
    padding: var(--spacing-xs);
    color: var(--color-pool);
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: var(--fontsize-small);
}


/* :::::::::::::::::::::::: That's a big monitor */
@media screen and (min-width:2500px) and (max-width:2800px) {
    header:before {
        content: 'Wow! We have the same size monitor!';
        text-align: center;
        display: block;
        width: 100%;
        padding: var(--spacing-xs);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        background: var(--color-pool);
        color: var(--color-white);
    }
}