@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+US+Trad:wght@100..400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Poppins, Arial, Helvetica, sans-serif;
}

body {
    background-color: #303030;
}

/*Header Code*/
.header {
    width: 100%;
    height: 20%;
}

.navbar {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 60px;
    background-color: transparent;
    /*#252525*/
    display: flex;
    justify-content: space-between;
    transition: background-color 0.3s;
}

#logo,
#header-links,
#more-icon {
    margin: auto auto;
}

#logo {
    font-variant: small-caps;
    color: #f5deb3;
    /*B3CAF5*/
    font-weight: bold;
    font-size: 2.125rem;
    text-decoration: none;
}

#logo:hover {
    color: #B3CAF5;
    transform: scale(1.1);
}

#header-links {
    width: 22%;
}

#header-links a {
    font-size: 1em;
    text-decoration: none;
    color: wheat;
    font-weight: 500;
    margin-left: 5%;
    transition: 0.3s;
}

#header-links a:hover {
    color: #B3CAF5;
}

#more-icon {
    display: none;
    height: 25px;
    width: 25px;
}

/*Main Code*/
.main {
    width: 100%;
    height: 80%;
}

.content-container {
    background-color: white;
    height: 4000px;
}

/*landing-section*/
.landing-section {
    background-color: rgb(48, 106, 156);
    width: 100%;
    height: 100vh;
}

.landing-section-container {
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
}

.landing-1 {
    width: 50%;
    height: 75vh;
    border-radius: 15%;
    box-shadow: 40px 20px #293b5c, -40px -20px #B3CAF5;
    background-color: wheat;
    text-align: center;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.landing-1-container {
    height: 80%;
}

.job-title {
    line-height: 1;
}

.landing-1-container div,
.landing-1-container img,
.landing-1-container p {
    padding-bottom: 1em;
}

.landing-1-container h1 {
    font-variant: small-caps;
    font-size: 5em;
    color: rgb(48, 106, 156);
}

.landing-1-container h2 {
    font-style: italic;
    font-size: 1em;
    color: rgb(39, 78, 112);
}

.landing-1-container img {
    height: 50%;
}

.landing-1-container p {
    width: 75%;
    margin: 0 auto;
    color: rgb(39, 78, 112);
    font-size: 1em;
}

/*Introduction Code*/
.intro-section {
    width: 100%;
    height: 700px;
    background-color: rgb(39, 78, 112);
    display: flex;
}

.intro-content,
.intro-img {
    width: 50%;
    height: 100%;
    display: grid;
    place-items: center;
    z-index: 10;
}

.intro-content-container {
    width: 500px;
    height: 50%;
    display: grid;
    place-items: center;
}

#intro-content-inside-h1 {
    font-size: 3em;
    font-family: "Playwrite US Trad", Poppins, Arial, Helvetica, sans-serif;
    color: #B3CAF5;
    line-height: 1.3;
}

#intro-content-inside-h2 {
    font-size: 1.5em;
    font-family: Poppins, Arial, Helvetica, sans-serif;
    color: #f5b3ca;
    line-height: 1.3;
    margin-top: 0.5em;
}

#intro-content-inside-p {
    color: wheat;
    margin-top: 1em;
}

.intro-btns {
    width: 250px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
}

#learn-more-btn-a {
    border: 3px solid #f5b3ca;
    padding: 5px 10px;
    border-radius: 20px;
    color: #f5b3ca;
    transition: 0.3s;
}

#learn-more-btn-a:hover {
    border: 3px solid #f5b3ca;
    background-color: #f5b3ca;
    color: rgb(39, 78, 112);
}

#hire-me-btn-a {
    border: 3px solid #f5b3ca;
    padding: 5px 10px;
    border-radius: 20px;
    color: #f5b3ca;
    transition: 0.3s;
}

#hire-me-btn-a:hover {
    border: 3px solid #f5b3ca;
    background-color: #f5b3ca;
    color: rgb(39, 78, 112);
}

.learn-more-btn a,
.hire-me-btn a {
    text-decoration: none;
    font-weight: 700;
}

.intro-img-container {
    background-color: aqua;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 40px 20px #293b5c, -40px -20px #B3CAF5;
    overflow: hidden;
}

#intro-img-element {
    width: 100%;
    height: 100%;
    transition: transform 0.3s;
}

#intro-img-element:hover {
    transform: scale(1.1);
}

.intro-contacts {
    display: flex;
    justify-content: space-between;
    width: 40%;
    height: 30px;
    margin: 0 auto;
    margin-top: 2em;
}

.intro-facebook,
.intro-instagram,
.intro-tiktok {
    width: 30px;
    height: 30px;
}

