resume.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;700&display=swap');


:root {
    --body-bg: HSL(217, 16%, 94%);
    --primary-grey-100: #7c7c7c;
    --secondary-grey-200: #464658;
    --primary-black: #212529;

    --normal-margin: 1em;
    --small-margin: .5em;

    --medium-inc-padding: .5em;
    --medium-padding: .1em;

    --main-heading-color: #484848;
    --primary-text-color: #5d5d5d;

    --my-ac-color: #f5f5f5;
    --arrow-bg: #3b2124;
    --media-arrow-bg: #e5e9f0;
    --dbborder: none;
    --navbar-bg: #f8f9fa;

    --btn-bg: #be4bdb;
}
html{
    scroll-behavior: smooth;
}

.color-blk {
    color: var(--primary-black);
}
.footer-img-width{
    width: 40px;
    height: 40px;
}
.medium-padd{
    padding: .5em!important;
}
.normal-padd{
    padding: 1em!important;
}
.high-padd{
    padding: 2em!important;
}
.fwidth{
    width: 70px;
    height: 70px;
    border-radius: 3px;
}
.align-center{
    text-align: center;
}
.tempwidth{
  width: 400px;
  height: 400px;
}
.cross{
    transform: rotate(-45deg)!important;
    transition: all 800ms;
}
.cross2{
    transform: rotate(45deg)!important;
    transition: all 800ms;

}

.simple-anchor-btn {
    color: var(--my-ac-color);
    text-decoration: none;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;

}

body {
    background: var(--body-bg);
}

header {
    background: var(--navbar-bg);
    padding: var(--medium-padding);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar {
    font-family: 'Roboto', sans-serif;
    margin: var(--normal-margin);
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    /* border: 2px solid; */
    /* gap: 1em; */
    /* place-items: center; */
    z-index: 99;
}

#logo {
    /* border: 1px solid; */
    position: relative;
    /* z-index: 7; */
}

#logo-name {
    align-self: center;
    position: absolute;
    top: 50%;
    transform: translate(10%, -50%);
    font-weight: 600;
}

.links-protector {
    display: flex;
    place-self: center;
}

.nav-links {
    display: flex;
    gap: 1em;
    font-size: 16px;
    z-index: 10;
    justify-content: end;
    align-items: center;
}

.nav-links li a {
    text-decoration: none;
    color: var(--main-heading-color);
    font-weight: bold;
    display: flex;
    gap: 4px;
}

.nav-links li a:hover {
    text-decoration: underline;
}

.arrow .dnarw {
    width: 10px;
    height: 10px;
    /* background: black; */
    border: none;
    border-bottom: 2px solid var(--arrow-bg);
    border-left: 2px solid var(--arrow-bg);
    transform: rotate(-45deg);
    /* on click 45 deg kraychi */
}

.arrow .dnarw:hover {
    transform: rotate(45deg);

}

.myac {
    justify-content: center;
    place-self: center;

}

.myac .myac-btn {
    padding: .5em 1em;
    border-radius: 5px;
    font-weight: bold;
    background: transparent;
    border: 2px solid HSL(210, 10%, 14%);
    /* border: none; */
    /* color: var(--my-ac-color); */
    /* background: linear-gradient(orangered,yellow); */
}

.myac .myac-btn:hover {
    /* background: linear-gradient(to right,orangered,transparent,yellow); */
    color: rgba(125, 10, 233, 0.861);
    
}

/* hammer */
.hammer {
    display: none;
    max-width: 30vw;
    position: relative;
    z-index: 20;
    cursor: pointer;
    /* left: 4em; */
    /* width: fit-content; */
    /* border: 2px solid; */
}

.hammer .h {
    display: block;
    border: 2px solid;
    background: #0000;
    width: 30px;
    height: 1px;
    position: relative;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2px;
}

.h2,
.h3 {
    margin-top: 4px;
}

/* main content start  */

