:root {
--navy: #383f51ff;
--lavender: #dddbf1ff;
--orange: #fe4e00ff;
--blue: #3c4f76ff;
--yellow: #ffae03ff;
--mustard: #e67f0dff;
--seafoam:  #b9c6ae;

}

/* header and dropdown menu */
.container{
    width: 100%;
    margin-top: 20px;
    position: absolute ; right:1 
    
}

/*
Customize header.
*/
header {
    height: 150px;
    width: 100%;
    background-color: var(--orange);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
    
}

.dropdown{
   position: relative; left: 0px ;
   color: var(--lavender);
}


#navbar{
    background-color: var(--blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

    
}

#navbar p{
    font-size: 13px;
}



aside {
    background-color: var(--seafoam);
    padding: 20px;
    
  }

  aside p{
      font-size: 15px;
       
  }


/*
Customize profile image.
*/
.profile {
    border-radius: 50%;
    height: 250px;
    margin: 15px;
    
    
}

/* customize my name */
h1{
    color:var(--blue);
    font-family: 'Avantgarde';
    font-size: 43px;
    margin-top: 100px;
    text-shadow: 2px 2px red;

}

/*
Customize section titles
*/
h2 {
    font-style: italic;
    color: var(--lavender);
    font-size: px;
    text-align: left;
}

/*
Customize text on the entire page with p tag.
*/
#description{
    padding: 100px;
    
    background-color: var(--mustard);
    
}

p{
    
    font-style: 'andale mono', monospace;
    font-size: 25px;
    color: var(--blue);
    margin-left: 50px;
}



/*
Get contact links to jump page when clicked on and connect to web source.
*/
li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    position: right;
    font-style: oblique;
    
    
}

/*Customize text inside of carousel*/

h3{
  font-style: 'andale mono', monospace;
  font-size: 20px;
  color: var(--yellow);
  margin-left: 20px;
}



/*
Customize portfolio container
*/
.portfolio-box {
    font-family: Georgia, 'Times New Roman', Times, serif ;
    padding: 50px;
    margin: 5px;
    font-size: 20px;
    background-color: var(--yellow);
    

}
 
/*
Customize boxes in portfolio.
*/
/*  */

/*
Customize footer.
*/
.contacts p {
    padding: 50px 50px;
     
}

/*
Customize footer.
*/
footer {
    padding: 5px;
    font-size: 20px;
    background-color: var(--orange);
    
  }

  footer h2{
    text-align: center
  }

/* CAROUSEL-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
img{
    max-width: 100%;
}

#project-4{
  max-height: 100%;
}


#project-2{
  max-height: 85%;
  margin-bottom: 100px;
  padding-top: 20px;
}



@-webkit-keyframes slidein {
    0% {
      top: -400px;
      opacity: 0;
    }
    100% {
      opacity: 1;
      top: 0px;
    }
  }
  @keyframes slidein {
    0% {
      top: -400px;
      opacity: 0;
    }
    100% {
      opacity: 1;
      top: 0px;
    }
  }
  @-webkit-keyframes slideout {
    0% {
      top: 0;
      opacity: 1;
    }
    100% {
      top: -400px;
      opacity: 0;
    }
  }
  @keyframes slideout {
    0% {
      top: 0;
      opacity: 1;
    }
    100% {
      top: -400px;
      opacity: 0;
    }
  }
  body {
    font-family: "Tahoma";
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  body #scene {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 1000px;
    height: 400px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    overflow: hidden;
  }
  body #scene #left-zone {
    background:var(--blue);
    height: 75%;
    flex-grow: 0;
    display: flex;
    width: 350px;
    align-items: center;
    justify-content: left;
  }
  body #scene #left-zone .list {
    display: flex;
    list-style: none;
    align-content: stretch;
    flex-direction: column;
    flex-grow: 1;
    margin: 0;
    padding: 0;
  }
  body #scene #left-zone .list li.item input[type=radio] {
    display: none;
  }
  body #scene #left-zone .list li.item input[type=radio] ~ label {
    display: block;
    opacity: 0.5;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
  body #scene #left-zone .list li.item input[type=radio] ~ label:first-letter {
    text-transform: uppercase;
  }
  body #scene #left-zone .list li.item input[type=radio] ~ label:hover {
    opacity: 0.75;
    cursor: pointer;
  }
  body #scene #left-zone .list li.item input[type=radio] ~ label.label_one:before {
    content: " ";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    margin-left: 15px;
    background-image: url("images/circle.png");
    background-position: center;
    background-size: 75% 75%;
    background-repeat: no-repeat;
  }
  body #scene #left-zone .list li.item input[type=radio] ~ label.label_two:before {
    content: " ";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    margin-left: 15px;
    background-image: url("images/circle.png");
    background-position: center;
    background-size: 75% 75%;
    background-repeat: no-repeat;
  }
  body #scene #left-zone .list li.item input[type=radio] ~ label.label_three:before {
    content: " ";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    margin-left: 15px;
    background-image: url("images/circle.png");
    background-position: center;
    background-size: 75% 75%;
    background-repeat: no-repeat;
  }
  body #scene #left-zone .list li.item input[type=radio] ~ label.label_four:before {
    content: " ";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    margin-left: 15px;
    background-image: url("images/circle.png");
    background-position: center;
    background-size: 75% 75%;
    background-repeat: no-repeat;
  }
  body #scene #left-zone .list li.item input[type=radio] ~ .content {
    position: absolute;
    left: 350px;
    top: -400px;
    width: 650px;
    height: 400px;
    -webkit-animation-duration: 0.75s;
            animation-duration: 0.75s;
    -webkit-animation-name: slideout;
            animation-name: slideout;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }



  body #scene #left-zone .list li.item input[type=radio] ~ .content p {
    max-width: 50%;
    text-align: center;
  }
  body #scene #left-zone .list li.item input[type=radio]:checked ~ label {
    opacity: 1;
    -webkit-animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
            animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }

  /* carousel title font styling --------------------------------------------------------*/
  body #scene #left-zone .list li.item input[type=radio]:checked ~ label.label_one {
    color: var(--yellow);
    border-right: solid 4px var(--yellow);
  }
  body #scene #left-zone .list li.item input[type=radio]:checked ~ label.label_two {
    color: var(--yellow);
    border-right: solid 4px var(--yellow);
  }
  body #scene #left-zone .list li.item input[type=radio]:checked ~ label.label_three {
    color: var(--yellow);
    border-right: solid 4px var(--yellow);
  }
  body #scene #left-zone .list li.item input[type=radio]:checked ~ label.label_four {
    color: var(--yellow);
    border-right: solid 4px var(--yellow);
  }
  body #scene #left-zone .list li.item input[type=radio]:checked ~ .content {
    -webkit-animation-duration: 0.75s;
            animation-duration: 0.75s;
    -webkit-animation-name: slidein;
            animation-name: slidein;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
            animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  body #scene #middle-border {
    background-color: #eee;
    height: 75%;
    flex-grow: 1;
    max-width: 2px;
    z-index: 0;
  }
  body #scene #right-zone {
    background: var(--blue);
    height: 100%;
    flex-grow: 3;
  
  }

  .icons{
    text-align: center;
    padding: 10px;
    margin: 10px;
  }