styles.css

/* body structured as a box */
 *,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

/* setting custom properties */
:root { 
/* font-family */
   --ff-primary: 'Source Sans Pro', sans-serif;
   --ff-secondary: 'Source Code Pro', monospace;
/* intencity of color */
    --fw-reg: 500;
    --fw-bold: 900;

    --clr-light: #fff;
    --clr-dark: #303030;
    --clr-accent: #16e0bd;
/* font-sizes */
    --fs-h1: 3 rem;
    --fs-h2: 2.25 rem;
    --fs-h3: 1.25 rem;
    --fs-body: 1 rem;
} 

/* if the screen rezises then fonts and everything will resize as well */
@media(max-width: 640px) {
    :root {
        --fs-h1: 4.5 rem;
        --fs-h2: 3.75 rem;
        --fs-h3: 1.5 rem;
        --fs-body: 1.125 rem;
    }
}

header {
    width: 100%;
    overflow: hidden;
}

/* menu with buttons*/

.menu {
    width: 100%;
    height: 100%;
    margin: none;
}
     
.menu ul{
    text-align: right;
    float: right;
    margin: none;
    background: var(--clr-accent);
    width: 100%;
    
}
     
.menu li {
    display: inline-block;
    padding: none;
    margin: 0 8px;
}
     
.menu li a, .menu li span {
    display: inline-block;
    padding: 0 24px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
    border-radius: 12px;
}
     
.menu li a {     
    color: var(--clr-dark);
}
     
.menu li:hover a, .menu li span{
    background: var(--clr-dark);
    color: var(--clr-light);
    border-left: 1px solid var(--clr-dark);
    text-decoration: none;
    
}
/* Responsive navigator menu */

  
  @media screen and (max-width: 640px) {
    
    .menu li {
      display: list-item;
      right: 0;
      top: 0;
      position: relative;
    }
   
  }
  
  
/* styling Links in the header */
.dropdown {
    float: left;
    overflow: hidden;
}
  
.dropdown .dropbtn {
    font-size: 16px;  
    border: none;
    outline: none;
    color: var(--clr-dark);
    padding: 0em 24px;
    background-color: inherit;
    margin: 0 8px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
}
  
.menu a:hover, .dropdown:hover .dropbtn {
    background: var(--clr-dark);
    color: var(--clr-light);
    border-left: 1px solid var(--clr-dark);
    text-decoration: none;
    border-radius: 12px;
}
  
.dropdown_content {
    display: none;
    position: absolute;
    background-color: var(--clr-light);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
}
  
.dropdown_content a {
    float: none;
    color: var(--clr-dark);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    border-radius: 12px;
    font-weight: bold;
}
  
.dropdown_content a:hover {
    background-color: var(--clr-accent);
    color: var(--clr-dark); 
    border-radius: 12px;
}
  
.dropdown:hover .dropdown_content {
    display: block;
    border-radius: 12px;
    margin: 0 8px;
    color: var(--clr-dark); 
}

.icon {
    float: right;
    color: var(--clr-dark);
    margin-right: 2px;
}


body {
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-style: var(--fs-body);
    line-height: 1.6;
    padding: 0px;
}

/* toggle */
.dark-mode {
    background-color:#941e59;
    color: var(--clr-light);
}

.lightbulb {

    margin-right: 10px;
    cursor: pointer;
    outline: none;
    color: var(--clr-dark);
    background-color: var(--clr-accent);
    border: none;
    box-shadow: none;
    transform: rotate(20deg);
}

.lightbulb:hover {color: yellow;}

.lightbulb:active {
  color: var(--clr-light);
}


 ul{
    padding: 0;
    list-style: none;
} 

strong {
    font-weight: var(--fw-bold);
}

section {
    padding: 80px 32px;
}

img {
   display: block;
   max-width: 100%;
   border-radius: 10px;
   border: 1px solid;
   padding: 5px;
   box-shadow: 5px 10px #888888;
}


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); }


/* 
Intro section */

.intro {
    position: relative;
   
}
@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 16px;
        grid-template-areas: 
            "img title"
            "img subtitle";
        grid-template-columns: min-content max-content;
    }
    
    .intro_img {
        grid-area: img;
        min-width: 250px;
        position: relative;
        z-index: index 2;
    }  
      
    .section_subtitle__intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -24px;
        width: calc(100% + 1.5em);
    }
}



.section_title {
  margin-bottom: 0.280px;
}

.section_title__intro {
    font-weight: var(--fw-reg);
    justify-content: center;
}

strong { font-weight: var(--fw-bold) }

