/*Center website*/


.content_wrapper {
    min-width: 200px;
    margin-left: 15% !important;
    margin-right: 15%;
    height: 100%;
      
}

body{
  overflow-x: hidden !important;
  background-color: #F8F8F8;

}


/***** NAVIGATION BAR CSS SETTINGS ****/  
/* The side navigation menu */
/* old nav menu styles
.sidebar {
  display: block;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #dedcdc;
  position: fixed;
  height: 100%;
  overflow: auto;
  
}

.sidebar ul{
  list-style-type: none
}


/* Sidebar links */
/*.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
  font-weight: bold !important;
  margin-left: 15px;
  
}

/* Active/current link */
/*.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}*/

/* Links on mouse-over */
/*.sidebar a:hover:not(.active) {
  background-color: #ffffff;
  color: #424242;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
/*div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}


.navbar{
  display: none;
  position: fixed;
  width: 100vw;
  background-color: #faeeee;
  z-index: 10 !important;
}

.navbar-light .navbar-toggler {
  color:  #ff4da6;
  border-color:  #ff4da6;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("menu_pic.png");
}

*/
/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */


 .modal-dialog {
  top: 20;
  margin-right: 20% !important;
  margin-left: 20% !important;
 }

 .modal-content {
  height:auto;
  width: 1000px;
  
 }

 .carousel-inner{
  margin-right:5% !important;
  margin-left: 5% !important;
 }
 .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' 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;
  margin-top: 150% !important;
  margin-bottom: 150%;
}
 
 .carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' 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;
   margin-top: 150% !important;
   margin-bottom: 150%;
  }

 .carousel-control-next, .carousel-control-prev {
    display: block !important;
 }
 
* {
   scroll-behavior: smooth;
}
 
 /* Menu code starts here */
#menuToggle {
   display: block;
   /* You can also use relative/absolute here if you want to stay on the top */
   position: fixed;
   top: 50px;
   left: 50px;
   z-index: 1;
   
   -webkit-user-select: none;
   user-select: none;
}
 
#menuToggle a {
   text-decoration: none;
   color: #232323;
   transition: color 0.3s ease;
}
 
#menuToggle a:hover {
   color: tomato;
}
 
#menuToggle input {
   display: block;
   width: 40px;
   height: 32px;
   position: absolute;
   top: -7px;
   left: -5px;
   cursor: pointer;
   opacity: 0; /* hide this */
   z-index: 2; /* and place it over the hamburger */
   -webkit-touch-callout: none;
 }
 
 /*
  * Just a quick hamburger
  */
#menuToggle span {
   display: block;
   width: 33px;
   height: 4px;
   margin-bottom: 5px;
   position: relative;
   
   background: #cdcdcd;
   border-radius: 3px;
   
   z-index: 1;
   
   transform-origin: 4px 0px;
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               opacity 0.55s ease;
}
 
#menuToggle span:first-child {
   transform-origin: 0% 0%;
}
 
#menuToggle span:nth-last-child(2) {
   transform-origin: 0% 100%;
}
 
 /* 
  * Transform all the slices of hamburger
  * into a crossmark.
  */
#menuToggle input:checked ~ span {
   opacity: 1;
   transform: rotate(45deg) translate(-2px, -1px);
   background: #232323;
}
 
 /*
  * But let's hide the middle one.
  */
#menuToggle input:checked ~ span:nth-last-child(3) {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
}
 
 /*
  * Ohyeah and the last one should go the other direction
  */
#menuToggle input:checked ~ span:nth-last-child(2) {
   transform: rotate(-45deg) translate(0, -1px);
}
 
 /*
  * Make this absolute positioned at the top left of the screen
  */
#menu  {
   position: absolute;
   max-width: 200px;
   width: 100vw;
   height: 100vh;
   margin: -100px 0 0 -50px;
   padding: 50px;
   padding-top: 125px;
   box-sizing: border-box;
   overflow-y: auto;
   background: transparent;
   list-style-type: none;
   -webkit-font-smoothing: antialiased;
   /* to stop flickering of text in safari */
   transform-origin: 0% 0%;
   transform: translate(-100%, 0);
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
 
