@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

body, html {
	padding: 0;
	margin: 0;
	background: #000;
	color: lime;
	font-family: 'Source Code Pro', monospace;
	font-size: 12px;
}

img {
	max-width: 100%;
}

.page {
	padding: 24px;
}

.page h1:first-child {
	margin-top: 0;
}

.header-image {
	height: 200px;
	margin: auto;
	display: block;
}

.wrapper {
	margin: auto;
	margin-top: 24px;
	width: 753px;
}

.menu {
	text-align: center;
	margin-bottom: 24px;
	margin-top: 24px;
}

.menu a {
	color: lime;
}

.main {
	height: 480px;
	width: 753px;
	background-image: url('bg.jpg');
	position: relative;
}

.main iframe {
	border: none;
	position: absolute;
	top: 35px;
	left: 7px;
	width: 739px;
	height: 439px;
}

h1, h2, h3, h4, h5 {
	font-size: 12px;
}

h1 {
	border-bottom: 1px solid lime;
}

h2 {
	border-bottom: 1px dotted lime;
}

a {
	color: red;
}

.content {
    max-width: 90%; 
    margin: auto; 
}

.blinkies {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; 
    gap: 10px; 
    padding: 0 10px; 
}

.blinkies img {
    width: calc(25% - 10px); 
    height: auto; 
}

.stamps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; 
    gap: 0px;  
    padding: 0 10px; 
}

.stamps img {
    width: calc(16.66% - 10px); 
    height: auto;  
}

.identitybuttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; 
    gap: 0px;  
    padding: 0 10px; 
}

.identitybuttons img {
    width: calc(12.5% - 10px); 
    height: auto;  
}

.minipixelart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; 
    gap: 0px; 
    padding: 0 10px;
}

.minipixelart img {
    display: flex;
    width: auto; 
    max-width: 32px;
    height: auto;
}


/****** phone ******/
#phonewrapper{
    position:fixed;
    bottom:-445px;
    left:23px;
    transition:0.5s;
}

#phonewrapper:hover{
    bottom:0;
    transition:0.5s;
}

#screen{
    border:4px solid black;
    width:200px;
    height:300px;
    background-color:white;
    overflow:auto;
    z-index:1;
}

#screen2{
    padding:40px 10px 0 10px;
    border:4px solid #000;
    border-radius:10px 10px 0 0;
    background-color:#1f201c;
    margin-bottom:-4px;
}

#outer{
    padding:0 15px 0 15px;
    border-left:4px double #bd005e;
    border-right:4px solid #bd005e;
    border-top:4px solid #bd005e;
    border-bottom:4px solid #000;
    background:radial-gradient(circle, rgba(255,70,162,1) 0%, rgba(250,75,162,1) 100%); 
    border-radius:30px 30px 0 0;
}

#bottom{
    height:30px;
    background:linear-gradient(180deg, rgba(255,70,162,1) 0%, rgba(250,75,162,1) 100%); 
    border-left:4px double #bd005e;
    border-right:4px solid #bd005e;
    border-top:4px solid #bd005e;
}

#earpiece{
    width:100px;
    height:8px;
    border-radius:10px;
    border:4px solid #bd005e;
    margin:20px auto;
    background-color:#242323;
}

#bar{
    width:120px;
    height:5px;
    border:4px solid #d3d3d3;
    background-color:#d3d3d3;
    margin:20px auto;
}

.page-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.content {
    flex: 1;
}

.poll-container {
    position: fixed;
    top: 50%;
    right: 10px; 
    transform: translateY(-50%);
    width: auto;
    z-index: 1000; 
}

#music {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: url('https://static.tumblr.com/bpdtqce/eNEnoonrt/musicplayer.png') no-repeat bottom right;
  background-size: 100% 100%;
  height: 50px;
  width: 305px;
  border: 1px solid #000;
  z-index: 1000;
}

#music iframe {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 47px;
  width: 100%;
  opacity: 0.01;
  z-index: 0;
}

#music div {
  position: absolute;
  bottom: 10px;
  right: 55px;
  width: 51%;
  margin: 0 !important;
}

#music span {
  display: block;
  color: white;
  font-weight: normal;
  text-align: left;
  font-size: 12px;
  width: 240px;
}

#albumImage {
    position: absolute;
    bottom: 10.5px;  
    right: 216px;  
    width: 30px;  
    height: 30px; 
    object-fit: cover;  
    border-radius: 15%;  
}

* {cursor: url(https://cur.cursors-4u.net/cursors/cur-8/cur771.cur), auto !important;}