body{
    overflow-x: hidden;
}

/*              SIDE BAR STYLING               */
#side-bar{
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 160px; /* Set the width of the sidebar */
    position: fixed; /* Stay in place on scroll */
    z-index: 1; /* Stay on top of everything */
    top: 0; /* Stay at the top of page */
    left: 0;
    background-color: #fff; 
    border-right: solid 1px #11111120;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
}
#logo{
    width: 100%;
    padding: 5px;
    transition: ease 2s;
}
#logo:hover{
    transform: scale(1.05);
}
#side-bar-text{
    display: flex;
    flex-direction: column;
    font-family: 'Gill Sans', sans-serif;
    padding-left: 30px;
}
#side-bar-text > a{
    text-decoration: none;
    color: #111;
    opacity: 50%;
    transition: .2s;
}
#side-bar-text > a:hover{
    text-decoration: none;
    color: #111;
    opacity: 75%;
}

#socials{
    padding-left: 30px;
    padding-bottom: 50px;
}
.social-icon{
    padding-right: 5px;
    opacity: 20%;
    transition: .2s;
}
.social-icon:hover{
    opacity: 50%;
}

/*              MAIN BODY STYLING               */

#main{
  width: 100%;
  background: #fff;
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  font-family: 'Arial', sans-serif;
}
#main-info-pages{
    text-align: left;
    width: 80%;
    background: #fff;
    margin-left: 320px;
    margin-right: 320px;
    margin-top: 50px;
    padding: 0px 10px;
  
    font-family: 'Gill Sans', sans-serif;

    animation: fadeIn ease 2s;
}
#main-info-pages > h1 {
    font-family: 'theSignature', sans-serif;
    font-size: 60px;
}

.main-body-post{
    height: 100%;
    max-width: 1000px;
    border-radius: 35px;
    filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.082));
    padding: 20px;

    transition: 0.4s;
    object-fit: contain;    
    cursor: pointer;

    color:rgba(0, 0, 0, 0.25);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: italic;
    text-align: right;

    animation: fadeIn ease 2s;
}
.main-body-post:hover{
    transform: scale(1.02);
}
.main-body-post > p{
    padding-right: 25px;
}

.border-curve{
    height: 100%;
    border-radius: 15px;
    max-width: 1000px;
}


/*          POP UP STYLING            */
#pop-up-bg{
    height: 100%;
    width: 100%;

    display: flex;
    z-index: 100;
    position: fixed;
    top: 0;

    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0.5);
    opacity: 1;

    animation: fadeIn ease 0.5s;

}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;};
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;};
}

.pop-up{
    height: 600px;
    width: 780px;

    background: white;
    padding: 20px 40px;
    border-radius: 25px;
    filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.082));

    overflow-y: scroll;
    font-family: 'Gill Sans', sans-serif;
}

.top-bot-borders{
    border-top: solid 1.5px #11111120;
    padding-top: 20px;
}

/*          FILTER STYLING            */
  #top-bar{
    width: 90vw;
    /* height: 20px; */
    display: flex;
    justify-content: right;
    /* background: black; */
    z-index: 1;
    position: absolute;
  }

  .dropbtn {
    position: fixed;
    background-color: #111111;
    color: #fff;
    padding: 10px;
    font-size: 30px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    filter: drop-shadow(8px 8px 4px rgba(0, 0, 0, 0.082));

    transition: .2s;
  }
  
  .dropbtn:hover, .dropbtn:focus {
    background: #434343;
  }
  
  .filter {
    position: fixed;
    z-index: 1;
    width: 100px;
    font-family: 'Gill Sans', sans-serif;
  }
  
  .filter-content {
    display: none;
    position: fixed;
    text-align: right;
    margin-top: 48px;
    transform: translateX(-120px);
    background-color: #fff;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
  }
  
  .filter-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .filter a:hover {background-color: #ddd;}
  .filter a:visited {color: #111;}
  
  .show {display: block;}

/*          ABOUT PAGE                */

.about-text-cont{
    height: auto;
    width: 500px;
    display: block;
    border-top: solid rgb(208, 208, 208);
    padding: 30px;

    font-size: 18px;

    animation: fadeIn ease 2.5s;
}

.xp-cont-cont{ /* container for all of the programs ive used */
    display: flex;
    min-width: 500px;
    height: auto;
    flex-wrap: wrap;
}

.xp-cont{ /* container for all of my skills */
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-top: 20px;
}

.xp-text{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #11111190;
    animation: fadeIn ease 3s;
    transition: .2s;

}
.xp-text > img{
    max-height: 25px;
    max-width: 25px;
    padding: 5px 12px;
}
.xp-text:hover{
    transform: scale(1.04);
}

/*          CONTACT           */

form input, textarea {
    width: 500px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px #11111180;
    outline: none;
    resize: none;
}

#input-field{
    /* padding-top: 5px; */
    padding-bottom: 25px;
    display: flex;
    align-items: center;
    /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
}
#input-field input, textarea{
    font-size: 15px;
    margin-right: 15px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#contact-button{
    border: none;
    background: #111;
    color: white;
    border-radius: 20px;
    padding: 10px 15px;
    font-family: 'Gill Sans', sans-serif; 
    font-size: 15px;

    transition: 0.3s;
}
#contact-button:hover{
    cursor: pointer;
    background: #ffcf00;
    color: black;
}
#contact-button:active{
    cursor: wait;
    background: #ffefaa;
    color: black;
}


/*          MISC.           */

#gradientTopBot{
    top: 0;
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, rgba(255,255,255,0) 95%, rgba(255,255,255,1) 100%);
}

.centerImg{
    height: auto;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.centerImg > img{
    max-height: 500px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  #side-bar {padding-top: 15px;}
}

@font-face {
    font-family: theSignature;
    src: url(fonts/thesignature/Thesignature.ttf);
}

footer {
    border-top: solid #11111110;
/* fix to bottom of page */
    width: auto;
    padding: 20px;
    padding-left: 200px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: italic;
    color: #11111120;
    bottom: 0;
}

a {
color: #ffcf00;
}
a:active {
    color: #ffcf00;
    }
a:visited {
    color: #00aaff;
}

/*    MOBILE ADJUSTMENTS       */

#mobile-logo{
    display: none;
}

#mobile-ver{
    display: none;
}

#filter-sidebar{
    height: 100%; 
    width: 400px;
    position: fixed; 
    z-index: 1; 
    top: 0; 
    right: 0;
    background-color: #fff; 
    border-left: solid 1px #11111120;
    overflow-x: hidden; 
    padding-top: 2rem;
    filter: drop-shadow(-100px 10px 40px rgba(0, 0, 0, 0.082));

    animation: fadeIn ease .5s;
}