:root {
	--ppDark: #263D42;
	--ppPrimary: #FF7C00;
	--ppSecondary: #6dd3b1;
	--ppTertiary: #8E6C88;
	--ppLight: #E7EAEA;
	--inner-margin: 3%;
	--outer-margin: 5%;
	--button-width: 100px;
	--max-width: 1000px;
}

@font-face {
    font-family: 'Christiana';
    src:url('assets/fonts/Christiana.ttf.woff') format('woff'),
        url('assets/fonts/Christiana.ttf.svg') format('svg'),
        url('assets/fonts/Christiana.ttf.eot') format('eot'),
        url('assets/fonts/Christiana.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: "KiwiSoda";
	src: url(assets/fonts/KiwiSoda.ttf) format("truetype");
}
@font-face {
	font-family: "IBM";
	src: url(assets/fonts/IBMPlexMono-Regular.ttf) format("truetype");
}

* {
	box-sizing: border-box;	
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#bezel {
    height: 100%;
	width: 100%;
    max-width: var(--max-width);
    background-image: url(assets/images/bezel.png);
    background-size: cover;
	border-radius: 12px;
    margin-top: 20px;
    padding: 5%;
    box-shadow: 8px 8px 16px hsl(90deg 0% 0% / 0.31); 
}

body {
	background-color: var(--ppPrimary);
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background-color: var(--ppLight);
    display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
    height: 36px;
    padding: 7px 12px 2px 12px;
	color: var(--ppDark);
	font-family: 'Christiana', monospace;
	font-size: 10px;
	cursor: pointer;
    border-bottom: var(--ppDark) 2px solid;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
}

.header-logo-btn {
    border: none;
    
}

.header-logo {
    margin: 0 0 0 0;
}

.header-right {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

.dropdown {
    position: relative;
}

.menu-btn {
    border: none;
    width: 100%;
    height: 28px;
    font-family: 'Christiana', monospace;
    font-size: 10px;
    color: var(--ppDark);
    background-color: var(--ppLight);
    cursor: pointer;
}

.menu-btn:hover + .dropdown-content, .dropdown-content:hover {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 150px;
	border: var(--ppDark) 2px solid;
    background-color: var(--ppLight);
}

.dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    min-width: 150px;
	border: var(--ppDark) 2px solid;
    background-color: var(--ppLight);
}

.dropdown-content button {
    padding: 11px 8px 5px 4px; 
    text-align: left;
    border: none;
    background: none;
    color: var(--ppDark);
    font-family: 'Christiana', monospace;
    font-size: 10px;
}

.dropdown-content button:hover {
    background-color: var(--ppSecondary);
    color: var(--ppLight);
}

#localtime {
    white-space: nowrap;
}

main {
    border-top: var(--ppDark) 8px solid;
	border-bottom: var(--ppLight) 8px solid;
	border-left: var(--ppDark) 6px solid;
	border-right: var(--ppLight) 6px solid;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--ppPrimary), var(--ppSecondary), var(--ppTertiary));
	height: 100%;
	width: 100%;
    
}

#desktop {
    display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: space-between;
	flex-wrap: wrap;
    height: 100%;
	width: 100%;
	padding: 20px;
}

#window {
    width: 95%;
    height: 80%;
    background-color: var(--ppLight);
	box-shadow: 10px 10px var(--ppTertiary);
	border: var(--ppDark) 4px solid;
	border-radius: 8px;
}


.windowheader {
    border-bottom: var(--ppDark) 4px solid;
    height: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#tabname {
    padding-top: 5px;
	font-family: 'Christiana', monospace;
	font-size: 10px;
	text-align: center;
    color: var(--ppDark);
}

footer {
    width: 100%;
    padding: 16px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-family: 'IBM', monospace;
    font-size: 12px;
    color: var(--ppDark)
}

.footer-nav, ul {
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding-top: 2px;
}