.section_title__intro strong {
    display: block;
}
  
.section_subtitle {
    margin: 0;
    font-size: var(--fs-h3);  
}

.section_subtitle__intro, 
.footer_message {
    background: var(--clr-accent);
    font-family: var(--ff-secondary);
    margin-bottom: 0.280px;
    margin-top: 0.280px;

} 
 /* About Me section */

.about_me {
    background-color: var(--clr-dark);
    background-image: url("https://1d59b73swr1f1swu2v451xcx-wpengine.netdna-ssl.com/wp-content/uploads/2016/09/Elephant-Trunk_Surya_Deepak2-720x522.jpg");
    background-size: cover;
    color: var(--clr-light);
    text-align: center;
    background-blend-mode: multiply;
}


.section_title__about {
    color: var(--clr-accent);
    position: relative;
}

.section_subtitle__about {
    text-align: center;
}

.section_title__about::after,
.section_subtitle__about::after {
    content: '';
    display: flex;
    width: 32px;
    height: 1px;
    margin: 8px auto 16px;
    background: var(--clr-light);
    opacity: 0.25;
}

.background {
    margin-bottom: 64px;
    
}

.me {
    max-width: 500px;
    margin: 0 18px;
    padding: 18px;
    text-align: justify;
}

@media (min-width: 800px) {
    .background {
        display: flex;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}
 

.btn {
    display: inline-block;
    padding: 8px 24px;
    background: var(--clr-accent);
    color: var(--clr-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    transition: transform 200ms ease-in-out;
    border-radius: 12px;
    margin-top: 32px;
    margin-bottom: 48px;
}

.btn:hover {
    transform: scale(1.1);
    background: var(--clr-light);
    color: var(--clr-dark);
    border-radius: 12px;
}


/* My Projects section */
.my_work {
    background-color: var(--clr-accent);
    color: var(--clr-dark);
    text-align: center;
}

.section_subtitle__work {
    color: var(--clr-dark);
    margin-top: 16px;
    margin-bottom: 32px;
}

.section_title__work::after,
.section_subtitle__work::after {
    content: '';
    display: flex;
    width: 32px;
    height: 1px;
    margin: 8px auto 16px;
    background: var(--clr-dark);
    opacity: 0.25;
}

.portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    border: none;
    border-radius: 12px;

}

.portfolio_item {

    background: var(--clr-dark);
    overflow: hidden;
    max-width: 100%;
    border-radius: 10px;
}

.portfolio_img {
    width: 85%;
    height: 240px;
    transition: transform 750ms;
}

.portfolio_img:hover {
    transform: scale(1.2);
    opacity: 0.5;
   
}


/* 
Slideshow */

.essex {

    color: var(--clr-dark);
    margin-right: 10px;
}

.essex:hover {color: yellow;}

.essex:active {
  color: var(--clr-light);
}


[data-component="slideshow"] .slide {
  display: none;
  align-content: center;
  text-align: center;
  border-radius: 12px;
  height: auto;
  margin: 0 auto;
  max-width: 90%;
}

[data-component="slideshow"] .slide.active {
  display: block;
  width: 100%;
}

.text {
  
  font-size: 16px;
  margin-top: 5px;
  width: 100%;
  border-color: var(--clr-accent);
  border-bottom-style: solid;
  padding: 5px;
  font-family: open-sans,sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06rem;
  text-transform: uppercase;
  line-height: 1.4em;
  color: var(--clr-dark);
}


/* flip-boxes */
.flip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin: 0 auto;
    padding: 16px;
}


.flip_box {
    display: inline-block;
    background-color: transparent;
    width: 500px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    border-radius: 12px;
    
}
  
.flip_box_inner {
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    text-align: center;
    
}
  
.flip_box:hover .flip_box_inner {
    transform: rotateY(180deg);
}

.flip_box_front, .flip_box_back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    outline: 2px dotted var(--clr-light);
    outline-offset: -20px;
  }

.flip_box_front {
    background-color: var(--clr-dark);
    color: var(--clr-light);
    display: flex;
    justify-content: center;
    flex-flow: column;
    font-size: 1.5rem;
    overflow: auto;
}

.flip_box_back {
    background-color: var(--clr-accent);
    color: var(--clr-dark);
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    flex-flow: column;
    font-size: 1rem;
    overflow: auto;
}
 .flip_contact,
 .flip_link {
     color: var(--clr-dark);
     overflow: auto;
 }




.footer_message {
    text-align: center;
}


.copyright {
font-size: 14px;
color: var(--clr-dark);
text-align: center;
}