/* Importing the font*/
@import url('https://fonts.googleapis.com/css2?family=Ms+Madi&family=Source+Sans+Pro&display=swap');
/* 
font-family: 'Ms Madi', cursive;
font-family: 'Source Sans Pro', sans-serif; bold one
 */
/* CSS reset */
*,
*::after,
*::before{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}
/* link cursor custom */
a{
    cursor: url('pointer_pc_bg.png'),pointer;
}

/* Variables */

:root{
    --violet:rgb(83, 27, 116);
    --gold:rgb(207, 157, 28);
}

/* The body  */

body{
    min-height: 100%;
    width:100%;
    background: linear-gradient(-130deg,
    rgb(17, 1, 24),rgb(15, 1, 1),black);
    position: relative;
    overflow-x: hidden;
}

/* The navigation panel */
.nav{
    display:flex;
    height:3rem;
    min-width:calc(100vw - 50%);
    justify-content: center; 
}


.nav-item{
    margin:1rem 1rem;
    font-size:1.3rem;
    text-decoration: none;
    color:white;
    
}
.nav-item:hover{
    color:var(--gold);
    transform:scale(1.09);
    text-shadow:0 0 10px var(--violet);
}
#logo img{
    position: fixed;
    z-index:999; /* to have it over all content of the page*/
    left:0;
    height:5rem;
    width:5rem;
    transform-style: preserve-3d;
}
#logo img:hover{
   transform: rotateY(360deg);
   transition: transform 1000ms ease-in-out;
}
/* Tablet ranged */
@media screen and (min-width:435px) and (max-width:564px)
{
    .nav-item{
        margin:1rem 10px;
        font-size:1.2rem;
    }
    #logo img{
        height:3.6rem;
        width:3.6rem;
    }
}
/* Mobile screens */
@media screen and (max-width:432px){
    .nav{
        justify-content:center;
    }
    .nav-item{
      margin:1rem 5px;
      font-size:1rem;
    }
    #logo img{
        height:3.2rem;
        width:3.2rem;
    }
}

/* The home */

.Home{
    margin:4rem auto;
    height: 20rem;
    width:80%;
    /* background: var(--violet); */
    font-family: 'Source Sans Pro', sans-serif; 
    text-align: center;
    border-radius:10px;
    color:var(--gold);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
.heading h1{
    font-size:3rem;
}
.heading p{
    margin-top:10px;
    padding: 0 10px;
    font-size:1.5rem;
}

/* Adjusting home in Tablet range */
@media screen and (min-width:250px) and (max-width:556px){
    .Home,.Heroes,.About,.Feedback{
        height:22rem;
        margin-top:1rem;
        margin-bottom:2rem;
    }
    .heading h1{
        font-size:2.5rem;
    }
    .heading p{
        font-size:1rem;
    }
    .Heroes .infos p{
        font-size:1.15rem;
    }
    a{
        cursor: url('pointer_mob.jpg'),pointer;
    }
    
}


/* Heroes */
.Heroes{
    margin:1rem auto;
    height:400rem;
    width:95%;
    font-family: 'Source Sans Pro', sans-serif; 
    text-align: center;
    color:var(--gold);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

/* IRON MAN PART */
.Ironman{
    height:100%;
    width:100%;
    margin:2rem auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
    justify-content: center;

}
#stark1{
    background: url('./images/src/TonyStark.jpeg') no-repeat center/cover;
}
#stark2{
    background: url('./images/src/TonyStark1.jpg') no-repeat center/cover;
}
#stark3{
    background: url('./images/src/TonyStark2.jpeg') no-repeat center/cover;
}
/* THe cards and infos are almost same for all the heroes
which will be applied to all other divs too */

