:root {
  --header-image: url('https://molecule31.neocities.org/images/header.png');
  --uaheader-image: url('https://molecule31.neocities.org/images/uaheader.png');
  --body-bg-image: url('https://molecule31.neocities.org/images/backgroundgrid.png');
  color-scheme: only light;
  --primary-color: rgba(245,245,245,0.8);
  --header-color: rgba(245,245,245,0.8);
  --secondary-color: #0A0A0A;
  --border-color: #202932;
  --hex-main-height: auto;
  }
  
.darkmode {
  --body-bg-image: url('https://molecule31.neocities.org/images/backgroundgridblack.png');
  --primary-color: rgba(33,33,33,0.9);
  --header-color: rgba(255,255,255,0.8);
  --secondary-color: #FFFFFF;  
  --border-color: #FAFFF2;
}

@font-face {
  font-family: 'molecule31_header_fontregular';
  src: url('/fonts/molecule31_header_font.ttf');
  font-weight: bold;
}

@font-face {
  font-family: 'molecule31_fontregular';
  src: url('/fonts/molecule31_font.ttf');
  font-weight: bold;
}

body {
  font-family: 'molecule31_fontregular';
  font-size: 16px;
  margin: 0;
  color: var(--secondary-color);
  background-color: var(--header-color);
  background-size: 32px;
  background-image: var(--body-bg-image);
  }

#icon {
  cursor: pointer;
  }
  
#flex {
  display: flex;
  }
  
#phone {
  display: flex;
  }  
  
#column {
  display: flex;
  flex-direction: column;
  }
  
#vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; 
  }
  
.randomcolormain {
  transition: background-color 0.5s;
  }

* {
  box-sizing: border-box;
  overflow-x: hidden;
  }

/* the "container" is what wraps your entire website */
#container {
  max-width: 900px;
  margin: 0 auto; /* Set center for page */
  }

