body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}


.navbar {
  background-color: hsla(0, 0%, 0%, 0.8);
  float: left;
  justify-content: space-around; 
    position: fixed;
  padding: 0px;
  margin: 0px;
  list-style: none;
        border-right: 10px solid white;
}



.navbar_item:first-child {
height: 56px;
      border-color: white;
  border-bottom-width: 1px;
    border-top-color: white;
  border-top-width: 1px;
      padding: 0;
  margin: 0;
    margin-top: 0;
    line-height: 50px;
    background-color: hsla(160, 0%, 7%, .7);
}


.navbar_item {

    display: block;
    text-decoration: none;
    color: white;
    padding-bottom: 0;
    padding-top: 0;
    border-bottom: 1px solid white;
    width: 140px;
}

.navbar_item button {
    flex-grow: 1;
    font-size: 16px;
    background: none;
    height: 23vh;
    width: 100%;
    text-decoration: none;
    color: white;
    border: none;
    flex-grow: 1;
    flex-basis: auto;
}

.logo {
    position: fixed;
margin-left: 0px;
    padding-top: 0px;
    padding-left: 0px;
    margin: 0px;
    border-top: none;


}

.logoImage {
    position: fixed;
    border-top: none;
    width: 130px;
    padding-left: 0px;
    margin-left: 4px;
    margin-top: 10px;
}

.mainPages {
  display: flex;
  margin-left: 150px;
    width: 88vw;
}

.mainPages p {
  color:black;
    width: 81vw;

    flex-wrap: wrap;
    background-color: hsla(0, 0%, 100%, 0.4);
    margin-left: 6px;
}

.mainPages p a {
    color: green;
    margin: 0;
    display:inline;
    padding: 0;
}

.portfolio {
    
}



.portbar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around; 
  padding: 0;
  margin: 0;
  list-style: none;
    margin-left: -10px;
}

.portbar_item {
  background: hsla(0, 0%, 100%, 0.5);
  text-decoration: none;
  padding: 0px;
  border-style: solid;
  border-color: #D3D3D3;
  border-bottom-width: 2px;
  border-top-width: 0px;
  border-left-width: 1px;
  border-right-width: 1px;
  width: 200px;
  height: 50px;
  margin-top: 6px;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  width: 25%;
    
}


.portbar_item button {
    display: inline-block;
    flex-grow: 1;
    font-size: 18px;
    background: none;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: #3b3b3b;
    border: none;
    flex: 0 1 auto;
    flex-grow: 1;
    flex-basis: auto;
    font-weight: bold;
}


.portbar_item.active {
  background-color: #8b005f; /* Dark pink */
  color: white;
}

.portbar_item.active button {
  color: white;
  font-weight: bold;
}

.portbar_item button:focus {
    outline-color: lightgray;
    outline-style: solid;
    outline-width: 1px;
}

.portbar_item a {

    text-decoration: none;
    color: green;
    padding-bottom: 9vh;
    padding-top: 8vh;
}

/*Div on page elements that don't have top nav*/
.pageHeaderSpace {
display: flex;
  height: 50px;
border-style: solid;
    width: 100vw;
  border-color: white;
  border-bottom-width: 6px;
  border-top-width: 6px;
  background-color: hsla(0, 0%, 100%, 0.2);
    margin-left: -10px;
}


h1 {
margin-left: 6px;
}
    
    
.myPortfolio {
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Styling the gallery objects */

.myBtn {
    display: inline-flex;
    position: relative;
    width: 25vw;
    height: 30vw;
    padding: 0vw;
    margin: 1vw;
      justify-content: space-around; 
      text-align: center;
  font-size: smaller;
  text-indent: 0;
    outline: 1px solid lightgray;

}

.gallery_fig {
    width: 100%;
    clear: top;
    padding-top: 1vw;
    background: rgba(256, 256, 256, 1);
    color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; 
    height:5vw;
}



/* Styling the gallery images */

.Title {
    padding-top: 1em;
    font-style: italic;
    font-size: larger;
}

.portImage {
    width: 25vw;
    height: 25vw;;
    margin: 0;
    padding: 0;
}

/* MODAL CODE FROM W3SCHOOLS */


/* The Modal (background) */


/* Modal Content/Box */


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.75); /* Black w/ opacity */

}


.modal h2{
    color: #585858;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 85%; /* Could be more or less, depending on screen size */
}



.modal-body p {
    width: 92%;
    display: flex;
}

/* Gallery videos and images styling */

.gallery-video {
	position:relative;
	overflow:hidden;
    height: 40vw;
}



/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 36px;
  font-weight: bold;
}




/* ABOUT Page */


#AboutImage {
    width: 88vw;
    object-fit: contain;
}

#CircleImage {
    width: 88vw;
    object-fit: contain;
}

        #EngageImage {
    width: 88vw;
    object-fit: contain;
}
    

.cv {
    list-style: none;
}

.cv li:first-child {
    list-style: none;
    font-weight: bold;
}

/* */

#mySocial{
    display: flex;
}

#myContact{
    display: flex;
}

#contactform {
    margin: 0;
    margin-right: 26px;
    padding-right: 1px;
border: none; 
    border-right: solid lightgray 1px;
    width: 450px;
    float: left;
    height: 900px;
}

.contactinfo {
    margin-top: 30px;

}


#terryYoutube {
    display: inline-flex;
    width: 40vw;
    height: 24vw;
    margin: 3px;
}

