*,::before,::after{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body {
    font-size: 1.5rem;
    font-family: 'Quicksand', sans-serif;
    background-color: #2f3131;
    color:white;
}
header{
    width:100%;
    min-height: 8em;
    /* border: 2px solid purple; */
    display:flex;
    justify-content: space-between;
    align-items: center;
    position:relative;
}


.logo-container{
    display: flex;
    margin-left: 0.3em;
    cursor: pointer;
}

#logo{
    display:block;
    width: 3.5em;
    
}

.logo-text-container{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border:1px solid gold; */
}
.logo-text-first{
    font-weight: 700;
    font-size:1.5em;
    width:min-content;
    /* border:1px solid green; */
    line-height: 1.1em;

}
.logo-text-second{
    font-weight: 400;
    font-size:0.9em;
    /* border:1px solid green; */
    line-height: 0.8em;

}
.hamburger-menu-container{
    margin-right: 0.3em;
    min-height: 2em;
    display:flex;
    flex-direction: column;
    justify-content: center;
    position:relative;
    cursor: pointer;
   
    /* border: 1px solid red; */
}


.hamburger, .hamburger::before, .hamburger::after {
    width:3em;
    height:0.4em;
    background-color: hsl(341, 86%, 57%);
    border-radius: 0.3em;
    transition: transform 0.8s; 
}

.hamburger::before {
    content:'';
    position:absolute;
    top:0em;
}
.hamburger::after {
    content:'';
    position:absolute;
    bottom:0em;
}

.hamburger-cross{
    height:0;
}
.hamburger-cross::before{
    transform: translateY(200%) rotate(45deg);
    
}
.hamburger-cross::after{
    transform: translateY(-200%) rotate(-45deg);
    
}


nav{
    position:fixed;
    display: block;
    height:100dvh;
    top:0;
    background: hsla(180, 2%, 14%, 0.95);
    padding:2em;
    overflow: hidden;
    left:-80%;
    z-index: 15;
    transition: left 1s;
    
}
nav>ul{
    list-style-type: none;
    
}
nav>ul>li{
    cursor: pointer;
    margin-top:2em;
    width:min-content;  
}

nav>ul>li:hover{
    color:hsl(341, 86%, 57%);
}

.nav-show {
    left:0;
}

.nav-underline{
    width: 3em;
    height:0.2em;
    border-radius: 1em;
    background-color: hsl(341, 86%, 57%);
    transition: transform 0.8s, width 0.8s;
    /* transform: translateX(30%); */
    /* transform: translateX(210%); */
}



main{
    width:100%;
    background-image: url("./images/blob2.svg");
    background-repeat: no-repeat;
    background-position: right top;
}
.left-container,.right-container{
       text-align: center;
}

.heading-text{
    font-size: 1.6em;
    font-weight: 700;
    padding:0em 0.3em;
}
.normal-text{
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.5em;
    padding:0em 0.3em;
}
.button-wrapper {
    width:100%;
    margin-top: 1em;
    display: flex;
    justify-content: center;

}
.pink-button{
    cursor: pointer;
    border:2px solid hsl(341, 66%, 42%);; 
    border-radius: 0.3em;
    padding:1em 2em;
    background-color: hsl(341, 86%, 57%);
    color:white;
    font-weight: 500;
    font-size: 0.8em;
    margin-left:1em;

}
.pink-button:hover{
    background-color: hsl(341, 86%, 40%);
    border:2px solid black; 
}
.pink-button:active{
    background-color: hsl(341, 86%, 35%);
}

.right-container{
    position: relative;
    min-height: 11em;
    margin-top: 1em;
}


.card-container{
    position:absolute;
    width:6.5em;
    height:9.2em;
    left:calc(50% - 2.92em);
    top:1.5em;
    /* border: 3px solid pink;  */
    
}

.card-back>img{
    width: 6.3em;
    display:block;  
}
#card-1{
    z-index:5;
    
}

#card-1,#card-2,#card-3,#card-4,#card-5 {
    transition: transform 1s;
}

.card-2-permanent-position{
    transform:  rotate(-20deg) translateX(-2em);  
}
.card-3-permanent-position{
    transform: rotate(-10deg) translateX(-1em);  
}
.card-5-permanent-position{
    transform: rotate(10deg) translateX(1em);  
}

