/* custom variables */
:root {
    --white: #fff;
    --dblue: #0d1238;
    --light: #d9d9ff;
    --iceblue: #a2d3ff;
    --ocean: #0061b5;
}


/* default styling */
html {
    /* set 1rem to 10px instead of native 16px to make it easier to calculate font-size values for the rest of the page (e.g. 1.6rem is 16px, 2.0rem is 20px, etc.) */
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    /* Sans Serif font stack is implemented to help select the best font for each type of computer operating system */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    /* set body font size to 1.75rem, which is 1.75x more than the font-size of 10px, making it 17.5px  */
    font-size: 1.75rem;
    line-height: 1.5;
    background: url(../img/oriental-tiles.png); 
    color: var(--white);
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 70%;
    min-width: 70%;
    border: 3px white solid;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.625rem;
    font-weight: 700;
    line-height: 1.1;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

h1 {
    /* 4rem = 40px (4 * 10px) */
    font-size: 4rem;
}

h2 {
    font-size: 3.5rem;
}

h3 {
    font-size: 3rem;
}

h4 {
    font-size: 2.5rem;
}

h5 {
    font-size: 2rem;
}

h6 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--ocean);
}

/* container */
.container {
    flex-direction: column;
    display: flex;
    width: 100%;
    margin: 0 auto;
    height: 75vh;

}
[data-display="show"] {
    display: flex;
}

[data-display="hide"] {
    display: none;
}

/* header */

header {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 10rem;
    padding: 1rem 0;
    background-color: var(--dblue);
    border-bottom: 5px solid var(--light);

}

header a {
    text-decoration: none;
    color:var(--white);
    background-color: var(--dblue);
    border: 1px solid var(--dblue);
    padding: 1rem;

}

header nav a:hover,
header nav a:focus {
    background-color: var(--iceblue);
    box-shadow: -10px 5px var(--light) ;
    transition: all 0.3s ease-in;
    color: var(--dblue);
}

nav {
    padding-right: 3rem;
}

.page-title {
    color: var(--iceblue);
    padding-left: 13rem;
}

/* flex */

.justify-space-between {
    justify-content: space-between;
}

.justify-space-around {
    justify-content: space-around;
}

.justify-center {
    justify-content: center;
}

.center {
    text-align: center;
    align-items: center;
}

.row {
    flex-direction: row;
    flex-wrap: wrap;
}

.column {
    flex-direction: column;
    flex-wrap: wrap;
}

/* main */
main {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

section {
    height: 100%;
    max-height: 70vh;
    background: var(--dblue);
}

.section-title {
    
}

/* hero */
.hero {
    /* display: flex; */
    padding: 5rem 0;

    border-bottom: var(--white) 1px solid;
    /* background: var(--dblue);
    box-shadow: -10px 0px 10px var(--dblue); */
}

.hero img {
    width: 300px;
    border-radius: 20px 20px 20px;
}

.hero-title {
    padding-right: 13rem;
}

.hero-title > * {
    padding: 3%;
}
.hero-title p {
    font-style: italic;
}

.hero h2 span {
    font-weight: bolder;
    color: var(--iceblue);
}

/* about me & contact */
.about-me, .contact {
    /* display: flex; */
    padding: 0 0 5rem;
    margin: 0 auto;
    /* height: 35rem; */
    border-bottom: var(--white) 1px solid;
    background: var(--white);
}

.about-me h3, .contact h3 {
    padding: 20px 0;
    color: black;
}

.about-me p, .contact p {
    color: #000;
    padding: 5%;
}


/* portfolio */
#featured {
    flex: 1 0 80%;
    max-width: 100%;
}
.portfolio h3 {
    flex: 1 0 20%;
}

.portfolio {
    /* display: flex; */
    margin: 0 auto;
    padding: 5rem;
    justify-content: flex-start;
    border-bottom: var(--white) 1px solid;
}
.port-card {
    flex: 1 0 33%;
    outline: 10px solid var(--dblue);
    margin: 0 2rem 5rem;
    max-width: 46%;
}

.port-card a:hover {
    color: var(--dblue);
    font-style: italic;
}

#featured .port-card-title {
    position: relative;
    top: 50%;
    background: var(--white);
}

.port-card-title {
    position: relative;
    top: 50%;
    background: var(--white);
    max-width: 50%;
    border: 5px solid var(--ocean);
    border-left: none;
}

#featured {
    background: no-repeat center url(../img/pexels-bithin-raj-2763927.jpg);
}

#project-1{
    background: no-repeat center url(../img/pexels-john-cahil-rom-2170473.jpg);
}

#project-2 {
    background: no-repeat center url(../img/pexels-matheus-natan-3394939.jpg);
}

#project-3{
    background: no-repeat center url(../img/pexels-rodrigo-souza-2531709.jpg);
}

/* portfolio hovers */
#featured:hover,
#project-1:hover,
#project-2:hover,
#project-3:hover {
    /* transition: 0.5s ease-in; */
    box-shadow: inset 0px 0px 25px var(--iceblue), 0 0 32px var(--iceblue);
}



/* footer */

footer {
    border-top: 5px solid var(--light);
    height: 5rem;
    background: var(--iceblue);
    color: var(--dblue);
    height: 10vh;
    max-height: 10vh;
}

footer a {
    text-decoration: none;
    color: white;
    font-weight: bolder;
}

footer a:hover {
    color: var(--dblue);
}

/* media queries */

@media screen and (max-width: 992px){
    .hero-title {
        padding-right: 0;
    }
    .about-me p {
        flex: 1 1 50%;
        max-width: 70%;
    }

    .contact p {
        flex: 1 1 50%;
        max-width: 70%;
    }

    #featured {
        flex: 1 1 70%;
        max-width: 70%;
    }

    .port-card-title {
        width: 40%;
    }
}

@media screen and (max-width: 768px) {
    .row {
        flex-direction: column;
    }

    .page-title {
        padding-left: 0;
    }

    .section-title {
        outline: none;
    }

    .center {
        text-align: left;
        align-items: flex-start;
    }

    footer p {
        text-align: center;
    }

    #featured,
    .port-card {
        width: 100%;
        height: 100%;
        min-width: 100%;
    }
}