.cards,.infos{
    height:15rem;
    width:15rem;
    margin:1rem 2rem;
    border-radius:8px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.cards{
    position: relative;
    box-shadow:0 0 10px white inset,
    10px 10px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.cards::before{
    content:'';
    position: absolute;
    top:0;
    left:-300px;
    width:10rem;
    height:100%;
    background: rgba(231, 226, 226, 0.26);
    transform:skewX(45deg);
}
.cards:hover:before{
    left:350px;
    transition: 500ms;
}
.cards:hover{
    transform:scale(1.008);
}



.infos p{
    font-size:1.2rem;
}

/* The Captain America division */
/* The heroes have the same class thereby using one styling for each heroes making it easier to change and fix things  */
.Captain-America,
.Thor,
.Hulk,
.Black-widow,
.Black-Panther,
.Wanda,
.Vision,
.Bucky,
.Falcon,
.Strange,
.Spiderman,
.Antman,
.Marvel,
.Hawkeye,
.Fury,
.Warmachine{
    height:100%;
    width:100%;
    /* background: grey; */
    margin:2rem auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
    justify-content: center;

}
#cap1{
    background: url('./images/src/Cap3.jpg') no-repeat center/cover;
}
#cap2{
    background: url('./images/src/Cap1.jpg') no-repeat center center/cover;
}
#cap3{
    background: url('./images/src/Cap.jpg') no-repeat center center/cover;
}

/* Thor division */
#thor1{
    background: url('./images/src/Thor1.jpg') no-repeat center center/cover;
}
#thor2{
    background: url('./images/src/Thor4.jpeg') no-repeat center center/cover;
}
#thor3{
    background: url('./images/src/Thor.jpeg') no-repeat center/cover;
}

/* Hulk division */

#hulk1{
    background:url('./images/src/Hulk1.jpg') no-repeat center center/cover;
}
#hulk2{
    background:url('./images/src/Hulk.jpeg') no-repeat center center/cover;
}
#hulk3{
    background:url('./images/src/Hulk2.webp') no-repeat center center/cover;
}

/* Black widow division */

#widow1{
    background: url('./images/src/Widow1.jpeg') no-repeat center center/cover;
}
#widow2{
    background: url('./images/src/Widow.jpeg') no-repeat center center/cover;
}
#widow3{
    background: url('./images/src/Widow2.jpeg') no-repeat center center/cover;
}

/* Hawkeye Division */

#hawkeye1
{
    background: url('./images/src/Hawkeye.jpeg') no-repeat center center/cover;
}
#hawkeye2
{
    background: url('./images/src/Hawkeye1.jpg') no-repeat center center/cover;
}
#hawkeye3
{
    background: url('./images/src/Hawkeye2.jpeg') no-repeat center center/cover;
}

/* War Machine Division */

#warmachine1{
    background:url('./images/src/Warmachine1.jpg') no-repeat center center/cover;
}
#warmachine2{
    background:url('./images/src/Warmachine.jpg') no-repeat center center/cover;
}
#warmachine3{
    background:url('./images/src/Warmachine2.jpg') no-repeat center center/cover;
}

/* Wanda Division */

#wanda1{
    background:url('./images/src/Wanda1.jpg') no-repeat center center/cover;
}
#wanda2{
    background:url('./images/src/Wanda2.jpg') no-repeat center center/cover;
}
#wanda3{
    background:url('./images/src/Wanda.jpeg') no-repeat center center/cover;
}

/* Vision Divison */

#vision1{
    background:url('./images/src/Vision1.jpg') no-repeat center center/cover;
}
#vision2{
    background:url('./images/src/Vision.jpg') no-repeat center center/cover;
}
#vision3{
    background:url('./images/src/Vision2.jpg') no-repeat center center/cover;
}

/* Black Panther Division */

#panther1{
    background:url('./images/src/Panther2.jpg') no-repeat center center/cover;
}
#panther2{
    background:url('./images/src/Panther.jpeg') no-repeat center center/cover;
}
#panther3{
    background:url('./images/src/Panther1.webp') no-repeat center center/cover;
}

/* Falcon Division */