.container {
    margin: var(--normal-margin) .5em;
    color: var(--primary-black);
}
.main-container{
    margin: 0;
    margin-bottom: 2em;
}

.content {
    text-align: center;
    display: grid;
    place-items: center;
    cursor: context-menu;
}

.content .para,
.msg {
    margin-top: var(--normal-margin);
}

.content .msg {
    font-size: 35px;
    max-width: 750px;
}

.content .para {
    font-size: 18px;
    max-width: 750px;
}
.btn-down{
    margin-bottom: 1em;
}
.resume-btn .r-btn {
    font-size: 17px;
    margin-bottom: var(--normal-margin);
    border: none;
    font-weight: bold;
    background: transparent;
}


.simple-anchor-btn {
    border-radius: 2px;
    padding: .7em;
    background: var(--btn-bg);

}

.user-today {
    /* border: 2px solid; */
    position: relative;
    /* color: white; */
    /* when bg is added  */
    
}

.user-today::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #40c057;
    display: inline-block;
    border-radius: 100vmax;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: -1em;
}
.bgadd{
    margin: 0!important;
    padding: 1em 0;
    /* color: white; */
    /* background: url('bg/bookstore1.jpg') no-repeat; */
    background-position: center;
    background-size: cover;
}
.template-section{
    display: flex;
    place-items: center;
    color: #fffafa;
    padding: var(--medium-inc-padding);
    background: #9370db;
    background: url('bg/nightbg.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}
.template{
    padding: 1em;
    margin-bottom: var(--normal-margin);
}

.template-heading{
    font-size: 30px;
    margin-bottom: var(--normal-margin);
}
.template-para{
    font-size: 18px;
    margin-bottom: var(--normal-margin);
}
.select-template .select-btn{
    text-decoration: none;
    color: #fff3f4;
    font-weight: 600;
    background: var(--btn-bg);
    border-radius: 3px;
    padding: var(--medium-inc-padding);
    margin-bottom: 1em;
}
.template-themes{
    overflow-x: scroll;

}
.template-themes .theme-list{
    display: flex;
    align-items: center;
    gap: var(--medium-inc-padding);
}
.template-themes .theme-list li{
    max-width: 900px;

}

/* features section  */


.features{
    display: grid;
    place-items: center;
    background: #ffffff;
    margin-top: calc(var(--normal-margin) + 2em);
    padding: var(--normal-margin);
    text-align: center;
    cursor: context-menu;
}
.feature-heading{
    margin-bottom: calc(var(--normal-margin) + 2em);
    max-width: 600px;
}
.f-heading{
    font-size: 35px;
}
.f-items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}
.item-info{
    margin-top: var(--normal-margin);
}
.item-heading{
    color:#482aa0;
}

/* FAQS */
.mostFAQ{
    font-size: 23px;
}
.que-dnarw{
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    color: #482aa0;
}
.up-arw{
    transform: rotate(230deg);
}
.ans{
    display: none;
}
#FAQs{
    margin: 1em;
    /* background: white; */
    color: #141616;
}
#FAQs li{
    padding: 1em;
    border-bottom: 1px solid grey;
    cursor: context-menu;
}
.queset{
    display: flex;
    gap: .5em;
}

.queset .que{
    font-size: 17.7px;
}
.q-list .ans{
    font-size: 16px;
}
/* footer start */

.main-footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
}

