/* root styling so all text will be white and scrolling set to smooth */
html {
    color: #fff;
    scroll-behavior: smooth;
}

/* You'll see some backgorund colors commented out, I use it to know where exactly I'm styling, max width will define the max width size the website content will occupy. w3 schools link to gradient https://www.w3schools.com/cssref/func_linear-gradient.php */
body {
    /* background-color: #282828; */
    font-family: "Red Hat Mono", sans-serif;
    margin: 0 auto;
    max-width: 1120px;
    background: linear-gradient(0deg, #111 60%, #9d00ff 100%);
}

/* head has a display flex, justify content will style the row since this is flex default, we could change it by flex direction but we are not doing it here, so space between will split the items and set them next to the edges. align items will position the item vertically in its row and padding adds space inside the element, 30px vertical and 15px horizontal.  */
.head {
    /* background-color: blue; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 15px;
}

.head .logo {
    /* background-color: aqua; */
    width: 200px;
    height: 65px;
}

/* menu flex, no flex direction again so it will be positioned side to side horizontally. */
.head .menu ul {
    /* background-color: red; */
    display: flex;
    font-family: "Raleway", sans-serif;
}

/* text transform uppercase will transform font to capitals whatever I wrote in html */
.head .menu li a {
    font-size: 18px;
    text-transform: uppercase;
    padding: 10px 20px;
    transition: 0.2s;
}

/* :hover will change tag a layout when I scroll over this item. In this case its background will become purple and its color white, border radius 50px will add rounded corners to this element*/
.head .menu li a:hover {
    background-color: #b46af1;
    color: #fff;
    border-radius: 50px;
}

/* I calculated the position min height by 89vh so I get 11vh view of new page and minus 125px which is the pxs sum of padding used in head 30px*2 + logo height 65px */
.home {
    /* background-color: green; */
    display: flex;
    min-height: calc(89vh - 125px);
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

/* display flex, flex direction column so I will position all inside class info by vertical columns, letter spacing will improve readability. */
.home .info {
    /* background-color: black; */
    display: flex;
    flex-direction: column;
    gap: 15px;
    letter-spacing: 2px;
    padding: 0 15px;
    max-width: 50%;
}

.home .info h2 {
    font-family: "Raleway", sans-serif;
    font-size: 45px;
    margin-bottom: 20px;
}

.home .info p {
    font-family: "Raleway", sans-serif;
    font-size: 24px;
    margin-bottom: 10px;
}

.home .info .social-media {
    /* background-color: orange; */
    display: flex;
    gap: 20px;
}

/* I decided to have a rounded border radius around the rounded social links icons so I used border width, style and color by calling border and a 50% vorder radius so it will basically be a circle. transition used as I have a hover coming up next and this will get us a smooth transtion */
.home .info .social-media a i {
    border: 1px solid #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 10px;
    text-align: center;
    font-size: 28px;
    transition: 0.3s;
}

/* hover to get the website accent color plus scale it in 1.1, so it gets just 10% bigger when hover is called */
.home .info .social-media a i:hover {
    color: #b46af1;
    border: 1px solid #b46af1;
    transform: scale(1.1);
}

/* rounded profile picture to follow website standards */
.home .container-pic .pic {
    /* background-color: red; */
    max-width: 450px;
    border-radius: 50%;
}

.home .container-pic img {
    width: 100%;
    border-radius: 50%;
}


/* The :after pseudo-element creates a small invisible box at the end of class home, and the content property fills that box with my arrow image. Because it uses absolute position, I can place it exactly where I want inside the section, and animate it using the downarrow keyframes so the arrow moves smoothly up and down. */
/* The position Property - https://www.w3schools.com/css/css_positioning.asp
Content Property - https://www.w3schools.com/cssref/pr_gen_content.php
Pseudo-elements - https://www.w3schools.com/css/css_pseudo_elements.asp 
 */
.home:after {
    content: url('../images/seta.png');
    position: absolute;
    max-width: 50px;
    bottom: 20px;
    left: 47%;
    animation: downarrow 0.8s infinite alternate ease-in-out;
}

@-webkit-keyframes downarrow {
    0% { -webkit-transform: translateY(0); 
    opacity: 0.1; }
    100% {-webkit-transform: translateY(0.5em);
    opacity: 0.5; }
}

.title {
    text-align: center;
    padding: 40px 0;
    font-family: "Press Start 2P", sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    margin-top: 80px;
}

.title-info {
    font-size: 12px;
}

/* display grid 3 columns and 2 rows defined */
.container-pro {
    background-color: #9d00ff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.container-pro .project a img {
    display: grid;
    transition: 0.3s;
}

/* opacity used so user know what theyre about to select */
.container-pro .project a:hover img {
    opacity: 0.7;
}

/* decided to use grid in footer as well. In the left side I positioned my logo by the top and social media links below. By the right side I created a nav menu with a ul and attibuted images to these li's.  */
.foot {
    font-family: "Raleway", sans-serif;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 100px 0 20px;
}

/* hard coded logo width so it has always same width it doesn't matter whats the responsive. */
.foot .left-side .foot-logo img {
    /* background-color: aqua; */
    width: 200px;
    transition: 1s;
}

.foot .left-side .foot-logo img:hover {
    border: 1px solid #9443d8;
    border-radius: 10px;
}

.foot .social-foot {
    margin: 20px 30px;
}

.foot .social-foot a {
    padding: 0 10px;
    font-size: 25px;
    transition: 0.3s;
}

.foot .social-foot a:hover {
    transform: scale(1.2);
    color: #b46af1;
}

.foot nav h4 {
    font-family: "Press Start 2P", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    margin: 26px 0 0 10px;
    display: flex;
    justify-content: flex-start;
}

.foot nav ul {
    /* background-color: brown; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* I assigned here specific values for margin each side. In Css it works always clockwise starting at the top so in this case margin left will be 20px and else 10. */
.foot nav ul li a {
    /* background-color: blue; */
    display: flex;
    align-items: center;
    margin: 10px 10px 20px 10px;
    gap: 10px;
}

.foot nav ul li a:hover {
    color: #b46af1;
    transition: 0.2s;
    transform: scale(1.05);
}

.foot nav ul li a img {
    height: 50px;
    width: 100px;
}

.foot nav ul li a p {
    font-size: 12px;
}

.foot .footer-center {
    grid-column: 1 / -1; /* span both columns */
    text-align: center;
    margin-top: 20px;
}

.foot .footer-center a {
    color: #444;
    transition: 0.3s;
}

.foot .footer-center a:hover {
    color: #777;
}