body {
    font-size: 14px;
    font-family: century-gothic;
    color: white;
    scroll-behavior: smooth;
}
  
/* CSS is split into the same sections the HTML file is split into, this helps ensure consistency */
/* Below is the menu navbar and the button to return to the index page*/

#menu {
    width:800px;
    background-color: #fff;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,0.25);
    box-shadow: 2px 2px 12px 2px #00000033;
    border-radius: 25px;
    text-align:center;
    position:fixed;
    z-index:999;
    left: 50%;
    transform: translate(-50%, 10%); 
}

#menu ul{
    width:100%;
    margin:auto;
    padding:15px 0px;
}

#menu li {
    display:inline-block;
    padding:5px;
}

#menu a, #contactButton a{
    text-decoration:none;
    color:#1b1d1f;
    background-color:#dddddd80;
    padding:10px 25px;
    border-radius: 25px;
}

#contactButton a {
    font-weight: bold;
}

#menu a:hover, #contactButton a:hover, #indexButton a:hover {
    text-decoration: none;
    color:rgb(153, 153, 153);
    background-color:rgb(226, 224, 224);
    transition:0.4s;
}

#indexButton a{
    position: fixed;
    top: 50%;
    color: #1b1d1f;
    text-decoration:none;
    background-color:#dfdfdf80;
    padding: 100px 15px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-style:solid;
    border-width: 2px;
    border-right-color:#1b1d1f;
    transform: translate(-3px, -100px);
    z-index: 999;
}

/* Below is the Home section */

#homeSection{
    padding:159.5px 0px 100px 0px;
    text-align:center;
    width:100%;
    background:url(./assets/RomeStreet.png) fixed 100% center no-repeat;
    background-size:cover;
    background-position-y: -500px;
}

#homeSection h1 {
    font-weight: bold;
    font-size:100px;
    padding: 0px 0px 5px 0px
}

#homeSection h2 {
    font-weight: bold;
    font-size:50px;
    color:#ffffff;
    padding: 15px;
}

#contactButton {
    font-size: 25px;
    padding-top: 25px;
    color: #fff;
}

/* Below is the Profile section */

#profileSection {
    padding: 40px 0px;
    padding-bottom: 350px; 
    max-width: 960px;
    width: 100%;
    margin:auto;
    transform: translate(-50px, 0px);
}

#profilePicture {
    width:30%;
    float:left;
    transform: translate(0px, 30px);
}

#profilePicture img {
    width: 90%;
    border-radius: 150px;
}

#profileText {
    color:#1b1d1f;
    width:50%;
    float:left;
}

#profileText h2 {
    padding-bottom: 30px;
    font-size:35px;
    font-weight:bold;
}

#profileText p {
    padding-bottom: 30px;
    text-align:justify;
}

/* Below is the skills & interests section */

#skillsSection, #educationSection, #contactSection {
    background-color: #cfcfcf;
    padding: 30px;
}

#carousel-container {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.carousel-item img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px; 
    object-fit:scale-down;
}

.carousel-caption {
    margin-top: 15px;
    position: relative;
    transform: translate(-75px, 0px);
    background: #1b1d1f;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.carousel-control-prev {
    transform: translate(0px, -75px);
}

.carousel-control-next {
    transform: translate(0px, -75px);
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238a8780' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238a8780' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

h5 {
    color:rgb(212, 212, 212);
}

h2 {
    color:#1b1d1f;
    margin: auto;
    text-align: center;
    padding: 15px;
    font-weight:bold;
}

#progressBarDiv p, .job, .education, .project {
    font-size: 18px;
    text-align:center;
    width:100%;
    margin:auto;
    max-width:960px;
    background-color:#1b1d1f;
    border-radius: 25px;
    padding: 25px;
}

#progressBarDiv{
    width:100%;
    margin:auto;
    max-width:960px;
}

#progressBarDiv h3{
  font-size:20px;
  padding-bottom:5px;
  color:#1b1d1f;
}

.progressBar{
  width:100%;
  margin:auto;
  height:5px;
  background-color:#AAA;
  position:relative;
  margin-bottom:15px;
  max-width:960px;
}

.progressBar span{
  height:5px;
  background-color:#000;
  z-index:888;
  position:absolute;
  top:0px;
  left:0px;
  max-width:960px;
}

#html, #python{
  width:85%;
}

#css{
  width:90%;
}

#javascript{
  width:80%;
}

#php, #java{
  width:75%;
}

#csharp{
  width:60%;
}

#assembly{
  width:50%;
}

#experienceSection h2 {
    padding: 25px;
}

#experienceSection {
    padding-bottom: 25px;
}

.collapsible {
    text-decoration:none;
    color:#1b1d1f;
    background-color:#dddddd80;
    padding:10px 25px;
    border-radius: 25px;
    border-style:none;
}

.collapsible:hover, .collapsible:active {
    text-decoration: none;
    color:rgb(153, 153, 153);
    background-color:rgb(226, 224, 224);
    transition:0.4s;
}

/* Below is the Education section */

.educationContent{
    padding-top: 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#educationSection a {
    text-decoration: none;
}

#educationSection ul, li {
    text-align: center;
    margin: 0 auto;
    padding-left:0;
    list-style-position:inside;
}

/* Below is the Projects section */

#projectsSection {
    padding: 25px;
}

.projectDescription{
    display: flex;
    padding-top: 25px;
}

.projectDescription p {
    flex: 1;
    text-align: left;
}

.projectDescription img{
    height: 450px;
	width: 450px;
}