.card-1-permanent-position{
    transform: rotate(20deg) translateX(2em); 
}

.show-card{
    transform:translateX(-3.5em) translateY(0.7em) scale(120%);
}

.stow-cards{
    transform:translateX(3.7em) scale(75%)
}

.front-back-container {
    position:relative;
    /* width: 7em;
    height:8em; */
    transform-style: preserve-3d;
    transition: transform 1000ms;
    /* border: 3px solid pink; */
}

.card-back{
    position:absolute;
    top:0;
    backface-visibility: hidden;
}

.card-front{
    transform: rotateY(180deg);
    /* background-color: brown; */
    height:9em;
    backface-visibility: hidden;
    border-radius: 5px;
    text-align: center;
}

.card-project>img {
    width:6.8em;
    border-radius: 0.3em;
}

.show-card > .front-back-container{
    transform: rotateY(180deg);
    /* height:9em; */
}

.footer-transition-curve{
    margin-bottom: -1%;
  
}

#wave {
    display:block;
}

footer{
    background-color: #232424;
    text-align: center;
    /* border: 3px solid greenyellow; */
}

.footer-flex {
    display:flex;
    justify-content:center;
    align-items: center;
    margin-top:0;
    /* border: 3px solid greenyellow; */
    width:100%;
    
}

.footer-left, .footer-center, .footer-right{
    /* border: 1px solid red; */
    width:5em;
    /* min-height:3em; */
    text-align: center;
    cursor: pointer;
    color:hsl(341, 86%, 57%);
    margin-bottom: 1em;
    /* padding: 0em 1em; */
}

.footer-left, .footer-center {
    border-right: 1px solid white;
}


.footer-left:hover, .footer-center:hover, .footer-right:hover{
    color:hsl(341, 86%, 45%);
}

.footer-left{
    text-align: right;
    padding-right: 0.8em;
}
.footer-contact{
    font-size: small;
    padding-bottom: 1em;
}

@media screen and (min-width: 730px){
    .logo-container{
        margin-left: 0.5em;
    }
    .hamburger-menu-container{
        display: none;
    }
    nav{
        display: block;
        height:auto;
        width: 60%;
        position: static;
        background:none;
        /* border: 3px solid white; */
        padding:0em;

    }
    nav>ul{
        display: flex;
        list-style-type: none;
        /* border: 2px solid greenyellow; */
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 0em 1em;
    }

    .nav-item{
        width: auto;
        min-height: 1em;
        text-align: left;
        cursor: pointer;
        /* border: 1px solid hotpink; */
        margin-top: 0em;
    }
    .nav-item:hover{
        color:hsl(341, 86%, 57%);
    }
    

    main {
        display:flex;
        justify-content: center;
        background-size: 35%;
        padding-bottom: 200px;
        margin-bottom: -200px;
        
        
    }
    .left-container,.right-container{
        width:40%;
        /* margin-left:3em; */
        /* border: 2px solid greenyellow; */
    }
    .normal-text, .heading-text{
        text-align: center;
        margin-left: auto;
    }

    .pink-button{
        padding:1em 1.5em;
    }
    .card-container{
        top:0;
        left:calc(50% - 1em);

        /* position:absolute;
    width:6.5em;
    height:9.2em;
    left:calc(50% - 2.92em);
    top:1.5em;
    border: 3px solid pink;  */
        
    }
    .card-back>img {
        width:7em;
    }
    .card-project>img {
        width: 7em;
        border-radius: 0.3em;
    }
}

@media screen and (min-width: 900px){
    .card-container{
        position:absolute;
        width:9.3em;
        height:13em;
        left:calc(50%-0.75em);
        top:-1em;
        /* border: 3px solid pink;  */
    }
    .card-back>img {
        width:9em;
    }

    .card-project>img {
        width: 9em;
        border-radius: 0.3em;
    }
    .card-front{
        height:12.8em;
    }
    .show-card{
        transform:translateX(-5.5em) translateY(0.7em) scale(120%);
    }
    
    .stow-cards{
        transform:translateX(5em) scale(75%)
    }
}