.footer{
    background: #161616;
    border-radius: 10px;
    
}
.create-resume{
    padding: 1em;
    text-align: center;
}
.footer-resume{
    color: #f5f5f5;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}
.circle{
    display: inline-block;
    background: linear-gradient(to right,#00ccff,#6741d9);
    width: 35px;
    height: 35px;
    text-align: center;
    border-radius: 100vmax;
    position: relative;
    top: 10px;
}
.midarw{
    position: absolute;
    top: 35%;
    left: 40%;
    border-left:2px solid white;
    border-bottom:2px solid white;
    transform: rotate(45deg)!important;
}
.ontextside{
    /* top: 25%; */
    transform: rotate(180deg)!important;

}
.circle{
    background: linear-gradient(to right,#00ccff,#6741d9);
}
.social{
    margin-top: var(--normal-margin);
}
.social-msg{
    margin-bottom: var(--normal-margin);
    color: white;
}
 .ul-social{
    display: flex;
    gap: var(--normal-margin);
}
.ul-social li{
    border-radius: 4px;
}
.ul-social .s1{
    filter: brightness(0) saturate(100%) invert(63%) sepia(42%) saturate(3047%) hue-rotate(295deg) brightness(101%) contrast(101%);
}
.ul-social .s2{
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(170deg);
}
.ul-social .s3{
    filter: invert(20%) sepia(85%) saturate(5754%) hue-rotate(355deg) brightness(97%) contrast(122%);
}
.ul-social .s4{
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(200deg);
}

/* footer links */

.footer-links{
    /* outline: 2px solid lime; */
    display: flex;
    gap: 5em;
    margin-top: 2em;
    margin-right: 2em;
    flex-wrap: wrap;
}
.f-inner-link{
    color: white;
}
.f-link-heading{
    margin-bottom: 2em;
}
.f-inner-link a{
    color: rgba(245, 245, 245, 0.733);
    display: block;
    text-decoration: none;
    margin-bottom: 1em;
}
.f-inner-link a:hover{
    color: #482aa0;
}

/* copyright */
#copyright{
    margin-top: var(--normal-margin);
    color: white;
    padding: 1em 0;
    text-align: center;
    border-top: 2px solid #f5f5f5;
}

/* media query start  */
@media screen and (max-width: 884px) {
  
    .tempwidth{
      width: 250px;
      height: 250px;
    }
    .nav-links {
        display: block;
        /* border: 2px solid; */
        max-width: 100vw;
        position: absolute;
        top: calc(-170px + var(--medium-inc-padding));
        left: 50%;
        transform: translate(-50%, -50%);
        width: 55em;
        background: #212529;
        padding: 1em 0;
        overflow-x: hidden;
        transition: all 800ms;
    }

    .nav-links li a {
        padding: var(--medium-inc-padding);
        margin: var(--medium-padding) 0;
        color: #e5e9f0;

        /* border: 2px solid ; */
    }

    .nav-links li a:hover {
        background: #dddddd47;
    }

    .arrow .dnarw {
        border-bottom: 2px solid var(--media-arrow-bg);
        border-left: 2px solid var(--media-arrow-bg);
    }

    .myac .myac-btn {
        font-weight: bold;
        background: transparent;
        border: none;
        color: var(--my-ac-color);
        /* background: linear-gradient(orangered,yellow); */
    }
    .nav-links-add{
        top: calc(200px + var(--medium-inc-padding));
    }

    .hammer {
        display: block;
    }

    .content .msg{
        font-size: 29px;
    }
    .content .para{
        font-size: 17px;
    }
    .template-section{
      display: block;
    }
    .template-heading{
      font-size: 25px;
    }
.template-para{
  font-size: 17px;
}
.f-items{
    grid-template-columns: 1fr 1fr ;
}
    
}
@media screen and (max-width:500px) {
    .resume-btn .r-btn {
        font-size: 14px;
    }
    .f-items{
        grid-template-columns: 1fr;
    }
    .item-para{
        max-width: 365px;
    }
    .f-heading{
        font-size: 28px;
    }
    .main-footer{
        display: block;
    }
   .footer-links{
    gap: 2em;
   }
   .mostFAQ{
    font-size: 19px;
}
   .queset .que{
    font-size: 16px;
   }
   .q-list .ans{
    font-size: 14px;
   }
}
@media screen and (max-width:361px) {
  
    .content .msg {
        font-size: 26px;
    }

    .content .para {
        font-size: 17px;
    }
    .f-items{
        display: grid;
        grid-template-columns: 1fr;
    }
}