body {
  background-color: rgb(84, 84, 155);
    margin: 0;
    color: black;
    font-family: 'basiic', 'New Times Roman', Georgia, Arial, Helvetica, sans-serif;
    line-height: 1.2;
}

@font-face {
    font-family: 'basiic';
    src: url("font/basiic.ttf") format('truetype');
}

@font-face {
	font-family : 'jmh';
	src: url("font/jmh.otf") format('opentype');
}

:root {
	text: peachpuff;
	link: #e8a0ae;
	accent: #a08378;	
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

.moon {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -9999;
    pointer-events: none; 
}

.maindiv {
  align-items: center;
  width: 55%;
  height:auto;
  border-width: 2px;
	border-spacing: 2px;
	border-style: solid;
	border-color: #FFFFFF;
	border-collapse: separate;
	border-radius:20px 20px 20px 20px;
	box-shadow: 0px 0px 60px #04047d;
	filter: drop-shadow(2px 2px #000000);
    margin: auto;
	overflow: hidden;
	z-index: 2;
	background: purple url(images/bg_night4.png);
	background-size: cover;
}

.undermain {
	width: 55%;
	height:auto;
	border-width: 2px;
	border-spacing: 2px;
	border-style: solid;
	border-color: #FFFFFF;
	border-collapse: separate;
	border-radius:20px 20px 20px 20px;
	box-shadow: 0px 0px 60px #04047d;
	filter: drop-shadow(2px 2px #000000);
	overflow: hidden;
	z-index: 2;
	margin : 20px;
	background: purple url(images/bg_night4.png);
	background-size: cover;		
}

.game {
	width: 55%;
	height:auto;
	border-width: 2px;
	border-spacing: 2px;
	border-style: solid;
	border-color: #FFFFFF;
	border-collapse: separate;
	border-radius:20px 20px 20px 20px;
	box-shadow: 0px 0px 60px #04047d;
	filter: drop-shadow(2px 2px #000000);
	overflow: hidden;
	z-index: 2;
	margin : 20px;
	background: purple url(images/bg_night4.png);
	background-size: cover;		
}

.logo {
   display: block;
   width:100%;
   height:auto;

   color: white;   
   padding: 3px;   
   flex-direction: column; 
   border-radius:8px 8px 0px 0px; 
   border-collapse: collapse;
   border-spacing: 2px;
   z-index: 2;
   filter: drop-shadow(2px 2px #000000);
   background: url(images/bgHeader.png);
   background-size: cover;
}

.menu {
	position: relative;
   font-family: 'jmh', 'basiic', 'Courier New', monospace;
   border:1px white solid;
   border-top:1px white solid; 
   display: block;
   width:100%;
   height:30px;
   color: white;   
   padding-top:5px;
   flex-direction: column; 
   border-collapse: collapse;
   border-spacing: 2px;
   z-index: 2;
   background: #16161D;
   filter: drop-shadow(2px 2px #000000);
   font-size : large;
}

.dropdown {
	position: relative;
	display: inline-block;
}
    
.dropdown-content {
	color: white;
	display: none;
	position: absolute;
	background-color: #000;
	border: 2px solid #fff;
	border-top: none;
	min-width: 150px;
	z-index: 100;
	padding: 5px 0;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
}
    
.dropdown-content a {
    color: white;
	text-decoration: none;
	display: block;
	padding: 5px 10px;
	white-space: nowrap;
}
    
.dropdown-content a:hover {
	color: white;
    background-color: #C7458E;
}
    
.dropdown:hover .dropdown-content {
    display: block;
}

.socials {
  padding : 1px;
  margin : 1px;
  display : ruby;
  grid-column: 1 / 3;
  grid-row: 3;
}

.buttonBanner {
	display : ruby;
}

.playlist {
  width:100%;
  height:180px;
  margin-top:5px;
}

.rightColumn {
  height:auto;
  width:21%;
  margin-left : 2%;
}

.hmm{
  height:319px;
  width:20%;
  margin-right : 2%;
}

.divheaders {
   border:1px white solid; 
   display: block;
   height:auto;
   width:auto;
   flex-direction: column; 
   border-collapse: collapse;
   border-spacing: 2px;
   z-index: 2;
   background: linear-gradient(90deg, rgba(23,58,177,1) 60%, rgba(67,99,221,1) 100%); 
   filter: drop-shadow(2px 2px #000000);
}

.buttons2 {
   border:1px white solid; 
   display: block;
   width:auto;  
   height:auto; 
   color: white;   
   flex-direction: column; 
   border-collapse: collapse;
   z-index: 2;
   background:#16161D; 
   filter: drop-shadow(2px 2px #000000);
}

.blinkies {
	padding : 10px;
	margin : 10px;
	display : ruby;
	grid-column: 1 / 3;
	grid-row: 3;
}

.chatbox {
   border:1px white solid;
   height: auto; 
   width: auto; 
   flex-direction: column; 
   border-collapse: collapse;
   border-spacing: 2px;
   margin-bottom:3px;
   margin-top:-1px;  
   background: #16161D; 
   filter: drop-shadow(2px 2px #000000);
}

.divintro {
  background: #16161D;
  background-size: cover;
  background: url(spacebg.gif); 
  background-position:center; 
  margin-top:15px; 
  height:319px;
  width:50%; 
  border:1px white solid;
  filter: drop-shadow(2px 2px #000000);
}

.worldheader {
   border:1px white solid; 
   display: block;
   height:auto;
   width:auto; 
   margin-top:-319px;
   flex-direction: column; 
   border-collapse: collapse;
   border-spacing: 2px;
   z-index: 2;   
   background: linear-gradient(-90deg, rgba(23,58,177,1) 60%, rgba(67,99,221,1) 100%); 
   filter: drop-shadow(2px 2px #000000);
}

.world {
  border:1px white solid; 
   display: block;
   width:auto;
   height: auto;
   color: white;   
   padding:0px;  
   flex-direction: column; 
   border-collapse: collapse;
   margin-top:-1px;
   border-spacing: 2px;
   background: #16161D;
   filter: drop-shadow(2px 2px #000000);
}

.music {
   border:1px white solid; 
   display: block;
   width:auto; 
   flex-direction: column; 
   border-collapse: collapse;
   border-spacing: 2px;
   z-index: 2;   
   background: linear-gradient(-90deg, rgba(23,58,177,1) 60%, rgba(67,99,221,1) 100%); 
   filter: drop-shadow(2px 2px #000000);
}

.divmusic {
  border:1px white solid; 
   color: white;   
   margin-top:-1px;
   background: #16161D;
   width:200px;
}

.lastupdate {
  border:1px white solid; 
   color: white;   
   margin-top:-1px;
   background: #16161D;
}

.info {
  border:none;
  height:auto;
  margin-top : 15px;
}

.div{
    color: white;
}

a {
  text-decoration: none;
}
a:link {
  color: #ffffff;
  border-bottom: none;
  
}
a:visited {
  color: #ffffff;
  border-bottom: none;
}

  ::-webkit-scrollbar {
  width: 6px;
}
  
  ::-webkit-scrollbar-track {
  border:1px solid CE4CB4;
}

::-webkit-scrollbar-thumb {
  background: #CE4CB4;
  border-radius: 10px;
}

*::selection {
  background: #CE4CB4;
  color: #ffffff;
}
*::-moz-selection {
  background: #CE4CB4;
  color: #ffffff;
}
*::-webkit-selection {
  background: #CE4CB4;
  color: #ffffff;
}

.introtextheader {
   border:none; 
   text-shadow: 1px 1px #B057D2;
   margin-top:15px; 
   display: block;
   flex-direction: column; 
   border-collapse: collapse;
   border-spacing: 2px;
   z-index: 2;   
}

.divdrawing {
	position:relative;
	margin: 40px;
	width:auto;
	height:auto;
	border-width: 2px;
	border-spacing: 2px;
	border-style: solid;
	border-color: #FFFFFF;
	border-collapse: separate;
	border-radius:20px 20px 20px 20px;
	box-shadow: 0px 0px 60px #04047d;
	filter: drop-shadow(2px 2px #000000);
	overflow: hidden;
	z-index: 2;
	background: purple url(images/bg_night4.png);
	background-size: cover;	
}

.drawing {
	margin : 30px;
}

.screensGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);   
    gap: 5px; 
    width: 100%;
    max-width: 1000px; 
    margin: 0 auto;
}

.screensGrid img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    border-radius: 15px; 
}