/* Styles organized Top of Page to Bottom */




.test {
    width: 300px!important;
    height: 300px!important;
}



/* Header Section Styles */

.topBar {
    width: 100%;
    height: 7px;
    text-align: center;
}


.bnLogo {
    margin-top: 5px;
    margin-bottom: 15px;
    width: 40px!important;
    height: 40px!important;
    margin-left: auto;
    margin-right: auto;
}

.bnLogo svg {
    width: 100%!important;
    height: 100%!important;
}

.displayColor {
    background-color: #08a2c3!important;
}

.redColor {
    background-color: #EF4B6D!important;
}

.headlineEMP {
    padding-left: 10px;
    padding-right: 20px;
}

.header-section {
    position: relative;
    background-color: #87CEEB;
    color: white;
    padding: 100px 0;
    margin-bottom: 0;
    display: inline;


}

.displayFontSecondary {
    font-family: "gelo", serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

.displayFont {
    color: #08a2c3;
    font-family: "gelo", serif;
    font-weight: 800;
    font-style: normal;
}

h1 { 
    margin-top: 5px;
    text-align: center;
    z-index: 500;
    padding-right: 20px;
    padding-left: 10px;
    margin-bottom: 20px;
}

.headerContainer {
    z-index: = -2;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}



.content2-section {
    background-image: url('bottom-pattern.svg'); /* Path to your SVG file */
    background-repeat: repeat-x;
    background-size: 5% 10%%;
    background-position: bottom;
    padding-left: 50px;
    padding-right: 50px;
}

.background-svg {
    background-image: url('MainBackgroundSVG.svg'); /* Path to your SVG file */
    background-repeat: no-repeat;
    background-position: center; /* Center horizontally */
    background-size: 100% 100%;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    height: 35vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    spacing
}






/* Content Section Styles */

.contentP {
    font-size: 18px;
    text-align: center;
    text-justify: auto;
    margin-left: 15px;
    margin-right: 15px;
}

.content-sections {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin-left: 6px;
    margin-right: 6px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 30px;

}

.character-anim-container {
    display: inline-block;
    vertical-align: middle;
    margin-top: 20px;
}

.clickable-svg-1 {
    display: inline-block;
    vertical-align: middle;
}

.contentSectionBanner {
    padding-bottom: 20px;    
}

.content-section {
    display: block;
    background-color: white;
    margin: 5px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}

.content-section h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.content-section p {
    margin-bottom: 20px;
}

.custom-button {
    background-color: #08a2c3;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 60px;

}

.content-section .col-md-4 {
    margin-bottom: 40px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.custom-button:hover {
    background-color: #77CDD8;
}






/* Footer Section Styles */

.footer-section {
    margin-top: 5px;
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/* Custom Styles for Animations */
.character-anim-container svg {
    display: inline-block;
    vertical-align: middle;
}

.clickable-svg-1 svg {
    display: inline-block;
    vertical-align: middle;
}

.ButtonRow {
    margin-top: 50px;
    text-align: center;
}

.bnLogo-white {
    margin-top: 5px;
    margin-bottom: 15px;
    width: 60px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;

}
 .footer-color {
            background-color: #DDDDDD;
        }




/* highlight Effect */

.highlight-container, .highlight {
  position: relative;
}

.highlight-container {
  display: inline-block;
}

.highlight-container:before {
  content: " ";
  display: block;
  height: 70%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  margin-top: 20px;
  position: absolute;
  background: #FFFF50;
  transform: rotate(-5deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
  z-index: -4;
}

.illustration-container {
            position: relative;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

.stacked-image:nth-child(2) {
    top: 20px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
}

.stacked-image img {
    width: 100% !important;
    height: auto !important;
}

.bgThings {
    width: 100% !important;
    height: 100% !important;
}

.windThings {
    position: absolute;
    top: -15%;
  left: 10%;
  width: 100% !important;
  height: auto !important;
   z-index: -3;
}




.treeThings {
    position: absolute;
    top: -46%;
  left: -1%;
  width: 103% !important;
  height: auto !important;
}


.catThings {
  position: absolute;
  top: 70%;
  left: 62%;
  width: 35% !important;
  height: auto !important;
}

.blakeThings {
  position: absolute;
  top: 30%;
  left: 35%;
  width: 35% !important;
  height: auto !important;
}

.squirrelThings {
    position: absolute;
    top: 46%;
    left: 7%;
    width: 18% !important;
    height: auto !important;
}



       

    

/* New Top SVG Stuff */
.background-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
     z-index: -6;
}

.background {
    position: absolute;
    top: 0;
    width: 200%; /* Twice the width to enable panning */

}

.top-background {
    background-image: url('FarBG_Clouds.svg');
    background-repeat: repeat-x;
    animation: backgroundScroll 100s linear infinite;
    height: 50%;
    z-index: -5;
}

.bottom-background {
    background-image: url('FarBG_Land.svg');
    height: 68%;
    z-index: -5;
    
}

.about-me {
    margin-top: 30px;
}

.bottom-background img {
    z-index: -5;

}



/* Scrolling Anim */
        @keyframes backgroundScroll {
    0%   {background-position: 0% 0; opacity: 0;}
    6%   {opacity: 1;}
    94%   {opacity: 1;}
    100% {background-position: 200vh 0; opacity: 0;}
}




.testText::before{
  content: '';
  animation: profile 50s infinite;
}
@keyframes profile {
  0% { content: 'illustrations'}
  20% { content: 'animations'}
  40% { content: '3d models'}
  60% { content: 'publications'}
  80% { content: 'websites'}
  100% { content: 'illustrations'}
}



/* Media Queries */
@media (max-width: 767px) {

    .windThings {
    position: absolute;
    top: 40%;
  left: -40%;
  width: 200% !important;
  height: auto !important;
   z-index: -3;
}

    .bottom-background  {
       opacity: .5;
    }





    h1 {
        margin-top: 10px !important;
    font-size: 45px!important;
    }

     h5 {
    font-size: 26px!important;
    }

    .illustration-container {

        width: 95%!important;
    }

    .content-section {
        padding-left: 35px;
        padding-right: 35px;

    }


    .headerContainer {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .highlight-container:before {
      content: " ";
      display: block;
      height: 70%;
      width: 100%;
      margin-left: -3px;
      margin-right: -3px;
      margin-top: 10px;
      position: absolute;
      background: #FFFF50;
      transform: rotate(-5deg);
      top: -1px;
      left: -1px;
      border-radius: 20% 25% 20% 24%;
      padding: 10px 3px 3px 10px;
      z-index: -4;
    }


 

.custom-button {
    width: 90%;
    margin-bottom: 10px;
}

.ButtonRow {
    margin-bottom: 20px;
}



.background-svg {
    height: 55vw!important;
}

}