html {
    scroll-behavior: smooth;
}

body{
    font-family: 'Courier New', Courier, monospace;
}

section{
    display: block;
}

.sidebar {
    height: 100%;
    width: 25%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #C2948A;
    overflow-x: hidden;
    padding-top: 16px;
}

.topnav {
    height: 300px;
    width: 100%;
    position: relative;
    top: -80px;
    left: 8px;
    background-color: #7EA8BE;
}

.welcomeBody {
    width: 70%;
    position: relative;
    top: 40px;
    left: 450px;
}

.personalProjects {
    width: 70%;
    position: relative;
    top: 60px;
    left: 450px;
}

.resume {
    width: 70%;
    position: relative;    
}

.contact {
    width: 70%;
    position: relative;    
}



/* This is for the sidebar */

.sidebar a {
    padding: 6px 5px 20px 50px;        
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    color: #F6F0ED;
    display: block;
}

.sidebar ul {
    margin-left: -25px;
    margin-top: 5px;
}

.sidebar ul a {
    font-size: 15px;    
}

.sidebar h1{
    margin-left: 50px;
    margin-top: 50px;
    font-size: 30px;
    color: #F6F0ED;
}

.sidebar h4{
    margin-top: -20px;
    margin-left: 50px;
    padding-bottom: 50px;
    font-size: 15px;
    color: #F6F0ED;
}

.contactLogo a {
    height: 100px;
    width: 100px;
}

.sidebar a:hover {
    color: black;
}

.contactLogoRow {
    display: flex;
    margin-left: 15px;
}

.contactLogoColumn {        
    margin-left: 10px;
}

.contactLogoColumn a img {
    position: relative;
    height: 50px;
    width: 50px;    
    margin-top: 70px;
    margin-left: -13px;
}

/* This is for the topnav */

.topnav h1 {
    position: relative;
    font-size: 60px;
    color: #28536B;
    top: 110px;
    left: 440px;
    width: 40%;       
}

.topnav h3 {
    position: relative;
    font-size: 20px;
    color: #28536B;
    top: 100px;
    left: 440px;
    width: 40%;    
}

.topnav img {
    position: relative;
    width: 250px;
    height: 400px;
    border-radius: 160px;
    top: -90px;
    left: 1200px;
}

/* This is for the welcome body */
.welcomeBody h1 {
    color: #28536B;
}

.welcomeBody h2 {
    color: #28536B;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 40px;
}

.welcomeBody p {
    color: #28536B;
    margin-top: 30px;
    font-size: 17px;    
}

.languageLogoRow {
    display: flex;
    margin-left: -30px;
}

.languageLogoColumn {        
    margin-left: 50px;
}

.languageLogoColumn img {
    position: relative;
    height: 50px;
    width: 50px; 
}

.softwareLogoRow {
    display: flex;
    margin-left: -30px;
}

.softwareLogoColumn {        
    margin-left: 50px;
}

.softwareLogoColumn img {
    position: relative;
    height: 50px;
    width: 50px; 
}


/* This is for the Project Section */

#projectSection {
    position: relative;
    top: 200px;
    left: 8px;
    height: 2500px;    
    background-color: #C6C6C6;    
}

.personalProjects h1 {
    color: #28536B;    
    font-size: 30px; 
}

/*Mobile Application*/

.mobileApplication{    
    position: relative;
    top: 50px;    
}

.mobileApplication h3{
    color: #28536B;    
    font-size: 23px;   
}

.onePieceSlotMachine img{
    position: relative;
    border-style: solid;
    border-color: black;
    border-radius: 30px;
    height: 400px;
    width: 450px;    
    margin-top: 50px;    
}

.onePieceSlotMachine h2{
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    margin-top: -405px;
    margin-left: 500px; 
}

.onePieceSlotMachine p{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 50px;
    margin-left: 500px; 
}

.onePieceSlotMachine ul li{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 40px;
    margin-left: 490px; 
}

/*Web Development*/

.webDevelopment{    
    position: relative;
    top: 200px;    
}

.webDevelopment h3{
    color: #28536B;    
    font-size: 23px;   
}

.personalWebsite img{
    position: relative;
    border-style: solid;
    border-color: black;
    border-radius: 30px;
    height: 400px;
    width: 480px;    
    margin-top: 50px;    
    margin-left: 530px;
}

.personalWebsite h2{
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    margin-top: -405px;    
}

.personalWebsite p{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 50px;    
}

.personalWebsite ul li{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 40px;    
}

/*Game Development*/

.gameDevelopment{    
    position: relative;
    top: 300px;    
}

.gameDevelopment h3{
    color: #28536B;    
    font-size: 23px;   
}

/* Hole IO */

