/*
Theme Name: Portfolio
Theme URI: https://wordpress.org/themes/portfolio/
Description: New portfolio site
Version: 1
Tags: Multi-Column, Repsonsive, Bootstrap
*/

/* --------------------------------------------------------------------- */
/* Variables                                                             */
/* --------------------------------------------------------------------- */
:root {
	/* Colors */
	--primary-clr: ;
	--primary-shade-clr: ;
	--secondary-clr: ;
	--secondary-shade-clr: ;
	--tertiary-clr: ;

	--black-clr: black;
	--white-clr: white;

	/* Font sizes */
	--font-100: clamp(24px, 1.5vw, 64px);
	--font-200: ;
	--font-300: ;
	--font-400: ;
	--font-500: ;

	/* Button hover colors */
	--primary-hover-clr: ;
	--secondary-hover-clr: ;
}

/* --------------------------------------------------------------------- */
/* Browser resets                                                        */
/* --------------------------------------------------------------------- */
/* html {
    height: 100%;
}

body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
} */

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    /* overflow-x: auto; */
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

a {
	text-decoration: none;
}

/* --------------------------------------------------------------------- */
/* Utilities                                                             */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* Header                                                                */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* NEW PORTFOLIO STYLES                                                  */
/* --------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --light-blue-clr: #91BBF2;
    --mild-blue-clr: #0367A6;
    --dark-blue-clr: #035AA6;
    --gray-clr: #858585;

    --green-clr: green;

    --text-blue-gradient-clr: linear-gradient(var(--light-blue-clr), var(--dark-blue-clr));
    --card-blue-gradient-clr: linear-gradient(to bottom right, rgba(145, 187, 242, 0.7), var(--original-clr));

    --test-clr: rgba(1, 21, 38, 0.7);
    --original-clr: rgba(3, 90, 166, 0.7);


    --best-blue-gradient: linear-gradient(90deg, #1CB5E0 0%, #000851 100%);
    --mello-gradient: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%);
    --purple-1-gradient: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);

    --green-gradient: linear-gradient(90deg, #9ebd13 0%, #008552 100%);
    --purple-gradient: linear-gradient(90deg, #A8C0FF 0%, #3F2B96 100%);


    --new-green-clr: #90EE90;
    --test-gradient: linear-gradient(90deg, #90EE90 0%, #008552 100%);
}

html {
    height: 100vh;
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

#hero__section {
    height: 100vh;
    background-image: url('images/code-image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background-color: #28282B; */
    box-sizing: border-box;
}

#hero__section:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
}

.main-content {
    padding: 0 12px;
    z-index: 1000;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    text-align: center;
    transform: translate(-50%, -50%);
}

.greeting {
    margin: 0;
    color: var(--light-blue-clr);
}

.name {
    margin: 0;
    font-size: 64px;
    font-weight: 300;
    letter-spacing: 1rem;
}

.description {
    color: var(--gray-clr);
}

.description p:first-child {
    font-size: 26px;
    margin: 0;
}

.description p:nth-child(2) {
    margin-top: 0;
    font-size: 16px;
}

.space-around {
    margin-inline: 1rem;
}

.button-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 1rem;
    margin-top: 2rem;
}

.btn-theme--1 {
    padding: 8px 16px;
    text-decoration: none;
    color: var(--dark-blue-clr);
    border: 1px solid var(--dark-blue-clr);
}

.vertical-text {
    display: none;
    margin: 0;
    font-size: 160px;
    color: white;
    font-weight: 300;
    position: relative;
    background-image: var(--text-blue-gradient-clr);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 10;
    transform: rotate(-90deg);
    position: absolute;
    left: -225px;
    bottom: 40%; 
}

.vertical-text-mobile {
    margin: 0;
    font-size: 160px;
    color: white;
    font-weight: 300;
    position: relative;
    background-image: var(--text-blue-gradient-clr);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 10;
    transform: rotate(-90deg);
    position: absolute;
    left: -130px;
    bottom: 40%;
}


