* {
    box-sizing: border-box;
    color: rgb(155, 155, 155);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
}


div {
    font-size: 2vw;
}

body {
    margin: 0%;
    background-color: #000000;
}

a {
    font-size: 2vw;
    color: white;
    text-decoration: none;
    text-shadow: 0px 1px 2px #000000;
    transition: 0.3s;
}

a:hover {
    color: rgb(255, 60, 60);
    text-shadow: 0px 2px 1px rgb(0, 0, 0);
    transition: 0.3s;
}


li {
    list-style: none;
}

h1 {
    font-size: 30px;
    font-weight: 500;
}

h4 {
    font-size: 20px;
    font-weight: 400;
}

h5 {
    font-size: 2vw;
    font-weight: 400;
}

h1,
h4,h5 {
    color: white;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.834);
    transition: 1s;
}

h1:hover,
h4:hover {
    color: rgb(242, 65, 65);
    text-shadow: 2px 3px rgb(0, 0, 0), 0px 0px 3px rgba(0, 0, 0, 0.763);
    transition: text-shadow 0.3s;
}


.header {
    position: fixed;
    top: 3%;
    left: 50%;
    transform: translate(-50%, 0%);
}

#myPhoto {
    border-radius: 50%;
    width: 20vw;
    margin: 20px;
    align-self: flex-start;
}

.fixed {
    border: rgb(180, 180, 180) 1px solid;
    background-color: rgb(0, 0, 0);
    background-position: center;
    font-size: 2vw;
    padding: 1vw 2vw;
    box-shadow: 3px 3px rgb(184, 184, 184);
    transition: 0.3s;
}

.fixed:hover {
    background-color: rgb(52, 52, 52);
    box-shadow: 0px 0px rgb(255, 255, 255);
    transform: translate(3px, 3px);
    transition: 0.3s;
}

.LOGO {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px rgb(255, 255, 255) solid;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
}

.footer {
    position: fixed;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.sectionContainer {
    display: flex;
    height: 100vh;
}

.section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-blend-mode: overlay;
    background-color: rgba(0, 0, 0, 0.688);
    background-size: cover;
}

.section div {
    flex-direction: column;
}

.prjContainer {
    display: flex;
    padding: 0% 10%;
    justify-content: space-between;
}

.prj {
    background-color: #000000a9;
    flex: 1;
    padding: 0vw 2vw 2vw 2vw;
    border: 1px solid white;
    margin: 1vw;
    transition: 0.5s;
}

.prj:hover {
    background-color: rgba(255, 255, 255, 0.162);
    transition: 0.5s;
}

.prjDesc {
    font-size: 15px;
}

.tags {
    font-size: 15px;
}

.source-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 17px;
    background-color: rgb(107, 0, 0);
    padding: 3px;
    border: rgb(158, 38, 38) solid 1px;
    color: rgb(175, 160, 114);
    box-shadow: none;
    text-shadow: none;
}

.source-code:hover {
    color: rgb(229, 208, 147);
    background-color: rgb(145, 10, 10);
    border: rgb(191, 51, 51) solid 1px;
    text-shadow: none;
    box-shadow: 2px 3px 1px rgb(0, 0, 0);
    transition: 0.3s;
}

.elementContainer {
    display: flex;
    flex-direction: column;
    padding: 10px;
    transition: 0.5s;
}

.element {
    flex: 1;
    font-size: 15px;
    padding: 1vh 3vw;
    margin: 0.5vh 10vw;
    border: 1px dashed rgb(115, 115, 115);
    transition: 0.5s;
}

.element:hover {
    background-color: rgba(255, 255, 255, 0.10);
    transition: 0.5s;
}




/*IMAGES TO THE BACKGROUND*/

#art {
    background-image: url("../store/ARTbw.jpg");
    background-position: center;
    transition: 0.5s;
    border-right: 1px white solid;
}

#art:hover {
    background-color: #0000007d;
}

#code {
    background-image: url("../store/CODEbw.jpg");
    background-position: top;
    transition: 0.5s ease;
    /* border-left: 1.75px white solid; */
}

#code:hover {
    background-color: #00000011;
}


#aboutMe {
    display: flex;
    align-items: center;
}

#aboutMe img {
    padding-right: 5vw;
}

#socials a {
    font-size: 20px;
    padding: 10px 10px;
}

/* modal button css */
#myBtn {
    cursor: pointer;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
}

/* Modal Content/Box */
.modal-content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: rgb(255, 255, 255);
    margin: 25% auto;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border: 1px solid #ffffff;
    width: 75%;
}