/* keep these colors:
background: linear-gradient(270deg, #8A4117 30%, #045F5F 70%)
#A8B682
rgba(67, 32, 12,.5)
rgba(12, 40, 40,.7)
#ffc0cb
rgba(255, 244, 233, .7
a6626e
123456
77BFC7

*/
body {
  height: 100%;
  color: black;
  font-family: monospace;
  background-image: url(red_neon_night.jpg);
    background-size: cover;
    background-attachment: fixed;
    }

p{font-family: monospace;}

.button {
        /*background-color: #77BFC7;*/
        opacity: 1;
        border: 2px solid black;
        border-radius: 8px;
       
         padding: 5px;
}

.banner {
  width: 70%;
  height: 20%;
  background-color: rgba(90,2,33, .2);
  border-radius: 20px;
  font-size: 0;
  border: 2px solid rgb(222,222,222); 
  position:relative;
  text-align: center;
}


.banner img {
  height : 20%;
  width: 100%;
  left:50%;
  
}

/*start grid layout - layout fixed Oct 17 2025 */

* {
  box-sizing: border-box;
}


.box {
  padding: 1em;
}
.wrapper {
  max-width: 100%;
  margin: 0 auto;
}
.wrapper > div { /*insert any background/border colors here for alllll boxes if wanted, otherwise remove and place in each individual div to customize*/
  padding: .6em;
  color: black;
  
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  grid-auto-rows: minmax(auto, auto);
}

.one_a {
  grid-column: 1/3;
  grid-row: 1;   
  border: 1px solid rgb(255, 239, 191); 
  background-color: rgba(0,0,0,.3); 
  border-radius: 5px;
}
.top {
  grid-column: 3/4;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  grid-row: 1;   
  border: 1px solid rgb(255, 239, 191); 
  background-color: rgba(0,0,0,.3);
}

.one_b {
  grid-column: 4/6;
  grid-row: 1;   
  border: 1px solid rgb(255, 239, 191); 
  background-color: rgba(0,0,0,.3);
  border-radius: 5px;
}
.two {
  grid-column-start: 1;
   grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 6;

}
.three {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 2;
  border-radius: 5px;
}
.four {
 grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
  border-radius: 5px;
}
.five {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 5;
  grid-row-end: 5;
  border-radius: 5px;
}
.six {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 4;
  border-radius: 5px;
}
.seven {
 grid-column-start: 5;
  grid-row-start: 1;
  grid-row-end: 4;
  border-radius: 5px;
}
.eight {
  grid-column-start: 6;
   grid-column-end:6;
  grid-row-start: 1;
  grid-row-end: 6;
}

/*for the contact page, still within this wrapper*/
.c0{   /*spacer, invisible */
  grid-column: 3/4;
  grid-row: 1;
  }
  
.c1 {
  grid-column: 3/4;
  grid-row: 2/6;
 margin:25px 0px 25px 0px;
  background-color: rgba(0,0,0,.3);
  border-radius: 30px;
}
.c2 {
  grid-column: 3/4;
  grid-row: 4/5;
  background-color: rgba(255,51,102,.6); 
  margin:-15px 0px -5px 0px;
  border-radius: 30px;
}
.c3 {
  grid-column: 3/4;
  grid-row: 5;
  background-color:rgba(165,255,255,.6); 
  border-radius: 30px;
}

.c4{
  grid-column: 3/4;
  grid-row: 6;
  background-color: rgba(255,51,102,.6);
  border-radius: 30px;
}
/*end contact page grid divs*/


/*end grid layout - layout fixed Oct 18 2025 */

/* Main content */
#contents {
    overflow: visible;
    margin: 0px;
    margin-bottom: 10px;
    width:90%;
    margin-left:16%;

}

.p1 {
  display: block;
  width:auto;
 padding:2px 0px 5px 0px;
  border: 2px solid white;
  justify-content:flex-start;
  position:relative;
  border-radius: 8px;
    background: rgba(0,0,0,.5); 
}
.p2{
 display: block;
  width:100px;
  padding:8px 0px 10px 0px;
  margin:3px;
  border: 2px solid white;
  justify-content:flex-start;
  position:relative;
  text-align:center;
  border-radius: 30px;
    background: rgba(129, 0, 42,.5);
}

/* end Main content and p boxes */

.sidenav {
  height: 30%;
  width: 150px;
  position: absolute;
  z-index: 0;
  background: rgba(31, 33, 38,.7);
      border: 2px solid white;
        opacity: 1;
        border-radius: 8px;
        color: #123456;
        padding: 5px;
  top: 1;
  left: 0;
  margin-left:170px;
  overflow-x: hidden;
  padding-top: 2px;
  
}
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 4px;
  text-decoration: none;
  font-size: .7rem;
  
  display: block;
  
  background: none;
  width:50%;
  text-align: center;
  cursor: pointer;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #c1f8f3;
}

/* Style the "active" element to highlight the current page */
.sidenav .active {
  background-color: #2196F3;
  color: #123456;
}
/* Style the search box inside the navigation bar */
.sidenav input[type=text] {
  float: left;
  padding: 4px;
  border: 1px;
  margin: 4px 8px 4px 16px;
  font-size: .7rem;
}
/*dropdown with links*/ 
/* Style The Dropdown Button */
.dropbtn {
  padding: 4%;
  border-radius: 10px;
  font-size: .55rem;
  cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: fixed;
  font-size: .45rem;
  background-color: rgba(18,52,86, .9);
  width: 110px;
 
  z-index: 0;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 4px 6px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgba(122,142,169, .5)}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: rgba(41,77,64, .5)
}
/*dropdown end */
.dropdown-container {
  display: block;
  background-color: #b2dbc4;
  padding-left: 4px;
}

/* link customizing */
a:link {
  color: white;
  font-size: .65rem;
}
a:visited {
  color: #ffc0cb;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #a6626e;
  background-color: rgba(255, 244, 233, .7);
  text-decoration: underline;
}