:root {
  --bg:#0d2523; /*background for the main boxes */
  --accent-1:#42bcb0; /*accent color for the main boxes border*/
  --accent-2:#ff710a; /*accent color for the main box text*/
  --accent-3:#ffc839; /*accent color for the text of the nav bar */
  --accent-4:#003332; /*accent color for the background of the drop down nav bar*/
  
}

.lightbulb {
  position:absolute;
  top:-70px;
  left:40px;
  }
  
.thumbnail {
  position:absolute;
  top:150px;
  right:10px;
  border:5px groove darkorange;
  
  }

#outerBar {
  background-color:grey;
  border-radius: 15px;
  border: 2px solid var(--accent-1);

}
#insideBar {
  background-color:var(--accent-3);
  color: var(--accent-1);
  align-content: left;
  border-radius: 15px;
}

body {
	background-image: url("https://auzziejay.com/images/digimon/circuitboard3.gif");
	font-family: 'karmafuture';
	text-align: center;

	
}

body a:link {
	    color:var(--accent-3);
		text-shadow:
    0 0 10px var(--accent-1)

	
}

body a:visited {
	    color:var(--accent-3);
		text-shadow:
    0 0 10px var(--accent-3)

}



.neon {
  color: var(--accent-3);
    text-shadow:
    0 0 10px var(--accent-1)

;

}

.header {
  display:flex;
  justify-content: center;
	font-family: 'karmafuture';
  padding:10px;
  align-content: center;
  text-align: center;

 }
 
.header .neon {
  color: var(--accent-3);
    text-shadow:
    0 0 10px var(--accent-1)

;

}
 
.h1 .h2 .h3 .h4 {
  font-family: 'karmafuture';
}
 
.digimon {

  background-color:var(--bg);
  border:10px groove var(--accent-1);
  opacity:100%;
  transform: skew(-12deg);
  padding: 5px;
  color: var(--accent-2);
  font-family: 'pixel-digivolve';
  width:15%;
  animation-name: glow;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  
}



.box2 {

  background-color:var(--bg);
  border:10px groove var(--accent-1);
  opacity:100%;
  transform: skew(-12deg);
  padding: 5px;
  color: var(--accent-2);
  font-family: 'pixel-digivolve';
  width:50%;
  text-align:center;
  animation-name: glow;
  animation-duration: 30s;
  animation-iteration-count: infinite;

}

.wrapper {
	padding: 10px;
}

p {
 padding-left:30px; 
padding-right:30px; 
}

.box {

  display:block;
  background-color:var(--bg);
  border:10px groove var(--accent-1);
  opacity:100%;
  transform: skew(0deg);
  padding: 5px;
  color: var(--accent-2);
  font-family: 'pixel-digivolve';
  width:90%;
  text-align:center;
  animation-name: glow;
  animation-duration: 30s;
  animation-iteration-count: infinite;

}

@media only screen and (max-width: 600px) {
  .digimon, .box, .box2, .header {
    transform: skew(0deg);
    flex-wrap: wrap;
    width:90%;
  }
}

@media only screen and (max-width: 800px) {
  .lightbulb, .thumbnail {
    display:none;
  }
}

textarea {
  color: var(--accent-4);
	background-color: var(--accent-1);
	overflow:hidden;
}


#webamp[style]{
  position:absolute !important;
  bottom:0 !important;
  top:200px !important;
}


.badges {

  display:inline-block;
  background-color:var(--bg);
  background-image: url("https://auzziejay.com/images/digimon/scriptkeramon2.gif");
  border:10px groove red;
  opacity:100%;
  transform: skew(0deg);
  padding: 5px;
  color: var(--accent-2);
  font-family: 'pixel-digivolve';
  width:90%;
  text-align:left;

}

.badges h2 {


  color: red;


}

.keramon {
	position:relative;
	bottom: -40;
	
}

  .marquee {
            height: 81px;
            overflow: hidden;
            position: relative;
            
            color: #333;
            border: 0px solid #4a4a4a;
        }
        
        .marquee p {
            position: absolute;
            width: 230%;
            height: 100%;
            margin: 0;
            line-height: 31px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 40s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }

.dropbtn {
  background-color: var(--accent-1);
  transform:skew(-12deg);
  color: var(--accent-3);
  padding: 10px;
  font-size: 16px;
  border: groove;
  border-width: 10px;
  border-color: var(--accent-2);
  cursor: pointer;
  font-family: 'pixel-digivolve';
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  transform:skew(0deg);
  position: absolute;
  background-color: var(--accent-4);
  border: groove;
  border-color: var(--accent-4);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-family: 'pixel-digivolve';
}

.dropdown-content a:link, a:visited {
  color: var(--accent-2);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border: groove;
  border-color: ff710a;
  border-width: 5px;
}

.dropdown-content a:hover {
	
	   text-shadow:
    0 0 10px var(--accent-2);
	
	}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: var(--accent-2);
  border-color: var(--accent-1);
  color: var(--accent-4);
}

@font-face {
  font-family: 'pixel-digivolve';
  src: url('https://auzziejay.com/fonts/Pixel%20Digivolve.otf');
  
}
  
@font-face {
  font-family: 'karmafuture';
  src: url('https://auzziejay.com/fonts/KarmaFuture.ttf');
  
}
  
@font-face {
  font-family: 'jurabook';
  src: url('https://auzziejay.com/fonts/JuraBook.ttf');
  
}
  
@keyframes glow {
  0%   {box-shadow: none;}
  50%  {box-shadow: 0px 10px 50px 1px var(--accent-2);}
  100% {box-shadow: none;}
}

.btn-log {
  position:absolute;
   left:30px;
   top  :1000px;
}

@media only screen and (max-width: 800px) {
  .btn-log {
    display:none;
  }
}



.btn-log button {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: radial-gradient(102.50px at 50% 50%, orange 0%, orange 67.4%, orange 69.61%, #F5383E 85.08%, #CE061A 100%);
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.63), inset 0px 0px 6px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

.btn-log button {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 200ms, scale 300ms;
  transform: translate(-50%,-52%);
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: radial-gradient(67.50px at 50% 50%, orange 0%, #E5373F 65.19%, #D43338 83.98%, #ED454A 88.4%, #D91222 100%);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.22);
  
  
}

.btn-log button:hover {
  transform: translate(-50%,-50%);
}

.btn-log button:active {
  transform: scale(0.98) translate(-51%,-52%);
}

.btn-log button {
  font-family: 'pixel-digivolve', sans-serif;
  color: #fff;
  font-heigth: 700;
  font-size: 32px;
  text-align: center;
  padding-top: 16px;
  text-transform: uppercase;
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }