@font-face {
    font-family: "pixel";
    src: url("PublicPixel.ttf");
}

body {
    font-family: "pixel";
    height: 100vh;
    margin: 0;
    background-color: #212529;
    cursor: url("pointer_cursor.cur"), auto;
}

::-webkit-scrollbar {
    display: none;
}

/* navbar and its contents */
nav {
    width: 100%;
    height: 50px;
    background-color: #101415;
    padding: 5px;
    border-bottom: rgb(123, 123, 123) 1px solid;
    position: sticky;
    top: 0;
    z-index: 2;
}

nav ul {
    list-style-type: none;
    display: flex;
    margin-left: 60%;
}

li {
    margin-left: 10%;
    color: white;
}

nav li a {
    text-decoration: none;
    color: #e5e5e5;
    position: relative;
}

nav li a::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: white;
    position: absolute;
    display: block;
    margin-top: 5px;
    opacity: 0;
}

li a:hover::after {
    opacity: 1;
    transition: all 0.25s;
}

li a:hover {
    color: white;
}

div {
    position: static;
}

.format {
    color: white;
    margin-left: 1%;
    margin-top: 2%;
}

.about-me {
    line-height: 30px;
    display: flex;
}

.introduction {
    flex: 2;
}

.photo {
    flex: 1;
}

.adjust-photo {
    text-align: center;
    width: 350px;
    height: 250px;
    margin-left: 10%;
    margin-top: 10%;
}

.resume {
    margin: 35px auto;
    display: block;
    font-family: "pixel";
    width: 400px;
    height: 50px;
    border: solid 3px rgb(0, 0, 0);
    background-color: rgb(221, 221, 221);
    cursor: pointer;
}

.resume:hover {
    background-color: rgb(9, 9, 24);
}

.resume:hover a {
    color: white;
}

a {
    text-decoration: none;
}

button a:visited {
    color: black;
}

.contacts {
    text-align: center;
    margin-top: 100px;
}

.gmail, .instagram, .linkedin {
    width: 50px;
    height: 50px;
}

.skills {
    margin-left: 5%;
    margin-top: 2%;
    display: flex;
}

.pixel-art {
    width: 300px;
    height: 300px;
}

.profile-pic {
    flex: 1;
}

.profile-pic p {
    color: white;
    text-align: center;
    margin-right: 50px;
}

.skill-bars {
    flex: 3;
    color: white;
    font-size: 22px;
}

progress {
    margin-top: 2%;
    border-radius: 0px;
    height: 22px;
    border: 2px solid rgb(0, 2, 37);
}

progress::after {
    font-size: 10px;
    position: absolute;
    margin-top: -15px;
    margin-left: 90px;
}

.python::after {
    content: "50%";
}

.java::after {
    content: "70%";
}

.html-css::after {
    content: "70%";
}

.javascript::after {
    content: "5%";
}


progress::-webkit-progress-bar {
    background: rgb(200, 200, 200);
}

progress::-moz-progress-bar {
    background: rgb(200, 200, 200);
}

progress::-webkit-progress-value {
    background: rgb(28, 89, 255);
}

progress::-moz-progress-value {
    background: rgb(28, 89, 255);
}

hr {
    width: 95%;
}

.advanced-classes {
    color: white;
    margin-left: 5%;
}

.classes-list {
    position: absolute;
    line-height: 2;
    position: absolute;
}

.certificate {
    color: white;
    text-decoration: underline;
}

.projects {
    text-decoration: underline;
    margin-bottom: 50px;
}

.col-container {
    flex-direction: column;
}

.row-container {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.display-projects {
    height: 225px;
    background-color: #d0d0d5;
    border: 4px solid black;
    margin: 2%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    line-height: 20px;
}

.display-projects:hover {
    box-shadow: 15px 15px 2px #101010;
}

span {
    font-size: 12px;
    text-decoration: none;
}

.hidden {
    visibility: hidden;
}