body {
    background-color: rgb(0, 0, 0);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.topnav {
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    z-index: 500;
}

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.profile {
    max-width: 100%;
    height: 620px;
    padding: 50px;
    background-image: url("background.jpg");
}

.profile h1 {
    color: rgb(255, 255, 255);
    font-size: 150px; 
    text-align: center;
}

.profile p {
    color: rgb(255, 255, 255);
    font-size: 50px; 
    position: relative;
    bottom: 90px;
    text-align: center;
}

.about {
    max-width: 100%;
    height: 100%;
    padding: 50px;
}

.about h2 {
    color: rgb(29, 132, 235);
    font-size: 50px; 
    text-align: left;
    position: relative;
    bottom: 50px;
}

.about p {
    font-size: 35px; 
    text-align: left;
    position: relative;
    color: white;
    bottom: 40%;
}

.projects {
    max-width: 100%;
    height: 2100px;
    padding: 50px;
    position: relative;
    top: 25px;
    transition: 0.5s;
}

.projects h3 {
    color: rgb(29, 132, 235);
    font-size: 50px; 
    text-align: left;
    position: relative;
    bottom: 100px;
}

.projects div:hover {
    background-color: #9F00FE;
}

.imageEditor {
    width: 50%;
    height: 380px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 100px;
    left: 20%;
    transition: 0.5s;
}

.imageEditor h4 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 15px;
}

.imageEditor p {
    color: white; 
    font-size: 20px; 
    text-align:center;
    position: relative;
    bottom: 45px;
}

.tic {
    position: relative;
    transition: transform .2s;
    width: 35%;
    bottom: 50px;
    left: 29%;
}

.tic:hover {
    transform: scale(1.5);
    position: relative;
    bottom: 110px;
}

.sudoku {
    position: relative;
    transition: transform .2s;
    width: 17%;
    bottom: 50px;
    left: 40%;
}

.sudoku:hover {
    transform: scale(1.5);
    position: relative;
    bottom: 110px;
}

.sportscred {
    position: relative;
    transition: transform .2s;
    width: 17%;
    height: 55%;
    bottom: 65px;
    left: 41%;
}

.sportscred:hover {
    transform: scale(1.6);
    position: relative;
    bottom: 160px;
}

.spotify {
    position: relative;
    transition: transform .2s;
    width: 60%;
    bottom: 53px;
    left: 20%;
}

.spotify:hover {
    transform: scale(1.6);
    position: relative;
    bottom: 120px;
}

.javmos {
    position: relative;
    transition: transform .2s;
    width: 50%;
    height: 60%;
    bottom: 50px;
    left: 24%;
}

.javmos:hover {
    transform: scale(1.5);
    position: relative;
    bottom: 110px;
}

.edit {
    position: relative;
    transition: transform .2s;
    width: 50%;
    height: 60%;
    bottom: 50px;
    left: 24%;
}

.edit:hover {
    transform: scale(1.5);
    position: relative;
    bottom: 110px;
}


.JavmosGUI {
    width: 50%;
    height: 380px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 60px;
    left: 20%;
    transition: 0.5s;
}

.JavmosGUI h4 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 15px;
}

.JavmosGUI p {
    color: white; 
    font-size: 20px; 
    text-align:center;
    position: relative;
    bottom: 45px;
}

.personalWeb {
    width: 50%;
    height: 380px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 20px;
    left: 20%;
    transition: 0.5s;
}

.personalWeb h4 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 15px;
}

.personalWeb p {
    color: white; 
    font-size: 20px; 
    text-align:center;
    position: relative;
    bottom: 45px;
}

.sportsCred {
    width: 50%;
    height: 380px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: -20px;
    left: 20%;
    transition: 0.5s;
}

.githubIconProjects {
    position: relative;
    height: 30%;
    width: 17%;
    bottom: 40px;
    left: 42%;
}

.sportsCred h4 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 15px;
}

.sportsCred p {
    color: white; 
    font-size: 20px; 
    text-align:center;
    position: relative;
    bottom: 45px;
}

.spotifyAPI {
    width: 50%;
    height: 380px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: -60px;
    left: 20%;
    transition: 0.5s;
}

.spotifyAPI h4 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 15px;
}

.spotifyAPI p {
    color: white; 
    font-size: 20px; 
    text-align:center;
    position: relative;
    bottom: 45px;
}

.expirence {
    max-width: 100%;
    height: 1300px;
    padding: 50px;
    transition: 0.5s;
}

.expirence div:hover {
  background-color: #9F00FE;
}

.expirence h5 {
    color: rgb(29, 132, 235);
    font-size: 50px; 
    text-align: left;
    position: relative;
    bottom: 100px;
}

.expirence1 {
    width: 60%;
    margin: auto;
    padding-left: 50px;
    padding-right: 50px;
    height: 300px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 140px;
    transition: 0.5s;
}

.expirence1 h6 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 10px;
}

.expirence1 ul {
    color: white; 
    font-size: 20px; 
    text-align: left;
    position: relative;
    bottom: 50px;
}

.expirence2 {
    width: 60%;
    margin: auto;
    padding-left: 50px;
    padding-right: 50px;
    height: 300px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 120px;
    transition: 0.5s;
}

.expirence2 h6 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 10px;
}

.expirence2 ul {
    color: white; 
    font-size: 20px; 
    text-align: left;
    position: relative;
    bottom: 50px;
}

.expirence3 {
    width: 60%;
    margin: auto;
    padding-left: 50px;
    padding-right: 50px;
    height: 300px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 100px;
    transition: 0.5s;
}

.expirence3 h6 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 10px;
}

.expirence3 ul {
    color: white; 
    font-size: 20px; 
    text-align: left;
    position: relative;
    bottom: 50px;
}

.expirence4 {
    width: 60%;
    margin: auto;
    padding-left: 50px;
    padding-right: 50px;
    height: 300px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 80px;
    transition: 0.5s;
}

.expirence4 h6 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 10px;
}

.expirence4 ul {
    color: white; 
    font-size: 20px; 
    text-align: left;
    position: relative;
    bottom: 50px;
}

.contact {
    max-width: 100%;
    padding: 50px;
    transition: 0.5s;
}

.contact h6 {
    color: rgb(29, 132, 235);
    font-size: 50px; 
    text-align: left;
    position: relative;
    bottom: 100px;
}

.contact div:hover {
  background-color: #9F00FE;
}

.email {
    width: 280px;
    height: 50px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 200px;
    transition: 0.5s;
}

.email h1 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 10px;
}
.emailIcon {
    position: relative;
    bottom: 75px;
    left: 40px
}

.github {
    width: 280px;
    height: 50px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 250px;
    left: 300px;
    transition: 0.5s;
}

.github h1 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 10px;
}

.githubIcon {
    position: relative;
    bottom: 72px;
    left: 40px
}

.linkedin {
    width: 280px;
    height: 50px;
    background-color: rgb(0, 51, 102);
    overflow: hidden;
    position: relative;
    bottom: 300px;
    left: 600px;
    transition: 0.5s;
}

.linkedin h1 {
    color: white;
    font-size: 30px; 
    text-align: center;
    position: relative;
    bottom: 10px;
}

.linkedinIcon {
    position: relative;
    bottom: 72px;
    left: 30px;
}

a {
    color: rgb(0, 51, 102);
}