/*
 C *lick nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
 Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
 */
/*
 *   Created on : 27 kwi 2023, 11:27:23
 *   Author     : Kamil Szwaradzki
 */

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
}
#lang-cont {
position: fixed;
right: 15%;
top: 10px;
}
#logo-c4a:hover {
filter: invert(1);
}
footer {
    text-align: center;
}
@media (min-width: 864px) {
/*    #exp-tag {
    top: 44%;
    right: 9%;
    }*/
    #profile-img {
    right: 6.7em;
    }
}

#language, #lang-label {
width: max-content;
height: max-content;
padding: inherit;
margin: 1em;
}

@font-face {
    font-family: NotoColorEmojiLimited;
    unicode-range: U+1F1E6-1F1FF;
    src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

#lang-flag {
font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
}
body {
    overflow-x: clip;
}
main {
    display: flex;
    flex-direction: column;
    height:100vh;
    font-size:2rem;
    margin-left: 2em;
    margin-right: 2em;
    margin-top: 4em;
}
#welcome-text-upper {
font-family: 'Poppins';
font-size: 42px;
}
#welcome-text-lower {
font-family: 'Poppins';
font-size: 22px;
}
nav {
    display: flex;
    justify-content:start;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.3);
    height: 6rem;
}
nav ul {
    list-style-type: none;
    position: relative;
    display: inline-flex;
}
nav ul li {
    padding: 2rem;
    white-space: nowrap;
    font: 800 1rem Arial;
}
nav ul li:hover {
    background: #FFF;
    -webkit-text-fill-color: inherit;

}
nav ul li a {
    text-decoration: none;
}
:root{
    --main-color: #339fff
}
#bg-profile-img {
width: 588px;
height:329px;
background-color:var(--main-color);
transform: rotate(-45deg);
border-top-left-radius:45%;
border-bottom-left-radius:45%;
position:absolute;
top: 24px;
right: -71px;
}
nav span {
    border: 2px solid;
    height: fit-content;
    width: fit-content;
    margin-left: 60px;
    margin-top: 15px;
}
nav span::before {
    font: 800 37px Arial;
    content: '<CODE';
    color:white;
    /*color: #0AF;*/
    background:black;
    /*background: black;*/
}

nav span::after {
    font: 800 37px Arial;
    content: '4ALL>';
    color:black;
    background:white;
    /*background: #0AF;*/
}

nav span:hover{
    filter:invert(1);
}
#profile-img{
object-fit: cover;
object-position: 100% 80%;
height: 350px;
position: absolute;
top: 86px;
width: 253px;
border-bottom-left-radius: 30%;
border-bottom-right-radius: 30%;
}
/*#exp-tag {
font-family: 'Poppins';
padding: 7px;
color: white;
background: black;
position: absolute;
/*    right: 28px;
 *   top: 70px;*/
width: fit-content;
height: auto;
border-radius: 20%;
z-index: 2;
font-size: 20px;
}*/
/* external code - source: https://www.w3schools.com/howto/howto_js_alert.asp */
.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
    opacity: 0.83;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}
