/* DECLARING VARIABLES */

:root {
    --ff-main: monospace;
    --fs-title:3rem;
    --fs-body: 1rem;
    --fs-h1: 2.75rem;
    --fs-h2: 2rem;
    --fs-h3: 1.5rem;
    --fw-bold: 900;
    --fw-med:700;
    --fw-reg:300;

    --heading-color: rgb(235, 228, 228);
    --accent-color: rgb(145, 211, 173) ;
    --main-bg-color: rgba(0, 0, 0, 0.795);
    --main-bg-lighter: rgba(49, 56, 52, 0.938);
}

/* GENERAL STYLING */

body {
    font-family: var(--ff-main);
    font-size: var(--fs-body);
    background: var(--main-bg-color);
    color:var(--heading-color);
    margin: 0 auto;
    line-height:1.5;
    padding: 0em 0em;

}

a {

    text-decoration: none;
    color:var(--heading-color);

}

section {
    
    margin: 1em 1em;
}

img {
    display:inline;
    max-width: 100%;
   
}

h1, h2, h3 {
    line-height:1;
    margin: 0;
}

h1{
    font-size: var(--fs-h1);
}

h2{
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

/* GENERAL STYLING DONE */


/* HEADER STYLING */

header {
    text-align: center;
}

.sub-logo {
    padding: 2em 0 0.125em 0;
    background-color: var(--main-bg-color);
    line-height: 0;
    flex-wrap:wrap;
    float:left;
}

.subnav-logo {
    width: 90px;
    margin: 0 auto;
    
}

.subnav-p{
    font-size:18px;
}

.nav {
    margin: 0 auto 0;
    padding: 60px 0;
    background-color: black;
}

.nav-list{
    margin:0;
    padding:2em 0 0.125em 0;
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.nav-items {
    list-style: none;
    padding: 1em 1em 0 1em;
}

.nav-link{
    font-size: var(--fs-h3);
    color:var(--heading-color);
    font-weight:var(--fw-bold);
}

.button {

    background:var(--main-bg-color);
    border: var(--accent-color) 4px solid;
    border-radius: 5em;
    padding: 0.25em 0.25em;
    color:var(--heading-color);
    text-decoration: none;
    font-size: 3em;
    font-weight:700;
    width:max-content;
}

.button:hover {
    background:var(--accent-color);
    color:var(--main-bg-color);
}

/* HEADER/NAVBAR STYLING DONE */



/* ABOUT ME STYLING START */

.section-title-about{
    padding-top: 150px;
}

.about-container {
    display:flex;
    justify-content: center;
    align-items:center;
    flex-direction:flex-start;
}

.section-div-about {
    margin:0 1em 0 1em;
    flex:45%;
}

.section-image{
    display:flex;
    flex:55%;
    justify-content:center;
    width:20vw;
    border-radius: 5em;
    border: var(--accent-color) 4px solid;
    margin-right:200px;
}

.section-title{
    color:var(--accent-color);
    font-size: var(--fs-title);
    margin: 1em 0 0 0;
}

.section-title span{
    display:inline-block;
}

.section-subtitle {
    background-color: var(--main-bg-lighter);
    color:var(--heading-color);
    border-radius:1em;
    margin: 1em 0;
    padding: 0.05em 1em;
    width:fit-content;
    font-size: var(--fs-h3);
    font-weight: var(--fw-med);
}

/* ABOUT ME STYLING ENDS */


/* MY WORK STYLING START */

.portfolio{
    display:flex;
    flex-wrap:wrap;
    flex-direction: row;
    justify-content: space-evenly;
}

.section-image-portfolio{
    border-radius:5em;
    margin:1em 1em;
    width: 30vw;
    border:var(--accent-color) 4px solid;
}

.portfolio-item:hover{
    opacity: 1;
}

.portfolio-item:hover .section-image-portfolio{
    transform:scale(1.25);
}

.portfolio-item{
    position: relative;
    opacity: 0.5;
}

.portfolio-item:hover {
    display:block;
}

.image-resize{
    width:450px;
    height:450px;
}

/* Portfolio styling ENDS */

/* Contact me styling starts */

.contact-me {
    margin:6em 0;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;

}

.section-title-contact{
    padding-left:250px;
}

.section-div-contact{
    margin: 0 1em 0 1em;

}

.section-subtitle-contact{
    background-color:var(--main-bg-lighter);
    color:var(--heading-color);
    font-size: var(--fs-body);
    padding-left:200px;
    padding-right:200px;
}

.section-div-contact a{
    margin: 0 2em;
}

.contact-info a{
    padding: 0 30px 0 30px;
    justify-content: space-between;
    border-radius: 5em;
    
}

.contact-info a:hover{
    background:var(--accent-color);
    color:var(--main-bg-color);
}

/* CONTACT ME STYLING ENDS */


/*MEDIA QUERIES START */

@media screen and (min-width:980px){
    :root {
        --fs-h1:4rem;
        --fs-h2: 3.25rem;
        --fs-h3: 2rem;
        --fs-title: 4rem;
        --fs-body: 1.125rem;
    }
}


/* Media queries for nav bar STARTS */

@media screen and (min-width:980px) {
    .sub-logo{
        padding: 2em 0 0 0;
        background-color: #020008;
        line-height:0;
        width:250px;
    }

    header{
        display:flex;
        align-items: stretch;
        background-color: #080808;
        justify-content: flex-start;
    }

    nav{
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: stretch;
        width: 100%;
    }

    .nav-list {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
      }
}

 /* Media queries for navbar ENDS */


 /* Media queries for about me STARTS */

@media screen and (min-width: 980px) {
    .about-container {
      flex-flow: row;
    }
  
    .section-about-image {
      width: 50%;
      height: 60%;
      margin-left:10%
      
    }
  }
  
  /* Media queries for about me ENDS */

  /* Media query for my work STARTS */

@media screen and (min-width: 980px) {
    .section-image-portfolio {
      width: 27vw;
    }
  }
  
  /* Media queries for my work ENDS */

  /* Media queries for Contact me STARTS */
@media screen and (min-width: 980px) {
    .contact-me {
      flex-flow: row;
    }
  
    .section-contact-info {
      margin: 8vw 1em 10vw 1em;
    }
  }
  
  /* Media queries for Contact me ENDS */