header {
  background-color: var(--header-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  background-image: var(--header-image);
  background-size: 900px;
  width: 100%;
  border-top: none;
  height: 150px;
  image-rendering: pixelated;
  flex: 1;
}

timeheader {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  width: 176px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  
headerbar {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  }

rndtext {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  width: 32px;
  height: 108px;
  border-top: none;
  overflow: hidden;
  }
  
darkmodebox {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  width: 32px;
  height: 32px;
  overflow: hidden;
  flex-direction: column;
  align-items:center;
  }
  
.dark-mode-toggle {
  z-index: 100;
  border: 0px solid currentColor;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

navbar {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  padding: 20px;
  width: 242px;
  }
  
langbar {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  height: auto;
  width: 32px;
  padding: 6px;
  }
  
bside {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  flex: 1;
  padding: 20px;
  }

aside {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  width: 190px;
  padding: 20px;
  z-index: 2;
  }

main {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  flex: 1;
  padding: 20px;
  height: var(--hex-main-height);
}

recentmusic {
  background-color: var(--primary-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  height: 34px;
  width: 100%;
  position: relative;
  overflow: hidden;
	white-space: nowrap;
}

music {
  position: absolute; 
  overflow: hidden;
  line-height: 210%;
  }

footer {
  background-color: var(--header-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  font-size: 0px;
  height: 39px;
  margin-bottom: 10px;
  }

headline {
  background-color: var(--header-color);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  height: 28px;
  width: 100%;
  }

h1, h2 {
  font-size: 32px;
  font-family: 'molecule31_header_fontregular';
  line-height: 32px;
  margin-top: 0;
  margin-bottom: 10px;
}

h3 { /*Navigation picture*/
  margin-top: 8px;
  margin-bottom: 8px;
}

img { 
  
  image-rendering: pixelated;
  
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; 
  }

p {
  margin-top: 4px;
  margin-bottom: 4px;
}

#box {
  background-color: rgba(225,225,225,0.8);
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 10px;
  gap: 8px;
  font-size: 0px;
  flex-flow: wrap;
  }

/*Rainbow box*/

.gradient-box {
  --borderWidth: 0px;
  position: relative;
}
.gradient-box:after {
  content: '';
  position: absolute;
  height: calc(100% + var(--borderWidth) * 3);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(90deg, #FF0000, #FF6A00, #FFD800, #B6FF00, #4CFF00, #00FF21, #00FF90, #00FFFF, #0094FF, #0026FF, #4800FF, #B200FF, #FF00DC, #FF006E);
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 500% 500%;
  z-index: -1;
}

.notfound {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  background-color: rgba(255,255,255,0.8);
  border: 1px solid hsl(80, 100%, 50%);
  -webkit-animation: rainbow 3s linear infinite;
  height: 150px;
  margin-top: 10px;
  padding: 20px;
  }

r {animation: animatedgradient 1.25s linear infinite;}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
}

/*Animation*/

/*raibow box and text*/
@keyframes animatedgradient {
  
  /*box*/
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
	
	/*text*/
	0%, 100% { color: #7ccdea; }
  16% { color: #0074d9; }
  32% { color: #2ecc40; }
  48% { color: #ffdc00; }
  64% { color: #b10dc9; }
  80% { color: #ff4136; }
}

/*raibow border*/
@-webkit-keyframes rainbow {
		100%,0%{border-color: hsl(0,100%,30%);}
		8%{border-color: hsl(30,100%,30%);}
		16%{border-color: hsl(60,100%,30%);}
		25%{border-color: hsl(90,100%,30%);}
		33%{border-color: hsl(120,100%,30%);}
		41%{border-color: hsl(150,100%,30%);}
		50%{border-color: hsl(180,100%,30%);}
		58%{border-color: hsl(210,100%,30%);}
		66%{border-color: hsl(240,100%,30%);}
		75%{border-color: hsl(270,100%,30%);}
		83%{border-color: hsl(300,100%,30%);}
		91%{border-color: hsl(330,100%,30%);}
}

/*Phone settings*/  

@media only screen and (max-width: 900px) {
  
#twitterdie {
  visibility: collapse;
}
  
#flex {
  flex-wrap: wrap;
  order: 2;
  }
  
#phone {
  display: flex;
  flex-direction: column;
  order: 1;
  }  
  
#box {
  height: 100%;
  padding: 10px;
  flex-flow: wrap;
  justify-content: center;
  gap: 4px;
  }
  
#creditbox {
  flex-flow: wrap;
  }
  
navbar {
  width: 100%;
  margin-right: 10px;
  margin-left: 10px;
  order: 2;
  flex: 1;
  }
  
langbar {
  margin-right: 10px;
  order: 3;
  }

bside{
  order: 1;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  }

aside {
  order: 4;
  width: 100%;
  margin-top: 10px;
  margin-right: 10px;
  }

main {
  order: 3;
  margin-right: 10px;
  margin-left: 10px;
  }
  
header {
  --header-image: url('https://molecule31.neocities.org/images/headermobile.png');
  --uaheader-image: url('https://molecule31.neocities.org/images/uaheadermobile.png');
  margin-left: 10px;
  }
  
rndtext {
  margin-right: 10px;
  }
  
footer {
  order: 5;
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin-bottom: 0;
  }
  
headline {
  border-left: none;
  border-right: none;
  }
  
timeheader{
  width: 176px;
  margin-left: 10px;
  
  }
  
headerbar{
  margin-right: 10px;
  }  

recentmusic {
  position: relative;
  border-left: none;
  border-right: none;
  justify-content: space-evenly;
  height: 58px;
  } 
  
music {
  position: relative; 
  text-align: center;
  line-height: 120%;
  }
  
  
}

li { list-style: none; }

a:link {color: var(--secondary-color);} a:visited {color: var(--secondary-color);} a:hover {animation: animatedgradient 1.25s linear infinite;}