styles.css

@import /*imports the necessary font*/
url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700;800&display=swap');

* { /*styles every element with border-box attribute, this makes padding easier to deal with and handle*/
    box-sizing: border-box;
    transition: all ease-in-out 250ms; /*make everything with transition an ease-in-out with 250 milliseconds*/
}

body {/*general body styles*/
    margin:0;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

/*good img practice for not allowing images to overflow beyond page limits*/
img {
    max-width: 100%;
    height: auto;
}

/*stop the text from touching the side of the screen*/
.container {
    width: 95%;
    max-width: 70em;
    margin: 0 auto;
}

.clearfix::after,
section::after,
footer::after {
    content: '';
    display: block;
    clear: both;
}


/* Column system 
===================== */

[class^=col-] {
    width: 100%;
    margin-top: 1em;
}

[class^=col-]:first-child { /*first child starts with margin-top of 0*/
    margin-top: 0;
}


@media (min-width: 40rem) {
    [class^=col-] { /*selects all classes that contain "col-" */
        float: left;
        padding: 0 .5em;
        width: 100%;
    }

    [class^=col-]:first-child { /*no left padding on the first child of the class*/
        padding-left: 0;
    }

    [class^=col-]:last-child { /*no right padding on the last child of the class*/
        padding-right: 0;
    }

    .col-3 {
        width: 50%;
    }

    .col-1 {
        width: 16.6666%;
    }
}



/* typography
===================== */

h1 { /*general style changes to all h1s*/
    font-weight: 300; /*changes h1 weight*/
    font-size: 1.7rem;/*changes h1 size*/
    margin-top: 0; /*no top margin for all general h1s*/
}

.title {
    font-size: 2.5rem; /*font-sizing for the text on the title*/
    margin-bottom: 1.5em; /*create more space between title and button underneath*/
    font-weight: 900; /*override h1 default on line 31*/
    margin-top: .5em; /*override h1 default on line 33*/
}

.title span {
    font-weight: 300; /*override font-sizing for span, decrease weight*/
    display: block; /*make the text inside the span always in its own block, bellow the bold one*/
    font-size: .9em; /*in relation to text above*/
}

.title-cta {
    margin: 0 0 .5em;
}

.unstyled-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@media (min-width:60rem) {
    .title {
        font-size: 3.5rem; /*increases font-size when width>60rem*/
    }
}

/* buttons */

.button {
    display: inline-block; /*makes the padding add to the height of everything*/
    font-size: 1.2rem;
    text-decoration: none; /*remove default underline*/
    text-transform: uppercase; /*uppercase all button class*/
    border-width: 2px; /*add a border to all buttons*/
    border-style: solid; /*make the border solid on all buttons*/
    padding: .5em 1.5em; /*unstick border .5em top&bottom, 1.5em left&right*/
}

@media (min-width: 60rem) {
    .button {
        font-size: 1.5rem; /*increases all button's size when width>60rem*/
        /*side-note: by having original .button padding size in em (line 56), this means when the media query kicks in the padding will expand proprotionally. Good use-case for em units*/
    }
}

.button-small { /*button-small styling for portfolio*/
    font-size: .7rem;
    font-weight: 700;
}

.button-accent {
    color: #18c25f; /*change specific -accent button color*/
    border-color: #12c25f;
}

/*add hover and focus effects for the button*/
.button-accent:hover,
.button-accent:focus {
    background: #12c25f; /*bg color changes to match text color*/
    color: #232323; /*text color changes to darker from green*/
}

.button-dark {
    color: #232323; /*change specific -accent button color*/
    border-color: #232323;
}

/*add hover and focus effects for the button*/
.button-dark:hover,
.button-dark:focus {
    background: #232323; /*bg color changes to match text color*/
    color: #DDD; /*text color changes from black to grey*/
}




/* head
===================== */

header {
    position: absolute; /*shrinks down, allows for overlapping*/
    margin: 1em;
    left: 0; /*overrides the absolute position and re-centers*/
    right: 0; /*overrides the absolute position and re-centers*/
}

/*readjusting the logo since the original size was too big*/
.logo {
    max-width: 8%;
    height: auto;
    color: white;
}

nav ul {
    margin: 0; /*remove margin from ul*/
    padding: 0; /*remove padding from ul*/
    list-style: none; /*remove default bullets from the list*/
}

nav li {
    display: inline-block; /*position list elements side-by-side*/
    margin: 1em;
}

nav a {
    font-weight: 900; /*make the text bold*/
    text-decoration: none; /*remove underline*/
    text-transform: uppercase; /*make text uppercase*/
    font-size: .9rem; /*.8rem means 8 measurements relative to html root size*/
    padding: .5em; /*adds more clickable space for the link and space li elements*/
    color: #FFF;
}

/*add styles when hovering a, add a style when clicked a */
nav a:hover,
nav a:focus {
    color: #DDD;
}

@media (min-width:60rem) {
    .logo {
        float: left; /*logo floats left when width >60rem*/
    }

    nav {
        float: right;/*ul floats right when width >60rem*/
    }
}


/* home-hero 
=============================== */

.home-hero {
    background-image: url(img/hero-bg.jpg); /*add background picture*/
    background-size: cover; /*stops image tiling*/
    background-position: center; /*centers image*/
    padding: 10em 0; /*10em top&bottom, 0 left&right */
    color: #FFF;
}

@media (min-width: 60rem) {
    .home-hero {
        height: 100vh; /*home-hero occupies all of the screen when width>60rem*/
        padding-top: 35vh; /*keep home-hero centered when media kicks in*/
    }
}

/* home-about
================================= */

.home-about-textbox {
    background-color: #232323;
    padding: 3em;/*add padding to the textbox*/
    width: 110%;/*make it occupy the whole screen width*/
    margin-left: -5%;/*decrease the margin by 5% fo compensate for 110% width*/
    line-height: 1.5em; /*changes spacing between lines within the paragraph*/
    outline: 2px solid #00ff6c; /*just like a border, but allows for offsetting to create desired effect*/
    outline-offset: -1.75em;
    color: #FFF;/*color all text white*/
    position: relative;/*position relative, so we can make the h1 inside it absolute and offset it where we need it to go*/
}

.home-about-textbox h1 {
    color: #12c25f;/*override white color (line 167) make title green*/
    position: absolute; /*having textbox relative and the h1 inside it absolute, we can now move it to where we want it*/
    
    /*this is a trick to center something that has absolute positioning
    the left 50% style makes the title move to the center of the screen (50%)
    however, we don't want the title to start at the 50% mark, we want the center of the title to be in the center of the page
    in comes transform: translateX(-50%), pushing it back 50% of the current positioning, after the first 50% are applied
    this centers the title where we want it*/
    left: 50%;
    transform: translateX(-50%);

    top: .75em; /*align the h1 with the textbox outline*/
    background: #232323; /*give it the same background color as the textbox. Stops outline from striking-through*/
    padding: 0 .25em;/*0 top&bottom, .25em left&right, outline disappears further from title*/
}

@media (min-width: 25rem) { /*media query to stop h1 in about from overlapping with the text*/
    h1 {
        font-size: 1.75rem;
    }

    .home-about-textbox h1 {

        /*neat trick I found
        these two attributes force the title to stay in the same line*/
        white-space: nowrap;
        overflow: hidden;

        top: .7em;
        padding: 0 1em;
        color: white;
    }
}

@media (min-width: 60rem) { /*make everything bigger when width reaches 60rem, including adding the image and offsetting the textbox*/
    h1 {
        font-size: 2rem;
    }

    .home-about-textbox h1 {
        top: .5em;
        left: 3rem;
        height: 1em;
        word-wrap: break-word;
        transform: translateX(0);
        align-content: center;
    }

    .home-about {
        background-image: url(img/bacalhau03.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        padding: 5em;
    }

    .home-about-textbox { /*changes to the textbox to make everything render correctly at 60rem*/
        width: 50%;
        margin-left: -2.5%;
        top: -9em;
        text-align: left;
        box-shadow: 0 0 4em 0 rgba(0,0,0,.5); /*adds shadow around it */
    }
}


/* home-about
================================= */

.portfolio {
    margin: 3em 0 0;
}

.port-item {
    margin: 0;
    position: relative; /*again, to be able to move other things on top of the port-item*/
    width: 100%;
}

.port-item img { 
    display: block; /*stick images together*/
}

.port-desc {
    position: absolute;
    z-index: 100;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    background: rgba(0,0,0, .6); /*add shade*/
    padding-bottom: 2em;
}

.port-desc p {
    margin: 1em;
}

@media (min-width: 37rem) {
    .port-item {
        width: 50%;
        float: left;
    }
}

@media (min-width: 60rem) {
    .port-item {
        width: 33.333333334%;
        overflow: hidden;
    }

    .port-desc {
        transform: translateY(150%);
    }

    .port-item:hover .port-desc {
        transform: translateY(0%);
    }
}


/* CTA - Call to Action 
================================= */

.cta {
    background-color: #12c25f;
    background: rgba(0, 0, 0, .3);
    padding: 6em 0;
}


/* Footer 
================================= */

footer {
    background: #232323;
    color: #fff;
    text-align: left;
    padding: 5em 0;
}

footer p {
    margin-top: 0;
    line-height: 1.5em; /* make spacing between lines bigger, prettier*/
}

footer li:first-child { /*select the first child of the list and give it a nice bottom padding */
    padding-bottom: 1em;
}

footer li {
    line-height: 1.5em;
}