#menu li {
   padding: 10px 0;
   font-size: 22px;
}
 
#menu li label {
   cursor: pointer;
}
 
 /*
  * And let's slide it in from the left
  */
#menuToggle input:checked ~ ul {
   transform: none;
}

/***** END OF NAVIGATION BAR SETTINGS ***/


/***HOME ****/
.home { 
    display: flex;              /* Enable flexbox */ 
    flex-direction: column;     /* Stack items vertically */ 
    justify-content: space-between; /* Evenly distribute space between items */ 
    height: 100% !important;
    border: 10px double black;
    /*background-color: orange !important;*/
    margin-bottom: 15%;
    margin-top: 5%;
    
} 
 
.home p { 
    
    text-align: center;        /* Center text */ 
    font-family: Copperplate;
} 

#message{
    font-size: 40px;
    color: #888888;
    font-weight: bold;
}
.iam{
    margin-top: 20%;
    font-size: 60px;
    
}
.name{
    margin-bottom: 20%;
    font-size: 60px;
}


/******* ABOUT SECTION ******/
#about{
    height: 100%;
    margin-bottom: 20%;
    
}


.about_column1 {
    float: left !important;
    width: 49%;
    margin:auto;
    padding: 2%;
    text-align: justify; 
   
  }


  .about_column2 {
    float: right !important;
    width: 49%;
    margin:auto;
    text-align:center;
    display:block; 

  }

  .about_column2 img{
    width: 70%;
    height: 70%;
    border: 10px double #E8E8E8 !important;
    outline: 15px solid #000000; 
    margin-top: -15%;
    margin-bottom: 60px;
    border-radius: 50% 0;
  }

  
  /******* SKILLS BAR *****/
  .progress{
    margin-bottom:15px !important;
    background-color: #ffffff !important;
    font-size: .85rem;
    text-align: left !important;
    
  }

  .progress-bar{
    text-align: left !important;
  }


/*****PROJECTS *****/
#projects{
  margin-top: 20%;
}

#projects .proj_row{
    margin-bottom: 10%;
    
   
}

.proj_link{
    color: #007bff;
}

a:hover{
  color: #0056b3;
}


/* Create two equal columns that floats next to each other - column1 and column2*/
.column1 {
    float: left;
    width: 49%;
    height: 300px; 
  }

.column2 {
float: right;
width: 49%;
height: 300px; 
}

.column1 img{
height: 100% !important;
width: 80% !important;
margin-left: 5%;
    margin-right: 5%;
} 

.column2 img{
height: 100% !important;
width: 80% !important;
margin-left: 5%;
margin-right: 5%;
} 


.column-title{
font-size: 18px;
text-decoration: underline;
font-weight: bold;

}

.text{
    text-align: justify;
}



/****** CONTACT ******/

#contact{
  margin-top: 5%;
  
}

form{
  z-index: 100 !important;
}
#contact h3{
    margin-bottom: 3%;
}

#contactIntro{
    margin-bottom: 6%;
    font-size: 25px;
}
.contact_row{
    margin-bottom: 3%;
   
}

.btn-primary{
    background-color:  #E8E8E8;
    border: none;
    color: #989898;
    font-weight: bold;
    border: solid #989898 1px;
    margin-bottom: 5%;
  
}

.btn:hover{
  background-color: #eeeeee;
  color: #000000;
}

#messageLabel{
    margin-left: 10px;
}
#comment{
    margin-left: 10px;
    margin-right: 10px;
}




/******* FOOTER ********/
footer{
    width: 100vw;
    background-color: #E8E8E8;
    font-size: 12px;
    text-align: center;
    height: 60px;
    
    position: sticky;
}
#rights{
    padding-top: 25px;
    margin-left:-10%;
}


/******* CONSELLATION ********/
#canvasTop{
  z-index: -100;
  position: absolute;
  top: 0;
  right: 0;
}

#canvasBtm{
  position: absolute;
  z-index:-100;
  height: 120%;
  bottom: 0 !important;
  left:0 !important;
  margin-top: 90%;
  
}
 #formWrap{
  position: relative;
  z-index: 100;
 }


