@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;
	cursor: url("pictures/cursor.png"), auto;
}

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 {
	font-size: 23px;
}

h2 {
	font-size: 15px;
}

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%; /* Shrinks content width */
    margin: auto; /* Centers the content */
}

.blinkies {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Equal space between blinkies */
    gap: 10px;  /* Adjusts the space between blinkies */
    padding: 0 10px; /* Adds space on the left and right sides */
}

.blinkies img {
    width: calc(25% - 10px); /* Adjust width to fit 4 blinkies in the row */
    height: auto;  /* Keep aspect ratio */
}
/****** 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; /* Keeps it above other elements */
}

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