body {
	/* background: linear-gradient(180deg, rgba(177,255,255,1) 0%, rgba(145,255,149,1) 70%, rgba(176,255,251,1) 100%); */
	max-width: 100%;
	overflow-x: hidden;
    font-family: "Press Start 2P", 'Courier New', Courier, monospace;
	font-size: 16px;
	font-weight: 200;
	/* overflow: hidden; */
}

a {
	text-decoration: none;
}

.windowslink {	
	color: #0907ec;
	padding: 0.2rem 1rem;
	text-align: center;
	text-decoration: none;
	display: inline-block;	
}


.windowslink:hover {
	cursor: pointer;
}

.windowslink:active {
	color: red;
	display: inline-block;	
}

.windowslink:visited {
	cursor: pointer;
	color: #572191;
}

.the_background {
	display: block;
	position: fixed;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	max-width: 100vw;
	max-height: 100%;
	margin: 0px;
    background: linear-gradient(45deg, #ff6ac1, #0fdbaf);
}

.mainbox {
	display: none;
	position: fixed;
	background-color: #EEF2F5;
	padding: 4px;
	font-size: 1rem;
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 2px #FEFFFF;
	border-left: solid 2px #FEFFFF;
	box-shadow: 2px 2px #010101;
	max-width: 70%;
	min-width: 20%;
	z-index: 1;
}

.terminal_box {
	display: none;
	position: absolute;
	background-color: #171421;
	padding: 4px;
	border-bottom: solid 2px #5E5C64;
	border-right: solid 2px #5E5C64;
	border-top: solid 2px #5E5C64;
	border-left: solid 2px #5E5C64;
	box-shadow: 2px 2px #010101;
	max-width: 50%;
	min-height: 40%;
	min-width: 40%;
	max-lines: 20;
	color: white;
	font-size: 1.1rem;
    flex-direction: column;
	flex-shrink: 1;
    flex-grow: 1;
	z-index: 1;
}

.cv_box {
	display: block;
	position: absolute;
	background-color: #EEF2F5;
	padding: 4px;
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 2px #FEFFFF;
	border-left: solid 2px #FEFFFF;
	box-shadow: 2px 2px #010101;
	min-width: 40%;
	min-height: 40%;
	z-index: 1;
}

div.terminal_box a:link {
	color: white;
	text-decoration: underline;
}

div.terminal_box a:visited {
	color: white;
	text-decoration: underline;
}

div.terminal_box a:active {
	color: #0907ec;
	text-decoration: underline;
}

.terminalcontent {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    padding: 2ex;
    overflow-x: hidden;
    overflow-y: scroll;
	max-height: 30rem;
	font-size: 0.8rem;
}

.terminalcontent h1 {
	text-shadow: red;
}

.content {
	padding: 10px;
	font-size: 0.8rem;
}

.topbar {
	display: flex;
	flex-direction: row;
	background: rgb(106, 166, 240);
	padding: 5px;
	font-size: 1.5rem;
	color: white;
}

.terminaltopbar {
	display: flex;
	flex-direction: row;
	background: #2C2C2C;
	padding: 5px;
	font-size: 1.7rem;
	color: white;
}

.buttons {
	margin-left: auto;
	display: flex;
	flex-direction: row;
	cursor: pointer;
}

.topbarButton {    
	font-family: "Press Start 2P", 'Courier New', Courier, monospace;
	background-color: #EEF2F5;
	padding: 4px;
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 2px #FEFFFF;
	border-left: solid 2px #FEFFFF;
	box-shadow: 2px 2px #010101;
	width: 16px;
	font-size: 1rem;
	color: black;
}

.terminaltopbarButton {
	background-color: #2C2C2C;
	padding: 4px;
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 1px #FEFFFF;
	border-left: solid 1px #FEFFFF;
	box-shadow: 2px 2px #010101;
	width: 16px;
	font-size: 1rem;
	color: whitesmoke;
}

.icon {
	display: block;
	margin-left: 20px;
	margin-top: 20px;
}

.taskbar {
	position: fixed;
	background-color: #EEF2F5;
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 2px #FEFFFF;
	border-left: solid 2px #FEFFFF;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 39px; /*This is 2vw of  1080 display*/
	display: flex;
	flex-direction: row;
	font-size: 1rem;
}

.taskbar img {
	height: 32px;
	width: 32px;
}

.startButton {
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 2px #FEFFFF;
	border-left: solid 2px #FEFFFF;
	cursor: pointer;
	font-size: 1.1rem;
	padding-right: 5px;
}

.startButton img {
	height: 1.5rem;
	width: 1.5rem;
	margin-left: 5px;
}

.startmenu {
	display: none;
	background-color: #EEF2F5;
	height: 67%; /*This gotta be updated as the number of objects in the start menu grows*/ /*THIS ALSO NEEDS TO BE CHANGED FOR THAT EXTRA BOTTOM PADDING */
	width: 20.5vw; /*THIS SHOULD BE LARGER FOR PHONE DEVICES smth like 30*/
	bottom: 0;
	left: 0;
	position: fixed;
} 


.startmenu ul{
    padding: 0;
	margin-top: -5px; /*Just to avoid useless startmenu space that is kinda ugly*/
}

.startmenuItem {
	background-color: #EEF2F5;
	width: 20vw; /*THIS SHOULD BE LARGER FOR PHONE DEVICES*/
	margin-bottom: 3px;
	margin-top: 3px;
	line-height: 3vw;
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 2px #FEFFFF;
	border-left: solid 2px #FEFFFF;
	align-items: center;
	padding-left: 4px;
	font-size: 1rem;
}

.startmenuItem img{
	width: 32px;
	height: 32px;

	margin-left: 10px;
}

.startmenuTitle {
	background: linear-gradient(#000184, #0f80cd);
	color: white;

	width: 20vw;
	margin-bottom: 3px;
	margin-top: 3px;
	line-height: 3vw;
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 2px #FEFFFF;
	border-left: solid 2px #FEFFFF;
	align-items: center;
	padding-left: 4px;
	font-size: 1.2rem;
}


.startmenuItem:hover {
	background-color: rgb(181, 181, 181);
}

.taskbarWindow {
	display: none;
	background-color: #ffffff;
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 2px #FEFFFF;
	border-left: solid 2px #FEFFFF;
	padding: 10px;
	cursor: pointer;
}

.clock {
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	border-top: solid 2px #FEFFFF;
	border-left: solid 2px #FEFFFF;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: auto;
}

.desktop {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* width: -moz-fit-content; */
	width: fit-content;
	margin-left: 0px;
}

.desktopicon {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	font-size: 0.625rem;
	overflow-wrap: auto;
	cursor: pointer;
}

.desktopicon img {
	width: 64px;
    height: 64px;
	margin-bottom: 10px; /*Separte text down from image*/
	
}

.windowContainer {
	background: rgb(175,211,255);
	background: linear-gradient(90deg, rgba(175,211,255,1) 0%, rgba(255,255,255,1) 16%);
	border-bottom: solid 2px #c0c0c0;
	border-right: solid 2px #c0c0c0;
	margin: 4px;
}

.properties {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.properties img {
	width:30%;
	height: 30%;
	padding: 20px;
}

.txt {
	padding: 20px;
}

.error_message {
	display: none; /*This value should change accordingly to state of the site*/
	font-size:16px; /*THIS SHOULD BE SET TO 12px for phones or even 10px*/
	font-family: "Press Start 2P", 'Courier New', Courier, monospace;
    background-color: #00a;
	color: #f1f1f1;

	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

.overlay {
    position:fixed;
    pointer-events: none;
	width: 100%;
	height: 100%;
	z-index: 2;

    &.overlay--vignette {
        background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%);
    }

    &.overlay--scanline {
        background-image: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.33) 25%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.33) 100%);
        background-size: 6px 6px;
    }
}

.error_container {
	margin-top: 25vh; /*THIS SHOULD BE SET TO 20VH FOR PHONES*/
	height: 100%;
	width: 100%;
	text-align: center;
	position: fixed;
}
  

.error_message h1 {
	background-color: silver;
	color: #00a;
	padding: 0 1rem;
	font-size: 3rem;
	display: inline-block;
}

.error_title {
	text-align: center;
	padding: 1vh;
}

.blink {
	animation: blink 1s steps(1) infinite;
}

@keyframes blink {
	66% {
		opacity: 0;
	}
}


.bios_setup {
    background: #000;
    font-family: "Press Start 2P", 'Courier New', Courier, monospace;
    font-size: 22px;
    color: #888;
    display: flex;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    transform: scale(0.6) translateY(-25%);
}

@media screen and (max-width: 380px){
	body{
		font-size: 10px;
	}
}

@media screen and (max-width: 480px){
	body{
		font-size: 8px;
	}
}

@media screen and (max-width: 768px){
	body{
		font-size: 14px;
	}
}