#home p{
  position: relative;
}

:root {
  --dark: #E8E8E8;
  --primary: #B3005E;
  --primary-light: #E90064;
  --light: #FF5F9E;
}

#home {
  background: var(--dark);
}



/******** MEDIA QUERIES *******/

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

  .carousel-control-next {
    margin-right: -35px;
}
.carousel-control-prev {
  margin-left: -30px;
}

.modal-dialog{
  margin-right: 8% !important;
  margin-left: 8% !important;
}

}

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

  body{
    overflow-x: hidden !important;
    
  }
  .column1 {
      width: 100%;
      }
  .column2{
  width: 100%;
  }

  .column1 h2{
      margin-top: 5%;
  }

  .column2 h2{
      margin-top:5%;
  }

  #proj_a { order: 1; }
  #proj_b { order: 2; }
  #proj_d { order: 3; }
  #proj_c { order: 4; }
  #proj_e { order: 5; }
  #proj_f { order: 6; }
  #proj_g { order: 7; }
  #proj_h { order: 8; }
  #proj_j { order: 9; }
  #proj_i { order: 10; }
  #proj_k { order: 11; }
  #proj_l { order: 12; }
  #proj_n { order: 13; }
  #proj_m { order: 14; }
  #proj_o { order: 15; }
  #proj_p { order: 16; }
  #proj_r { order: 17; }
  #proj_q { order: 18; }
  #proj_t { order: 17; }
  #proj_s { order: 18; }

  .column1 img{
      width: 100% !important;
      height: 100% !important; 
      margin: auto !important;
  }

  .column2 img{
      width: 100% !important;
      height:  100% !important; 
      margin: auto !important;
  } 

  #about{
      margin-bottom: 60%;
      margin-top: 10%;
  }
  #about_txt{ display: flex; flex-direction: column; }
  #about_c1 { order: 2; }
  #about_c2 { order: 1; }


  #about_c2 img{
      height: 50% !important;
      width: 50% !important;   
      margin-top: 8%;
  }

    .about_column1 {
      width: 100%;
        
    }
    .about_column2{
      width: 100%;
    
  }

  .modal-content{
    height:auto;
    width: 600px;
  }

  .modal-body{
    width: 550px;
  }

  .carousel-control-next {
    margin-right: -80px;
  }
  .carousel-control-prev {
    margin-left: -30px;
  }

  .modal-dialog{
    margin-right: 15% !important; 
    margin-left: 15% !important;
  }
  
}
@media screen and (max-width: 1025px) {
  .modal-dialog{
    margin-right: 20% !important;
    margin-left: 20% !important;
  }

}
@media screen and (max-width: 900px) {
  .modal-dialog{
    margin-right: 15% !important;
    margin-left: 15% !important;
  }

}


/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 800px) {

  body{
    overflow-x: hidden !important;
    
  }
  .sidebar {
    width: 100%;
    height: auto;
    position: fixed;
    z-index: 10;
    text-align: left;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}

    .content_wrapper{
        margin-top: 20%;
        z-index: -1 !important;
    }

    #about{
      margin-top: 10%;
    }

    #projects{
      margin-top: 10%;
    }
    .modal-dialog{
      margin-right: 11% !important;
      margin-left: 11% !important
    }

}

@media screen and (max-width: 730px) {
  .modal-dialog{
    margin-right: 8% !important;
    margin-left: 8% !important
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

  body{
    overflow-x: hidden !important;
    
  }

  .column1 {
      width: 100%;
  }
  .column2{
  width: 100%;
  }

  #about_txt{ display: flex; flex-direction: column; }
  #about_c1 { order: 2; }
  #about_c2 { order: 1; }


    .about_column1 {
      width: 100%;
        
    }
    .about_column2{
      width: 100%;
    
  }
  .about_columm2 img{
      height: 50% !important;
      width: 50% !important;
      
  }
  #proj_g{
    margin-top: 5%;
  }
  
  #proj_j{
    margin-top: -15%;
  }

  #proj_k{
    margin-top: -20%;
  }
  #proj_n{
    margin-top: 5%;
  }
  #proj_r{
    margin-top: 15%;
  }

  #contact{
    margin-top: -10%;
  }

  #contactIntro{
    font-size: 22px;
    margin-bottom: 8%;
    margin-top: 3%;
  }


  .modal-content{
    height:auto;
    width: 500px;
  }

  .modal-body{
    width: 455px;
  }

  .carousel-control-next {
    margin-right: -80px;
  }
  .carousel-control-prev {
    margin-left: -30px;
  }

  .modal-dialog{
    margin-right: 4% !important; 
    margin-left: 4% !important;
  }
}


/* On screens that are less than 500px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 500px) {

  body{
		overflow-x: hidden !important;
	}
  #home{
    margin-top: 20%;  
  }


  .sidebar {
    display: none;
  }

  .navbar{
    display: block;
    position: fixed;
    width: 100vw;
    background-color: #faeeee;
    z-index: 10 !important;
  }
  
  .navbar-light .navbar-toggler {
    color:  #ff4da6;
    border-color:  #ff4da6;
  }
  
  .navbar-light .navbar-toggler-icon {
    background-image: url("menu_pic.png");
  }

  .iam, .name {
    font-size: 40px !important;
  }

  .column1 img{
    width: 80% !important;
    height: 60% !important; 
    margin-left: 10% !important;
    margin-right: 10% !important
}

.column2 img{
    width: 80% !important;
    height: 60% !important; 
    margin-left: 10% !important;
    margin-right: 10% !important
} 
  #proj_b{
    margin-top: -25% !important;
  }

  #proj_d{
    margin-top: 15% !important;
  }

  #proj_c{
    margin-top: -20% !important;
  }

  #proj_e{
    margin-top: 15% !important;
  }

  #proj_f{
    margin-top: -20% !important;
  }

  #proj{
    margin-top: 30% !important;
  }
  #proj_g{
    margin-top: 25% !important;
  }

  #proj_h{
    margin-top: -20% !important;
  }

  #proj_i{
    margin-top: -20% !important;
  }
  #proj_j{
    margin-top: -5%;
  }
  #proj_k{
    margin-top: 5% !important;
  }
  #proj_l{
    margin-top: -20% !important;
  }
  #proj_n{
    margin-top: 40% !important;
  }

  #proj_m{
    margin-top: -20% !important;
  }
  #proj_o{
    margin-top: 30% !important;
  }
  #proj_p{
    margin-top: -30% !important;
  }

  #proj_r{
    margin-top: 50% !important;
  }

  #proj_q{
    margin-top: -20% !important;
  }

  #proj_t{
    margin-top: 15% !important;
  }

  #proj_s{
    margin-top: -20% !important;
  }

  
  #contactIntro{
    font-size:20px;
    margin-bottom: 10%;
    margin-top: 5%;
    }

  
    .modal-content{
      height:auto;
      width: 380px;
    }
  
    .modal-body{
      width: 370px;
    }
  
    .carousel-control-next {
      margin-right: -30px;
    }
    .carousel-control-prev {
      margin-left: -20px;
    }
  
    .modal-dialog{
      margin-right: 4% !important; 
      margin-left: 4% !important;
    } 

    #menuToggle span{
      margin-left: -35px !important;
      width: 25px !important;
    }
  }
    
    @media screen and (max-width: 400px) {

    .modal-content{
      height:auto;
      width: 370px;
    }
  
    .modal-body{
      width: 360px;
      margin-left: -5% !important;
    }
  
    .carousel-control-next {
      margin-right: -30px;
    }
    .carousel-control-prev {
      margin-left: -1px;
    }
  
    .modal-dialog{
      margin-right: 1% !important; 
      margin-left: 1% !important;
    }
    
    #menuToggle span{
      margin-left: -40px !important;
      width: 25px !important;
    }
    
    #projects{
      margin-top: 10% !important;
    }


    #contact{
      margin-top: 20% !important;
    }

    #proj h3{
      margin-top: 55% !important;
      margin-bottom: -15% !important;
      font-size: 1.5rem;
    }
    h3{
      font-size: 1.5rem;
    }
    
  }