#terrySoundcloud {
        display: inline-flex;
        width: 40vw;
    height: 24vw;
    margin: 3px;
}


.navbar_item.active,
.navbar_item.active button {
  background-color: #00274d; /* Dark blue */
  color: white; /* Optional: keep text readable */
}


.navbar_item:first-child {
  background: linear-gradient(
    -45deg,
    #ff69b4,   /* hot pink */
    #ffb6c1,   /* light pink */
    #87cefa,   /* light sky blue */
    #1e90ff    /* dodger blue */
  );
  background-size: 400% 400%;
  animation: gradientMove 20s ease infinite;
  border: none !important;
  width: 100%; /* ensure it spans full navbar width */
  box-sizing: border-box;
  filter: none;
}

.logoImage {
  filter: invert(1) brightness(2.2) contrast(2.2) grayscale(1);
  background: none;
  border: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;

}

@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }


}

@media screen and (max-width: 980px) {
    .navbar {
        margin: 0px;
        padding: 0px;
        display: flex;;
        width: 100vw;
        height: 200px;
        position: fixed;
        bottom: 0px;
        text-align: center;
        float: bottom;
        z-index: 2;
        background-color: hsla(233, 1%, 15%, 1);
    }
    
    
        .navbar_item {
    height: 200px;
    width: 20vw;
    text-decoration: none;
    color: blue;
    border: 1px solid white;
    border-bottom: 0px solid white;
align-content: center;
vertical-align: middle;

    line-height: 100px;
}

    h1 {
        margin-left: 10px;
    }
    
    .navbar_item:first-child {
        height: 200px;
      border-color: white;
width: 20vw;
  border-bottom: 1px solid white;
    border-top-color: white;
  border-top-width: 6px;
      padding: 0;
  margin: 0;
    margin-top: 0;
    line-height: 200px;
    background-color: hsla(240, 52%, 32%, .9);
            vertical-align: middle;
}
    
    

    
.logo input[type="image"],
.logoImage {
  filter: none;
  color: inherit;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

    .navbar_item button {
        align-content: center;
        height: 200px;
        vertical-align: middle;
    font-size: 21px;

 
    }
    

    
    .mainPages {
  display: flex;
margin:0px;

        

}
    
    .mainPages p {
        width: 95vw;
        margin-left: 10px;
    }
    
        #allWork {
        margin-left: 8vw;
        margin-bottom: 140px;
    }
    #myInstallations {
        margin-left: 8vw;
        margin-bottom: 140px;
    }
    
        #myStudio {
        margin-left: 8vw;
        margin-bottom: 140px;
    }
    
        #mySpatial {
        margin-left: 8vw;
        margin-bottom: 140px;
    }
    
    
    #AboutImage {
    width: 100vw;
    object-fit: contain;
}
    
        #CircleImage {
    width: 100vw;
    object-fit: contain;
}
   
            #EngageImage {
    width: 100vw;
    object-fit: contain;
}
    

    
        #myAbout {

    }
    
        #myContact {
        margin-left: 0vw;
    }
    
    .myBtn {
    display: inline-flex;
    position: relative;
    width: 40vw;
    height: 48vw;
    padding: 0vw;
    margin: 1vw;
      justify-content: space-around; 
      text-align: center;
  text-indent: 0;
}
    
    .gallery_fig {
    width: 100%;
    clear: top;
    padding-top: 1vw;
    background: rgba(256, 256, 256, 1);
    color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; 
    height:10vw;
}
    
    .portImage {
    width: 40vw;
    height: 40vw;;
    margin: 0;
    padding: 0;
}
    
    .portBar {
        margin-left: -10px;
        width: 100vw;
    }
    
    
    .portbar_item {
  background: hsla(0, 0%, 100%, 0.5);
  text-decoration: none;
  padding: 0px;
  border-style: solid;
  border-color: #D3D3D3;
  border-bottom-width: 2px;
  border-top-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
  width: 100vw;
  margin-top: 0px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  width: 25vw;
    height: 100px;
}
    
 .portbar_item button {
    font-size: 21px;
 
 }
   
    #contactform {
    width: 90vw; 
        border-right: none;
}
    
    
.cv {
    list-style: none;
    max-width: 90vw;
}

.cv li:first-child {
    list-style: none;
    font-weight: bold;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.75); /* Black w/ opacity */

}
    
.modal-body p {
    width: 82%;
    display: flex;
}

.modal-content p {
        width: 80vw;
        margin-left: 10px;
    }
    
    
    .logo {
    position: relative;
width: 100%;
margin: 0px;
    border-top: none;
        border: none;

}

    .logoImage {
    position: relative;
    border-top: none;
    width: 100px;
    color: pink;

margin-top: 88.6px;
    vertical-align: center;
    border: none;

}


      
  .navbar_item.active,
  .navbar_item.active button {
    background-color: #00274d;
    color: white;
  }
        
      
  .navbar_item:first-child {
    background: linear-gradient(-45deg, #ff007f, #ffa500, #ff1493, #000000);
    background-size: 400% 400%;
    animation: gradientMove 20s ease infinite; /* slowed down */
    border: 2px solid #333 !important;
    filter: invert(1); /* inverts text and borders */
  }

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

  .logo input[type="image"],
  .logoImage {
    filter: invert(1) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
}
  
  .logo input[type="image"],
.logoImage {
  filter: none;
  color: pink;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}
  
}

}