.intro-facebook {
    background-image: url('facebook-icon-darkblue.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.intro-instagram {
    background-image: url('instagram-icon-darkblue.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.intro-tiktok {
    background-image: url('tiktok-icon-darkblue.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#intro-fb,
#intro-insta,
#intro-tiktok {
    width: 30px;
    height: 30px;
    transition: transform 0.3s;
}

#intro-fb:hover,
#intro-insta:hover,
#intro-tiktok:hover {
    transform: translate(-10px, -10px);
}

/*Skills section*/
.skills-section {
    width: 100%;
    height: 100vh;
    background-color: rgb(48, 106, 156);
    display: grid;
    place-items: center;
}

.h1-container {
    width: 100%;
    height: 10vh;
}

.h1-container h1 {
    font-size: 3em;
    color: wheat;
    font-variant: small-caps;
    text-align: center;
    padding-top: 8px;
}

.web-technologies {
    width: 1000px;
    height: 400px;
    display: flex;
    justify-content: space-between;
}

.webtech-1-shadow,
.webtech-2-shadow,
.webtech-3-shadow,
.webtech-4-shadow {
    width: 230px;
    height: 400px;
    border-radius: 20px;
    background-color: #293b5c;
}

.webtech-1,
.webtech-2,
.webtech-3,
.webtech-4 {
    width: 230px;
    height: 400px;
    border-radius: 20px;
    background-color: #B3CAF5;
    transition: transform .3s;
    display: grid;
    place-items: center;
}

.webtech-1 img,
.webtech-2 img,
.webtech-3 img,
.webtech-4 img {
    width: 150px;
}

.webtech-4 img {
    transform: translate(0, 30px);
}

.webtech-1 p,
.webtech-2 p,
.webtech-3 p,
.webtech-4 p {
    width: 170px;
    text-align: center;
}

.webtech-1 p {
    color: #cf3710;
    text-shadow: 2px 2px 3px #8b8989;
}

.webtech-2 p {
    color: #006ebb;
    text-shadow: 2px 2px 3px #8b8989;
}

.webtech-3 p {
    color: #ffcf32;
    text-shadow: 2px 2px 3px #7a7878;
}

.webtech-4 p {
    color: #7f724d;
    text-shadow: 2px 2px 3px #8b8989;
}

.webtech-1:hover,
.webtech-2:hover,
.webtech-3:hover,
.webtech-4:hover {
    transform: translate(-15px, -15px);
}

/*Projects section*/
.projects-section {
    width: 100%;
    height: 100vh;
    background-color: rgb(39, 78, 112);
    display: grid;
    place-items: center;
}

.projects-section h1 {
    font-size: 3em;
    color: #B3CAF5;
    font-variant: small-caps;
}

.project-con {
    height: 400px;
    width: 1000px;
    display: flex;
    justify-content: space-between;
}

.project-1-shadow,
.project-2-shadow,
.project-3-shadow {
    width: 300px;
    background-color: #7f724d;
    border-radius: 20px;
}

.project-1,
.project-2,
.project-3 {
    width: 100%;
    height: 100%;
    background-color: wheat;
    border-radius: 20px;
    transition: 0.3s;
    text-align: center;
    overflow: hidden;
}

.project-1 img,
.project-2 img,
.project-3 img {
    width: 100%;
}

.project-1:hover,
.project-2:hover,
.project-3:hover {
    transform: translate(-15px, -15px);
}

.img-con {
    height: 50%;
    background-image: url('shop.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.a-con {
    transform: translate(165px, 20px);
    height: 2em;
    width: 40%;
}

#site-btn {
    color: wheat;
    text-decoration: none;
    border: 3px solid wheat;
    box-shadow: 5px 5px 15px #252525;
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 500;
    text-shadow: 5px 5px 15px #252525;
    transition: 0.3s;
}

#site-btn:hover {
    color: #B3CAF5;
    border-color: #B3CAF5;
}

.project-des {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#gcb-logo {
    width: 150px;
    height: 150px;
}

/*Graphic Design Section*/
.graphic-design-section {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgb(48, 106, 156);
}

.graphic-design-section h1 {
    font-size: 3em;
    color: #B3CAF5;
    font-variant: small-caps;
}

.graphic-design-container {
    width: 800px;
    height: 400px;
    background-color: #B3CAF5;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
}

.graphic-designs {
    height: 100%;
    width: 400px;
    display: grid;
    place-items: center;
}

.graphic-designs img {
    width: 300px;
    border-radius: 20px;
}

/*Footer Code*/
.footer {
    width: 100%;
    height: 20%;
}