#falcon1{
    background:url('./images/src/Falcon1.jpg') no-repeat center center/cover;
}
#falcon2{
    background:url('./images/src/Falcon.jpeg') no-repeat center center/cover;
}
#falcon3{
    background:url('./images/src/Falcon2.jpeg') no-repeat center center/cover;
}

/* Winter Soldier Division */

#bucky1{
    background:url('./images/src/Bucky1.jpg') no-repeat center center/cover;
}
#bucky2{
    background:url('./images/src/Bucky2.jpg') no-repeat center center/cover;
}
#bucky3{
    background:url('./images/src/Bucky.jpeg') no-repeat center/cover;
}

/* Doctor Strange Division */

#strange1{
    background:url('./images/src/Strange2.jpg') no-repeat center center/cover;
}
#strange2{
    background:url('./images/src/Strange.jpg') no-repeat center center/cover;
}
#strange3{
    background:url('./images/src/Strange1.jpg') no-repeat center/cover;
}

/* Spiderman P.P Division */

#parker1{
    background:url('./images/src/Parker1.jpg') no-repeat center center/cover;
}
#parker2{
    background:url('./images/src/Parker2.jpeg') no-repeat center center/cover;
}
#parker3{
    background:url('./images/src/Parker.jpg') no-repeat center/cover;
}

/* Captain Marvel division */

#marvel1{
    background:url('./images/src/Marvel2.jpg') no-repeat center center/cover;
}
#marvel2{
    background:url('./images/src/Marvel.jpg') no-repeat center center/cover;
}
#marvel3{
    background:url('./images/src/Marvel1.jpg') no-repeat center/cover;
}

/*Ant-Man division */

#antman1{
    background:url('./images/src/Antman1.jpg') no-repeat center center/cover;
}
#antman2{
    background:url('./images/src/Antman.jpeg') no-repeat center center/cover;
}
#antman3{
    background:url('./images/src/Antman2.jpg') no-repeat center/cover;
}

/* Fury Division */

#fury1{
    background:url('./images/src/Fury.jpg') no-repeat center center/cover;
}
#fury2{
    background:url('./images/src/Fury2.jpg') no-repeat center center/cover;
}
#fury3{
    background:url('./images/src/Fury1.jpg') no-repeat center/cover;
}

/* About section */
.About{
    margin:2rem auto;
    width:88%;
    height:15rem;
    box-shadow: 10px 10px 20px rgba(29, 28, 28, 0.5);
}

/* Feedback section */
.Feedback{
    margin:2rem auto;
    width:88%;
    height:10rem;
    box-shadow:10px 10px 20px rgba(29, 28, 28, 0.5);
}

.feedback-form{
    display:block;
    margin:1rem auto;
}
.form-control{
    display:block;
    width:100%;
    text-align: center;
    margin:5px auto;
    padding:2px;
}
label{
    display: flex;
    align-items: center;
    font-size:1.2rem;
    margin:10px 10px;
}
input[type="text"],input[type="email"]{
    width:100%;
    background: transparent;
    margin-left:10px;
    color:var(--gold);
    font-size:1.2rem;
    border:2px solid var(--violet);
    border-radius: 5px;
}
input[type="text"]:focus,input[type="email"]:focus{
    border:2px solid greenyellow;
}

textarea {
    font-size:1.2rem;
    min-height: 100px;
    background: transparent;
    border:2px solid var(--violet);
    color:var(--gold);
    width: 100%;
    border-radius: 5px;
    margin:0 auto;
    resize: vertical;
}
.btn{
    font-size:1.2rem;
    width:100%;
    text-align: center;
    color:black;
    border-radius: 5px;
    border:2px solid var(--violet);
    background: var(--gold);
    cursor: pointer;
}

/* FOOTER PART */
.Footer{
    height:3rem;
    width:88%;
    margin:1rem auto;
    box-shadow: 10px 10px 20px rgba(29, 28, 28, 0.5);
}
.Footer a{
    text-decoration: none;
}