/***********************************************/
/* Project Cards                              */

.project__container {
    padding-top: 2rem;
    /* max-width: 1200px; */
    display: grid;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
}

.horizontal__card {
    margin-inline: auto;
    height: 220px;
    width: 74%;
    /* max-width: 600px; */
    border-radius: 20px;
    position: relative;
    box-shadow: 5px 5px 8px rgba(0,0,0,0.3);
    overflow: hidden;
    z-index: 10;
}

.horizontal__card h1 {
    color: rgb(255, 240, 240);
    font-size: 32px;
}

.horizontal__card img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 20px;
  }

/**** Hover states ****/
.horizontal__card:hover .overlay--1 {
    opacity: 0%;
}

.horizontal__card:hover .overlay--2 {
    opacity: 0%;
}

.horizontal__card:hover .overlay--3 {
    opacity: 0%;
}

.horizontal__card:hover .content {
    opacity: 0%;
}

.horizontal__card:hover .vue-icon {
    opacity: 0%;
}

.horizontal__card:hover .wp-icon {
    opacity: 0%;
}

.horizontal__card:hover .react-icon {
    opacity: 0%;
}

.overlay--1 {
    background: var(--test-gradient);
    transition-duration: 300ms;
}

.overlay--2 {
    background: var(--purple-gradient);
    transition-duration: 300ms;
}

.overlay--3 {
    background: var(--best-blue-gradient);
    transition-duration: 300ms;
}

.overlay {
    z-index: 1;
    height: 220px;
    width: 100%;
    background-color: transparent;
    position: absolute;
    top: 0;
    border-radius: 20px;
}

.content {
    position: absolute;
    top: 30px;
    left: 50px;
    z-index: 10;
    font-family: 'Inter';
}
  
.vue-icon,
.wp-icon,
.react-icon {
    position: absolute;
    top: 0;
    transform: rotate(-12deg);
    right: -8rem;
    color: lightgray;
    font-size: 400px;
    z-index: 20;
    opacity: 40%;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: rgb(255, 240, 240);
    z-index: 100;
}

.side__panel {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 2rem;
    z-index: 100;
    color: rgb(255, 240, 240);
}

.side__panel p {
    font-size: 56px; /* 64px */
    margin: 0;
    opacity: 20%;
}

.mobile-card {
    padding: 10px 10px 0 10px;
    background: linear-gradient(to bottom right, #dbdbdb, #a2a1a1);
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.mobile-heading {
    text-align: center;
}

.mobile-heading p {
    font-size: 14px;
}

.mobile-body {
    padding: 0 10px 0 10px;
}

.mobile-body h3 {
    margin-bottom: 1rem;
}

/* .mobile-img {
    position: relative;
    z-index: 10;
    height: auto;
    width: 100%;
} */

.screen-images {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    width: 350px;
    margin: 0 auto;
}

.screen-images img {
    width: 30%;
}

.links {
    padding: 1rem 0;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.mobile__page {
    padding-top: 2rem;
}

/* .mobile__page .container {
    position: relative;
    z-index: 10;
    transform: translateY(5%);
} */
/* --------------------------------------------------------------------- */
/* About | PAGE                                                          */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* News | PAGE                                                           */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* Stallions | PAGE                                                      */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* Contact | PAGE                                                        */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* Footer | partial                                                      */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* Media queries                                                         */
/* --------------------------------------------------------------------- */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
    .description p:first-child {
        font-size: 32px;
        margin: 0;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }

@media (min-width: 875px) {
    .project__container {
        margin-left: 200px;
        grid-template-columns: repeat(2, 1fr);
    }

    .vertical-text {
        display: block;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .side__panel {
        display: block;
    }

    .horizontal__card {
        height: 300px;
        max-width: 600px;
    }

    .horizontal__card img {
        height: 300px;
    }

    .overlay {
        height: 300px;
    }

    .mobile-card {
        margin: 0;
    }

    .mobile__page {
        padding-top: 8rem;
    }

    .project__container {
        padding-top: 4rem;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { }