body {
    background-color:#F5F3ED;
    margin:0px;
    min-width: 390px;
}

h1 {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    color:#6A00BD;
}

h2 {
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    color:#6A00BD;
    /*margin: 48px 0 24px 0;*/
}

h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    color:#1C3E68;
}

.purple {
    color:#6A00BD !important;
}

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

.background {
    display:grid;
    background-color: rgba(227, 231, 233, .45);
    padding-bottom: 36px;
    margin-top:48px;
}

h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color:#1C3E68;
    margin: 16px 0 8px 0;
}

h5 {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
    color:#1C3E68;
    margin:0;
}

p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #2A2A2A;
}

.colorSlate {
    color: #1C3E68 !important;
}

.colorPurple {
    color: #6A00BD !important;
}

header {
    display:flex;
    /*justify-content:space-around;*/
    align-items:center;
    background-color: #F5F3ED;
    padding: 6px 0px 0px 0px;
    border-top:solid #9478C4 3px;
    border-bottom: solid #6A00BD 1px;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, .25);
    position:fixed;
    width:100%;
    z-index:20;
}

.navcontent {
    display:flex;
    justify-content: space-between;
    padding: 0 36px 0 36px;
    width: 100%;
}

.container {
    background-color: transparent !important;   
}

.mynav {
    background-color: #F5F3ED;
    border-top:solid #9478C4 3px;
    border-bottom: solid #6A00BD 1px;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, .25);
    padding: 3px 36px 0 36px;
}

.navbar-nav {
    margin-left: auto ;
    margin-right:0 !important;
  }

.inline-block {
    display: inline-block;
    vertical-align: top;
}

/*.logo {
    width:23%;
    padding:1%;
    text-align: center;
}*/

/* nav {
    /*width:73%;
    padding:1%;
}*/

ul {
    /*width: 50%;
    margin-left:auto; */
    margin:0px;
    padding:0px;
}

a {
    text-decoration: none;
}

button {
    font-family: 'Roboto', sans-serif;
    font-weight:600;
    font-size: 16px;
    text-decoration: none;
    color:#1C3E68;
    padding: 8px 8px;
    margin: 0 8px;
    border: solid rgba(42, 77, 97, 0) 4px;
    border-radius: 7px 7px 0 0;
    transition-duration: 0.2s;
    cursor: pointer;
    
}

button:hover {
    background-color: rgba(42, 77, 97, .15);
    border-bottom: solid #6A00BD 4px;
    /*border: solid rgba(42, 77, 97, 0) 4px;*/
    color: #6A00BD;
}

.active {
    border-bottom: solid #6A00BD 4px;
}

.button2  {
    background-color: #FDFCF4;
    padding: 8px 16px;
    border-radius: 28px;
    border: solid #6A00BD 2px;
    font-size: 20px;
    color:#6A00BD;
    fill:#6A00BD;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, .50);
    transition-duration: 0.2s;
    cursor: pointer;
    margin:auto;
}

.button2:hover {
    background-color: #FDFCF4;
    border-radius: 28px;
    border: solid #1C3E68 2px;
    font-size: 20px;
    color:#1C3E68;
    fill:#1C3E68;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .00);
}

.button3  {
    background-color: #FDFCF4;
    padding: 6px 12px;
    border-radius: 28px;
    border: solid #1C3E68 1px;
    font-size: 16px;
    color:#1C3E68;
    fill:#1C3E68;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .50);
    transition-duration: 0.2s;
    cursor: pointer;
    position: relative;
    top: 4px;
}

.button3:hover {
    background-color: #FDFCF4;
    border-radius: 28px;
    border: solid #6A00BD 1px;
    font-size: 16px;
    color:#6A00BD;
    fill:#6A00BD;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .00);
}

.resume {
    margin-left:25px;
}

.button4  {
    background-color: #FDFCF4;
    padding: 6px 12px;
    border-radius: 7px;
    border: none;
    font-size: 16px;
    color:#1C3E68;
    fill:#1C3E68;
    transition-duration: 0.2s;
    cursor: pointer;
}

.button4:hover {
    background-color: #FDFCF4;
    padding: 6px 12px;
    border-radius: 7px;
    border: none;
    font-size: 16px;
    color:#000000;
    fill:#000000;
}

.button_mMenu {
    background-color: rgba(42, 77, 97, 0);
    font-family: 'Roboto', sans-serif;
    font-weight:600;
    font-size: 16px;
    text-decoration: none;
    color:#1C3E68;
    padding: 6px 6px;
    width:80%;
    min-width: 200px;
    margin: 0 8px;
    border: solid rgba(42, 77, 97, 0) 3px;
    border-radius: 7px;
    transition-duration: 0.2s;
    cursor: pointer;
}

.button_mMenu:hover {
    background-color: rgba(42, 77, 97, .08);
    border-bottom: solid #6A00BD 3px;
    color: #6A00BD;
}

.mMenu {
    display: none;  
}
.dropDown {
    display: none;
}

.heroImg {
  background-image: url(../images/hero_img.jpg);
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 310px;
  margin-top:30px;
  z-index: 1;  
}

.jumbotron {
    background-image: url(../images/hero_img.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: calc(20vh - 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
}

.cslogo {
    margin-left: auto;
    position: relative;
    right:10%;
}

.shadow1 {
    border-radius: 12px;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, .65);
}

.content {
    display: flex;
    flex-direction: column;
    width:100%;
    height:auto;
    background-color: #F5F3ED;
    padding:24px 0 0 0;
}

.overlap {
    animation: overlap 5s;
    display: block;
    position: relative;
    bottom:62px;
    margin-left: 150%;
    z-index: 2;
}

.backcolor {
    background-color: rgba(106, 0, 189, .05);
    padding: 48px 0;
}

.space {
    margin-top: 48px;
    margin-bottom: 48px;
}

.rowspace {
    padding: 48px;
}

.title {
    height:70px;
    z-index: 2;
}

.mainflex {
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    vertical-align:middle;
    position: relative;
    top: -16px;
    margin: 0 10% 0 10%;
}

.aboutflex {
    display:flex;
    flex-direction: row;
    justify-content:space-around;
    vertical-align:top;
    align-items:start;
    top: -16px;
    margin: 0 5% 0 5%;
}

.abouttext {
    display:flex;
    flex-direction: row;
    vertical-align:top;
    align-items: center;
    padding: 0 16px 16px 16px;
    display:inline; 
    width:75%; 
    margin-left: 4%;
    margin-right: 8px;
}

.aboutimg {
    display:flex;
    flex-direction: row;
    vertical-align:top;
    align-items: center;
    padding: 16px;
    margin-right: 4%;
}

.skills {
    flex-direction: column;
    vertical-align: top;
    align-items:flex-start;  
    width: 23%;
    background-color: rgba(148, 120, 196, .20);
    box-shadow: 0px 2px 4px rgba(28,62,104, .65) ;
    border-radius: 12px;
    padding: 24px;
    min-height: 250px;
}

.center {
    margin:auto !important;
    text-align: center;
}

.right {
    justify-content:end;
}

.vcenter {
    margin:auto !important;
    vertical-align: middle;
}

.titles {
    display:flex; 
    margin: 48px auto 24px auto;
}

.grid_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:48px;
    margin: 0 12%;
}

.grid_container > div {
    background-color: rgba(28, 62, 104, .15);
    box-shadow: 0px 2px 4px rgba(148, 120, 196, .65) ;
    border-radius: 12px;
    padding: 24px;
  }

.item {
    cursor: pointer;
    transition: transform 0.3s ease-in;
    text-align:left;
    padding: 0 10px 0 10px;
}

.item:hover {
    transform: scale(1.015);
    box-shadow: 0px 4px 8px rgba(148, 120, 196, .65) ;
}

.intro {
    display:flex;
    justify-content:center;
    vertical-align:middle;
    align-items: center;
    max-width: 900px;
    min-width:200px;
    margin: 24px auto;
}

.ftintro {
    display:flex;
    vertical-align:middle;
    align-content: center;
    max-width: 700px;
    min-width:200px;
}

.photo {
    display:flex;
    justify-content:center;
    vertical-align:middle;
    align-content: center;
    max-width: 360px;
    min-width:200px;
    width: 100%;
}

.message {
    display:flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: auto;
}

.textinput {
    min-width: 450px;
    max-width: 450px;
    max-height: 150px;
    min-height: 60px;
    padding:5px;
    margin-bottom: 24px;
}

.fieldinput {
    min-width: 350px;
    max-width: 350px;
    max-height: 24px;
    min-height: 18px;
    padding:5px;
    margin-bottom: 16px;
}

.next {
    display:flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width:150px;
    margin: 0 24px;    
}

footer {
    background-color:#F5F3ED;/* #9478C4;*/
    display: grid;
    grid-template-areas: footer;
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr auto;
    /*flex-direction: row;
    justify-content: space-around;
    align-items: center;*/
    border-top: solid 3px #6A00BD;
    box-shadow: 0px -3px 3px rgba(0, 0, 0, .25);
    margin: auto;
    bottom: 0px;
    padding: 24px 0 0 0;
    width: 100%;
    height:100%;
}

.pdlogo {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
}

.ftcontent {
    display: flex;
    justify-content: space-between;
    padding-left: 60px;
    padding-right:60px;
}

.contact {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}

.social {
    display: flex;
    align-items:left;
    padding-bottom: 16px;
}

.media {
    order: 1;
    align-self: center;
    padding: 0 8px;
}

.comm {
    display:flex;
    flex-direction: row;
    position: relative;
    padding-bottom: 12px;   
}

.copyright {
    background-color:#8D4AC2;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 16px;
    margin-top: 16px;

}

/* images modal */