.holeIO img{
    position: relative;
    border-style: solid;
    border-color: black;
    border-radius: 30px;
    height: 400px;
    width: 450px;    
    margin-top: 50px;    
}

.holeIO h2{
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    margin-top: -405px;
    margin-left: 500px; 
}

.holeIO p{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 50px;
    margin-left: 500px; 
}

.holeIO ul li{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 40px;
    margin-left: 490px; 
}

/* Jumpy Shooty Man */

.jumpyShootyMan {
    position: relative;
    top: 100px;
}

.jumpyShootyMan img{
    position: relative;
    border-style: solid;
    border-color: black;
    border-radius: 30px;
    height: 400px;
    width: 450px;    
    margin-top: 50px;    
    margin-left: 550px;
}

.jumpyShootyMan h2{
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    margin-top: -380px;    
}

.jumpyShootyMan p{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 70px;    
}

.jumpyShootyMan ul li{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 50px;    
}

/* Resume Section */
#resumeSection {
    position: relative;
    top: 200px;               
}

.resume button {
    position: relative;    
    width: 500px;
    height: 100px;
    top: 100px;
    left: 700px;
    border: black;
    border-radius: 10px;
    border-style: solid;
    background-color: #BBB193;
    box-shadow: inset 0 0 0 0 #C2948A;
    transition: ease-out 0.3s;
    outline: none;
}

.resume button:hover {
    box-shadow: inset 500px 0 0 0 #C2948A;
    cursor: pointer;
    color: #000;
}

.resume button h2{
    position: relative;
    font-size: 18px;    
    color: #F6F0ED; 
}

/* Contact Section */

#contactSection {      
    position: relative;
    top: 400px;
    height: 220px;
    left: 8px;      
    background-color: #7EA8BE;         
}

.contact h1 {
    position: relative;
    top: 50px;
    left: 445px;      
    font-size: 30px;
    color: #28536B; 
}

.gmailText{
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    margin-top: -32px;
    margin-left: 500px; 
}

.linkedInText {
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    margin-top: -30px;
    margin-left: 500px;
}

.gmailLogo{
    position: relative;
    height: 30px;
    width: 30px;    
    margin-top: 50px;  
    margin-left: 450px;  

}

.linkedinContactLogo {
    position: relative;    
    height: 30px;
    width: 30px;    
    margin-top: 10px; 
    margin-left: 450px; 
}


@media screen and (max-width: 700px) {

html {
    scroll-behavior: smooth;
}

body{
    font-family: 'Courier New', Courier, monospace;
}

section{
    display: block;
}

.sidebar {
    display: none;
}


/* This is for the topnav */

.topnav {
    height: 300px;
    width: 100%;
    position: relative;
    top: -80px;
    left: 0px;
    background-color: #7EA8BE;
    text-align: center;
}

.topnav h1 {
    position: relative;
    font-size: 35px;
    color: #28536B;
    top: 130px;
    left: 0px;
    width: 100%;
}

.topnav h3 {
    position: relative;
    font-size: 20px;
    color: #28536B;
    top: 140px;
    left: 0px;
    width: 100%;
}

.topnav img {
    position: relative;
    width: 150px;
    height: 260px;
    border-radius: 160px;
    top: 140px;
    left: 0px;
}




/* This is for the welcome body */

.welcomeBody {
    width: 100%;
    position: relative;
    top: 150px;
    left: 0px;
    text-align: center;
}

.welcomeBody h1 {
    color: #28536B;
}

.welcomeBody h2 {
    color: #28536B;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 40px;
}

.welcomeBody p {
    color: #28536B;
    margin-top: 30px;
    font-size: 17px;    
}

.languageLogoRow {
    display: flex;
    margin-left: -30px;
}

.languageLogoColumn {        
    margin-left: 50px;
}

.languageLogoColumn img {
    position: relative;
    height: 35px;
    width: 35px; 
    left: 65px;
}

.softwareLogoRow {
    display: flex;
    margin-left: -30px;
}

.softwareLogoColumn {        
    margin-left: 50px;
}

.softwareLogoColumn img {
    position: relative;
    height: 35px;
    width: 35px; 
    left: 28px;
}



/* This is for the Project Section */

#projectSection {                    
    background-color: #C6C6C6;    
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    left: 0px;

    height: 4000px; 
}

.personalProjects {
    position: relative;
    width: 70%;    
    top: -200px;
    left: 0px;
        
    
}

.personalProjects h1 {
    color: #28536B;    
    font-size: 30px; 
}

/*Mobile Application*/

.mobileApplication{    
    position: relative;
    top: 50px;        
}

.mobileApplication h3{
    color: #28536B;    
    font-size: 23px;   
}