.alert.success {
    background-color: #04AA6D;
}
.closebtn {
    padding-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 20px;
    line-height: 18px;
    cursor: pointer;
    transition: 0.3s;
}
.closebtn:hover {
    color: black;
}
/* end external code */
@media (min-width: 810px) {
    #menu_button {
    display:none;
    }
    .card {
        height: 100%;
    }
    .card .card-body {
        display: flex;
        flex-direction: column;
    }
    .card-body .btn.btn-dark {
        margin-top: auto;
        width: fit-content;
        margin-right: auto;
        margin-left: auto;
    }
}
/* mobile */
@media screen and (max-width: 463px) {
    nav ul {
        position: absolute;
        animation: animateleft 0.4s;
    }

    #menu_button:target {
    animation-play-state: running;
    }

    @keyframes animateleft {
        from {
            left: -300px;
            opacity: 0;
        }
        to {
            left: inherit;
            opacity: 1;
        }
    }
    /*
     *   #lang-cont {
     *       width: min-content;
     *       height: fit-content;
     *       margin-top: 1em;
     *       margin-right: 1em;
} */
    #language, #lang-label {
    margin: 0;
    }
    nav {
        justify-content: center;
        flex-direction: row-reverse;
    }
    nav ul li a, nav ul li a:link, nav ul li a:visited {
        color: white;
        font: 800 40px Arial;
        text-decoration: none;
    }
    nav span {
        border: 2px solid;
        height: fit-content;
        width: fit-content;
        margin-left:0;
        margin-top: 1em;
        margin-right: 2em;
    }
    nav span::before {
        font: 800 1.5em Arial;
        content: '<CODE';
        color:white;
        /*color: #0AF;*/
        background:black;
        /*background: black;*/
    }

    nav span::after {
        font: 800 1.5em Arial;
        content: '4ALL>';
        color:black;
        background:white;
        /*background: #0AF;*/
    }
    #home { display: contents; }
    #home-content { display: inline-grid; }
    #bg-profile-img {
    display:none;
    }
    #welcome-text-upper {
    font-family: 'Poppins';
    font-size: 42px;
    }
    #welcome-text-lower {
    font-family: 'Poppins';
    font-size: 22px;
    text-align: center;
    }
    #img-staff {
    width: 100%;
    height: 10em;
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    clip-path: polygon(100% 0%, 100% 57.92%, 67.04% 98.85%, 48.79% 100.62%, 8.19% 80.73%, 80.09% 0%);
    /*            clip-path: polygon(100% 0%, 100% 57.92%, 67.04% 98.85%, 48.79% 100.62%, 15.19% 91.98%, 80.09% 0%);*/
    }
    #bg-img {
    background: #339fff;
    width: 9em;
    height: 100%;
    border-bottom-left-radius: 25%;
    /* border-bottom-right-radius: 55%; */
    }
    #profile-img {
    top: 0px !important;
    right: 109px !important;
    }
    #exp-tag {
    font-family: 'Poppins';
    padding: 7px;
    color: white;
    background: black;
    position: absolute;
    right: 46px;
    top: 243px;
    width: fit-content;
    height: auto;
    border-radius: 20%;
    z-index: 2;
    font-size: 14px;
    }
    #menu_button {
    position: fixed;
    top: 1rem;
    right: 4%;
    font-size:x-large;
    writing-mode: vertical-lr;
    padding:6px;
    background:lightgray;
    border-radius: 25px;
    font-family: fantasy;
    z-index: 99999;
    }
}
@media screen and (max-width: 654px) {
    /*main {
     *       margin-left: 0;
}*/
    #home { display: contents; }
    #home-content { display: inline-grid; }
    .displayed-img {
        width: 100% !important;
        height: 100% !important;
        margin: 0;
        padding: 0;
        max-width: 800px !important;
        max-height: 600px !important;
        max-height: 600px;
    }
    main h1 {
        text-align: center;
    }
    #header-contact {
    margin-left: -0.6em;
    }
    #bg-profile-img {
    width: 20em;
    height: 8em;
    background-color: var(--main-color);
    transform: rotate(301deg);
    border-top-left-radius: 45%;
    border-bottom-left-radius: 45%;
    position: relative;
    /* top: 86px; */
    /* right: -294px; */
    margin-top: 3rem;
    }
    #exp-tag {
    font-family: 'Poppins';
    padding: 7px;
    color: white;
    background: black;
    position: absolute;
    right: 23px;
    top: 243px;
    width: fit-content;
    height: auto;
    border-radius: 20%;
    z-index: 2;
    font-size: 14px;
    }

    #profile-img {
    position: absolute;
    top: 163px;
    right: 98px;
    width: 179px;
    height: auto;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;
    }
    #menu_button {
    position: fixed;
    top: 1rem;
    right: 4%;
    font-size:x-large;
    writing-mode: vertical-lr;
    padding:6px;
    background:lightgray;
    border-radius: 25px;
    font-family: fantasy;
    z-index: 99999;
    }
    nav {
        background: transparent;
        z-index: 3;
    }
    nav ul {
        z-index: 3;
        list-style-type: none;
        position: absolute;
        display: none;
        background:rgba(0,0,0,0.5);
        padding-bottom: 100%;
        left:inherit;
    }
    nav ul li {
        color:white;
        font: 800 40px Arial;
    }
    nav ul li:hover {
        background:rgba(0,0,0,0.5);
        -webkit-text-fill-color: white;
    }

    nav ul li a, nav ul li a:link, nav ul li a:visited {
        color: white;
        font: 800 40px Arial;
        text-decoration: none;
    }


    #about, #projects, #contact {
    margin-top: 10rem;
    text-align: center;
    }
    #contact form {
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
    }
    #contact button {
    font-size: inherit;
    margin-top: 1rem;
    background: chartreuse;
    }
}