.enlarge-image {
    cursor: zoom-in;
    transition: transform 0.3s ease-in;
  }

  .enlarge-image:hover {
    transform: scale(1.04);
  }

  .enlarge-image:focus {
    outline: none;
  }

  .modal-dialog {
    max-width: 92vw;
    margin: auto;
  }

  .modal-content {
    background-color: #f8f9fa; /* Set your desired background color here */
  }

  .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-caption {
    text-align: center;
    margin-top: 20px;
    font-family: 'Baloo 2', cursive;
    font-weight: 600;
    font-size: 24px;
    }

    .modal-close {
    position: absolute;
    float:right;
    top: 0px;
    right: 20px;
    font-size: 40px;
    }

    .modal-close:hover {
    cursor: pointer;
    }

    .modal-prev,
    .modal-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 24px 16px;
      border: none;
      background: transparent;
      fill:rgba(245, 243, 237, 0.65);
      background-color: rgba(48, 48, 48, .20);
      transition: fill 0.3s ease-in-out; /* Remove transition animation */
      transition: background-color 0.3s ease-in;
    }

    .modal-prev:focus,
    .modal-next:focus {
        outline: none;
    }

    .modal-prev:hover,
    .modal-next:hover {
        cursor: pointer;
        fill:rgba(245, 243, 237); /* Change color on hover */
        background-color: rgba(48, 48, 48, .65);
        border: none;
    }

    .modal-prev {
        left: -8px;
        border-radius: 0 6px 6px 0;
    }

    .modal-next {
      right: -8px;
      border-radius: 6px 0 0 6px;
    }

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

    .mynavbar {
        display:none;
    }

    .mMenu {
        display: inline-block;
        vertical-align: top;
        z-index: 25;
    }

    .dropDown {
        display: none;
        background-color: rgba(245, 243, 237, 0.9);
        padding:16px;
        position: fixed;
        width:100%;
        right:0px;
        text-align: center;
        top:44px;
        z-index:18;
    }
    
    .dropDown, ul {
        list-style-type:none;
    }
    
    .dropDown, li {
        margin:8px 0 8px 0;
    }
    
    .toggle {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        fill:#1C3E68;
        cursor: pointer;
        transition: all .5s ease-in-out;
        /*border: 1px solid #9478C4;
        border-radius: 7px;*/
    }

    .toggleBurger {
        width: 36px;
        height: 5px;
        background: #1C3E68;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(148, 120, 196, .2);
        transition: all .2s ease-in-out;
    }

    .toggleBurger::before,
    .toggleBurger::after {
        content: '';
        position: absolute;
        width: 36px;
        height: 5px;
        background: #1C3E68;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(148, 120, 196, .2);
        transition: all .5s ease-in-out;
    }

    .toggleBurger::before {
        transform: translateY(-11px);
    }

    .toggleBurger::after {
        transform: translateY(11px);
    }
    
    .toggleBurger:hover {
        background: #6A00BD;
        fill:#6A00BD;
        cursor: pointer;
    }

    /* Animation */
    .toggle.open .toggleBurger {
        transform: translateX(-40px);
        background: transparent;
        box-shadow: none;
    }
    .toggle.open .toggleBurger::before {
        transform: rotate(45deg) translate(20px, -20px);
    }

    .toggle.open .toggleBurger::after {
        transform: rotate(-45deg) translate(20px, 20px);
    }

    .intro {
        display:flex;
        justify-content: center;
        vertical-align:middle;
        align-content: center;
        max-width: 700px;
        min-width:200px;
        margin: 24px auto; 
    }

    .aboutflex {
        display:flex;
        flex-direction: column;
        justify-content:center;
        vertical-align:top;
        align-items:center;
        position: relative;
        top: -16px;
        width: 100%;
        margin: auto;
    }

    .abouttext {
        display:flex;
        flex-direction: column;
        vertical-align:top;
        align-items: center;
        padding: 10px;
        width: auto;
    }

    .aboutimg {
        display:flex;
        flex-direction: column;
        vertical-align:top;
        align-items: center;
        padding: 16px;
        width:50%;
        margin:auto;
    }

}



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

    .heroImg {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        min-height: 25ex;
        z-index:1;
    }
    .overlap {
        display: block;
        position: relative;
        bottom: 7.5ex;
        width:90%;
        margin:auto;
        z-index: 2;
    }

     .title {
        width:100%;
    }

    .navcontent {
        display:flex;
        justify-content: space-between;
        padding: 0 10px 0 10px;
        width: 100%;
    }
    /* Mobile media query - flex*/

    .mainflex {
        display:flex;
        flex-direction:column;
        justify-content:center;
        vertical-align: middle;
        position: relative;
        top: -16px;
    }

    .photo {
        display:flex;
        justify-content:center;
        vertical-align:middle;
        align-content: center;
        max-width: 360px;
        min-width:200px;
        width: 100%;
    }

    .ftcontent {
        display:flex;
        flex-direction: column;
        justify-content: center;
        vertical-align: middle;
        position: relative;
        padding:0;
    }

    .aboutimg {
        display:flex;
        flex-direction: column;
        vertical-align:top;
        align-items: center;
        padding: 16px;
        width:90%;
        margin:auto;
    }

    .ftintro {
        display:flex;
        vertical-align:middle;
        justify-content: center;
        align-content: center;
        max-width: 700px;
        min-width:200px;
        margin: 24px auto; 
    }

    .skills {
        flex-direction: column;
        vertical-align: top;
        align-items: center;  
        width:90%;
        background-color: rgba(148, 120, 196, .20);
        box-shadow: 0px 2px 4px rgba(28,62,104, .65) ;
        border-radius: 12px;
        padding: 24px;
        margin-bottom:24px;
    }

    .social {
        display: flex;
        justify-content:center;
        align-items:center;
        padding-bottom: 16px;
    }
  
    .textinput {
        min-width: 350px;
        max-width: 350px;
        max-height: 150px;
        min-height: 60px;
        padding:5px;
        margin-bottom: 24px;
    }
    
/* Mobile media query - Grid*/

    .grid_container {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap:24px;
        margin: 0 8%;
      }
}