.onePieceSlotMachine img{
    position: relative;
    border-style: solid;
    border-color: black;
    border-radius: 30px;
    height: 300px;
    width: 400px;    
    margin-top: 50px;        
    margin-left: -40px;
}

.onePieceSlotMachine h2{
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    margin-top: 50px;     
    margin-left: -10px;    
    left: 8px;           
}

.onePieceSlotMachine p{
    position: relative;    
    font-size: 18px;    
    color: #28536B;    
    margin-top: 50px;
    margin-left: -80px;
    left: 40px;          
}

.onePieceSlotMachine ul li{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 40px;
    margin-left: -100px; 
    left: 40px;
}

/*Web Development*/

.webDevelopment{    
    position: relative;
    top: 100px;    
}

.webDevelopment h3{
    color: #28536B;    
    font-size: 23px;   
}

.personalWebsite img{
    position: relative;
    border-style: solid;
    border-color: black;
    border-radius: 30px;
    height: 300px;
    width: 380px;    
    margin-top: 50px;    
    left: -559px;    
}


.personalWebsite h2{
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    margin-top: 0px;  
    top: 50px;  
}

.personalWebsite p{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-left: -100px; 
    left: 50px; 
    top: 50px; 
}

.personalWebsite ul li{
    position: relative;
    font-size: 18px;    
    color: #28536B;   
    margin-left: -80px; 
    left: 35px; 
    top: 50px;      
}

/*Game Development*/

.gameDevelopment{    
    position: relative;
    top: 200px;    
}

.gameDevelopment h3{
    color: #28536B;    
    font-size: 23px;   
}

/* Hole IO */

.holeIO img{
    position: relative;
    border-style: solid;
    border-color: black;
    border-radius: 30px;
    height: 300px;
    width: 380px;    
    margin-top: 50px;    
    left: -27px;
}

.holeIO h2{
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    top: 450px;    
    margin-left: 0px; 
}

.holeIO p{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    top: 430px;    
    left: 40px;
    margin-left: -80px; 
}

.holeIO ul li{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    top: 430px;    
    left: 30px;
    margin-left: -80px; 
}

/* Jumpy Shooty Man */

.jumpyShootyMan {
    position: relative;
    top: 100px;
}

.jumpyShootyMan img{
    position: relative;
    border-style: solid;
    border-color: black;
    border-radius: 30px;
    height: 300px;
    width: 380px;    
    margin-top: 400px;    
    margin-left: 0px;
    left: -28px;
}

.jumpyShootyMan h2{
    position: relative;
    font-size: 20px;    
    color: #28536B;    
    margin-top: 0px;  
    margin-left: -70px;  
    top: 50px;
    left: 35px;    
}

.jumpyShootyMan p{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 100px;    
    margin-left: -50px;  
    left: 20px;
}

.jumpyShootyMan ul li{
    position: relative;
    font-size: 18px;    
    color: #28536B;    
    margin-top: 60px;    
    margin-left: -100px;  
    left: 48px;
}

/* Resume Section */
#resumeSection {
    position: relative;
    top: 200px;               
}

.resume {
    width: 70%;
    position: relative;    
}

.resume button {
    position: relative;    
    width: 300px;
    height: 90px;
    top: 100px;
    left: 85px;
    border: black;
    border-radius: 10px;
    border-style: solid;
    background-color: #BBB193;
    box-shadow: inset 0 0 0 0 #C2948A;
    transition: ease-out 0.3s;
    outline: none;
}

.resume button:hover {
    box-shadow: inset 300px 0 0 0 #C2948A;
    cursor: pointer;
    color: #000;
}

.resume button h2{
    position: relative;
    font-size: 18px;    
    color: #F6F0ED; 
}

/* Contact Section */

#contactSection {      
    position: relative;
    top: 400px;
    height: 220px;
    left: 0px;      
    background-color: #7EA8BE;         
}

.contact {
    width: 70%;
    position: relative;    
}

.contact h1 {
    position: relative;
    top: 50px;
    left: 30px;      
    font-size: 25px;
    color: #28536B; 
}

.gmailText{
    position: relative;
    font-size: 15px;    
    color: #28536B;    
    margin-top: -32px;
    margin-left: 80px; 
}

.linkedInText {
    position: relative;
    font-size: 15px;    
    color: #28536B;    
    margin-top: -30px;
    margin-left: 80px;
}

.gmailLogo{
    position: relative;
    height: 30px;
    width: 30px;    
    margin-top: 50px;  
    margin-left: 30px;  

}

.linkedinContactLogo {
    position: relative;    
    height: 30px;
    width: 30px;    
    margin-top: 10px; 
    margin-left: 30px; 
}


}