/* 
                                                                                                               
                                               @@@@@@@@@@@@                @@@@@@@@@@@@@     @@@@@@@@@@@@@     
                    @                      @@@@@@@@@@@@@@@@@@@@          @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
                  @@@@@                  @@@@@@@@@@@@@@@@@@@@@@@@@       @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
                 @@@@@@@               @@@@@@@@@@@@@@@@@@@@@@@@@@@@      @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
                @@@@@@@@@             @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@    @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
               @@@@@@@@@@@           @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
              @@@@@@@@@@@@@         @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@    @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
             @@@@@@@@@@@@@@@        @@@@@@@@@@@@@@@@                     @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   
            @@@@@@@@@@@@@@@@@      @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   
           @@@@@@@@@@@@@@@@@@@     @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   
          @@@@@@@@@@@@@@@@@@@@@    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   
         @@@@@@@@@@@@@@@@@@@@@@@   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   
        @@@@@@@@@@@@@@@@@@@@@@@@    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   
       @@@@@@@             @@@@@@@                    @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
      @@@@@@@@@@@@@@@@@@@@@@@@@@@@    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
     @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@    @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   @@@@@@@@@@@@@@@@@@@@@@@@@@@@      @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   @@@@@@@@@@@@@@@@@@@@@@@@@       @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@     @@@@@@@@@@@@@@@@@@@@@         @@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@   
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@           @@@@@@@@@@@@@               @@@@@@@@@@@@@@    @@@@@@@@@@@@@@    
                                                                                                               
									Please Do Not Look Directly At The Code
*/
@font-face { font-family: 'PixelOperator'; src: url("assets/fonts/PixelOperator.ttf") format("truetype"); }
@font-face { font-family: 'PixelOperatorBold'; src: url("assets/fonts/PixelOperator-Bold.ttf") format("truetype"); }
@font-face { font-family: 'PixelOperatorHB'; src: url("assets/fonts/PixelOperatorHB.ttf") format("truetype"); }
@font-face { font-family: 'ASIX'; src: url("assets/fonts/ASIX-FOUNDER.otf") format("truetype"); }
@font-face { font-family: 'W3$iP'; src: url("assets/fonts/w3-ip.ttf") format("truetype"); }

:root {
	--color1: #d83a94; /* Pink */
	--color2: #333f83; /* Window Slate */
	--color3: #9f9dff; /* Powder Blue */
	--color4: #262f4b; /* Background Slate */
	--color5: #9cc33b; /* Lime Green */
	
	--border1: 2px solid var(--color1); /* Main Border */
	--border2: 4px solid var(--color1); /* Effect Border */
	--border3: 4px solid var(--color3); /* Unselected Border */
}
body {
	background-color:var(--color4);
	background-image:url("assets/imgs/bgpattern.png");
	background-attachment:fixed;
	color: black;
	font-family:"PixelOperator", mono-space;
	font-size:12pt;
	margin:0px !important;
	padding:0px !important;
}
h1 {
	text-align:center;
	font-size:30pt;
	line-height:24pt;
	font-family:"W3$iP", mono-space;
	margin:0px;
	padding:0px;
	text-shadow:2px 2px 0px var(--color1);
}
h2 {
	text-align:center;
	font-size:24pt;
	font-family:"W3$iP", mono-space;
	text-transform:uppercase;
	line-height:26pt;
	margin:0px;
	margin-bottom:8px;
	padding:0px;
	text-shadow:1px 1px 0px var(--color3);
}
h3 {
    margin:0px;
    padding:0px;
    font-size:16pt;
}
p {
    margin:8px 0px;
}
::-webkit-scrollbar {
    width:8px;
}
::-webkit-scrollbar-track {
    background-color:var(--color4);
}
::-webkit-scrollbar-thumb {
    background-color:var(--color1);
}
::-webkit-scrollbar-thumb:hover {
    background-color:var(--color5);
}
#content {
	width:1200px;
	padding:0px 24px;
	margin-left:calc(50% - 624px);
	background-color:var(--color4);
}
#header {
	width:100%;
	height:400px;
	text-align:center;
	vertical-align:middle;
	position:relative;
}
#logo {
	position:absolute;
	transform:scale(96%);
	display:block;
	right:0;
	left:0;
	top:0;
	right:0;
	margin-left:calc(50% - 100px);
	margin-top:100px;
	z-index:3;
	transition: transform .25s;
	filter: drop-shadow(none);
}
#logo:hover {
	transform:scale(100%,100%);
	filter: drop-shadow(6px 4px 0px var(--color1));
}
.logoart {
	width:600px;
	position:absolute;
	display:block;
	top:-20px;
	bottom:0;
	left:calc(50% - 440px);
	right:0;
	z-index:2;
}
.logoafter, .logoafter2, .logoafter3, .logoafter4 {
	animation-name:afteranim;
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-out;
	z-index:1;
}
.logoafter2 {
	animation-delay:0.5s;
}
.logoafter3 {
	animation-delay:1s;
}
.logoafter4 {
	animation-delay:1.5s;
}

@keyframes afteranim {
	0% {
		left:calc(50% - 440px);
		top:-20px;
		opacity:1;
	}
	50% {
		opacity:1;
	}
	100% {
		left:calc(50% - 470px);
		top:-30px;
		opacity:0;
	}
}
#holder {
	width:1200px;
}
#main {
	width:900px;
	margin-bottom:100px;
}
#bigmain {
	width:1200px;
	margin-bottom:100px;
}
#holder div {
	display:inline-block;
}
#sidebar {
	width:300px;
	height:auto;
	float:right;
	top:00px;
	margin-bottom:100px;
}
#main .window {
	width:884px;
}
#sidebar .window {
	width:300px;
}
#bigmain .window {
    width:1200px;
}
#bigmain .smallwindow {
    width:400px;
    margin-left:calc(50% - 200px);
}
#footer {
	background-color:var(--color2);
	width:100%;
	height:48px;
	position:fixed;
	bottom:0px;
	border-top:var(--border1);
	box-sizing:border-box;
	overflow:hidden;
}
#taskbar {
	display:flex;
	z-index:10;
}
.taskbutton {
	line-height:44px;
	background-color:#888;
	position:relative;
	display:inline-block;
	margin:2px 8px 2px 8px;
	vertical-align:middle;
	text-align:center;
	width:200px;
	border:0px;
	border-radius:4px;
}
.taskbutton:hover {
	background-color:#999;
}
#clockbutton {
    position:absolute;
    display:block;
    right:0px;
    margin:0px;
    height:48px;
    width:180px;
    font-family:"W3$iP", mono-space;
    font-size:24pt;
    text-align:right;
    padding-right:10px;
    background-color:var(--color1);
    color:white;
    text-shadow:2px 2px 0px var(--color2);
    border-radius:24px 0px 0px 0px;
}
#startbutton {
	background-color:var(--color5);
	margin:0px;
	line-height:48px;
	width:180px;
	border:0px;
	border-radius:0px 24px 0px 0px;
	color:white;
	display:block;
	user-select:none;
}
#startbutton .startbuttonparts {
	display:inline-block;
	vertical-align:bottom;
	text-align:left;
	height:48px;
	float:left;
	font-family:"W3$iP", mono-space;
	font-size:24pt;
	text-shadow:2px 2px 0px var(--color2);
}
.startbuttonparts img {
    margin:0px;
}
#startbutton:hover {
	background-color:var(--color1);
}
#startcontainer {
	position:fixed;
	width:500px;
	height:550px;
	bottom:46px;
	left:0px;
	display:none;
	box-sizing:border-box;
	text-align:center;
	color:white;
}
#startcontainer div {
	display:inline-block;
	z-index:5;
}
#startheader {
	width:inherit;
	height:50px;
	background-color:var(--color1);
	font-family:"W3$iP", mono-space;
	font-size:24pt;
	line-height:50px;
	text-shadow:2px 2px 0px var(--color2);
	color:white;
	display:flex;
	text-align:center;
	border-radius:25px 25px 0px 0px;
	border-bottom:var(--border1);
}
.startheaderparts {
	position:relative;
	display:inline-block;
}
.shtext {
	width:300px;
}
.shringtail {
	width:200px;
	bottom:50px;
	float:right;
}
#startleft {
	width:300px;
	height:400px;
	background-color:white;
	border-left:var(--border1);
}
#startright {
	width:200px;
	height:500px;
	float:right;
	z-index:3;
	position:relative;
	background-image:linear-gradient(to bottom, var(--color2), var(--color2), var(--color4));
	border-right:var(--border1);
}
#startright:before {
	content:"";
	z-index:2;
	width:100%;
	height:100%;
	position:absolute;
	display:block;
	top:0px;
	background-image:url("assets/imgs/bigpattern.png");
	background-repeat:repeat;
	background-position: 0px 0px;
	animation:startanim 6s linear 0s infinite;
}
#startfooter {
	width:300px;
	height:100px;
	background-color:var(--color3);
	border-left:var(--border1);
}
.startparts {
	position:relative;
	top:-2px;
	box-sizing:border-box;
}
.startparts a {
	color: black;
	height:80px;
	line-height:60px;
	display: block;
	padding:12px 24px;
	text-decoration: none;
	position:relative;
	z-index:4;
	text-align:left;
	font-size:18pt;
	box-sizing:border-box;
	font-family:"PixelOperator", mono-space;
}
#startright a {
	color:white;
}
#startright a:hover {
	background-color:var(--color4);
	border-right:var(--border2);
}
#startright a.active {
	color: white;
}
#startleft a {
	font-family:"PixelOperatorBold", "PixelOperator", mono-space;
	border-left:4px solid white;
}
#startleft a:hover {
	background-color:var(--color3);
	border-left:var(--border2);
}
#startleft a.active {
	color: white;
}
#startfooter a {
	font-family:"PixelOperatorBold", "PixelOperator", mono-space;
	height:100px;
	line-height:80px;
	vertical-align:middle;
	padding-left:28px;
}
#startfooter a:hover {
	background-color:var(--color1);
}
#startfooter a.active {
	color: white;
}
.ossignature {
	position:absolute;
	z-index:5;
	bottom:0px;
	left:0px;
	width:200px;
	line-height:20px;
	height:20px;
}
.osringtail {
	margin-bottom:20px;
	font-family:"W3$iP", monospace;
	font-size:12pt;
	text-shadow:2px 2px 0px var(--color2);
	color:white;
}
.osversion {
  font-family:"PixelOperator", mono-space;
}
.shringtail img {
}
@keyframes startanim {
	from {
		background-position:0px 0px;
	}
	to {
		background-position:80px -134px;
	}
}
.window {
    margin-bottom:16px;
}
.windowtitle {
	z-index:2;
	line-height:32px;
	width:inherit;
	height:32px;
	background-color:var(--color2);
	background-image:url("assets/imgs/pattern.png");
	background-repeat:repeat;
	background-position: 0px 0px;
	animation:windowanim 6s linear 0s infinite;
	border:var(--border1);
	border-radius:16px 16px 0px 0px;
	border-bottom:none;
	color:white;
	display:flex;
	font-size:18pt;
	text-shadow:1px 1px 0px var(--color4);
	text-align:left;
	box-sizing:border-box;
}
@keyframes windowanim {
	from {
		background-position:0px 0px;
	}
	to {
		background-position:66px 68px;
	}
}
.windowtitleparts {
	position:relative;
}
.wicon {
	left:2px;
}
.wicon img {
	filter: drop-shadow(1px 1px 0px var(--color4));
}
.wtitle {
	line-height:32px;
	vertical-align:top;
}
.wbuttons {
	float:right;
}
.windowcontent {
	background-color:#FFF;
	width:inherit;
	z-index:1;
	margin-top:-6px;
	border:var(--border1);
	border-radius:0px 0px 4px 4px;
	padding:16px 16px;
	box-sizing:border-box;
}
.bodytext {
    list-style-type:none;
    margin:8px 0px;
    padding:0;
}
.actuallist {
    list-style-type:square;
    margin:8px 0px 8px 16px;
    padding:0px;
}
.actuallist ul {
    margin:0px 0px 0px 16px;
    padding:0px;
}
.readmorebutton {
    float:right;
    display:inline-block;
    padding:8px;
    background-color:var(--color3);
    color:white;
    font-size:18pt;
    font-family:"W3$iP", mono-space;
    text-decoration:none;
    border:var(--border1);
    transition:0.5s;
}
.readmorebutton:hover {
    background-color:var(--color1);
    box-shadow:4px 4px 0px var(--color5);
    transition:0.25s;
}
.fancytext {
  font-family:"PixelOperatorBold", mono-space;
  color:var(--color2);
  text-shadow:1px 1px 0px var(--color3);
}
#projectcontainer {
    width:100%;
}
#projectcontainer a {
	margin:0px;
	margin-left:calc(50% - 408px);
    margin-bottom:8px;
    padding:8px;
	height:auto;
    background-color:var(--color3);
	border:var(--border1);
	display:inline-block;
	position:relative;
	width:800px;
	transition:0.5s;
	text-align:center;
	text-decoration:none;
}
#projectcontainer a:hover {
	background-color:var(--color1);
    box-shadow:4px 4px 0px var(--color5);
    transition:0.25s;
}
.projectblock {
	width:800px;
	display:block;
}
#projectcontainer a span {
	position:absolute;
	top:calc(50% - 12px);
	bottom:0;
	left:0;
	right:0;
	font-family:"W3$iP", mono-space;
	text-shadow:2px 2px 0px var(--color2);
	color:white;
	font-size:24pt;
	opacity:0;
	transition:0.5s;
}
#projectcontainer a img {
	transition:0.5s;
}
#projectcontainer a:hover img {
	opacity:0.6;
	transition:0.25s;
}
#projectcontainer a:hover span {
	opacity:1;
	transition:0.25s;
}
.blogblock {
    width:420px;
    display:inline-block;
    position:relative;
    margin-bottom:8px;
    border:var(--border3);
    padding:16px;
    box-sizing:border-box;
    background-color:white;
    text-decoration:none;
    color:black;
    transition:0.5s;
}
.blogblock:hover {
    border:var(--border2);
    box-sizing:border-box;
    box-shadow:4px 4px 0px var(--color5);
    transition:0.25s;
}
.blogblock p {
    margin-left:8px;
    height:100px;
    overflow:hidden;
}
.blogdate {
    position:absolute;
    top:16px;
    right:16px;
    color:var(--color3);
}
#featphoto {
    width:800px;
    margin-left:calc(50% - 408px);
    margin-bottom:8px;
    padding:8px;
    background-color:var(--color3);
    border:var(--border1);
    transition:0.5s;
}
#featphoto:hover {
    background-color:var(--color1);
    box-shadow:4px 4px 0px var(--color5);
    transition:0.25s;
}
#welcomelogo {
    width:100%;
	max-width:400px;
	display:block;
	margin:auto;
}
#winwarning {
    animation-name:warninganim;
	animation-duration:1s;
	animation-iteration-count:1;
	animation-timing-function:ease;
}
@keyframes warninganim {
	0% {
		margin-left:0px;
	}
	10% {
		margin-left:4px;
	}
	20% {
		margin-left:0px;
	}
	30% {
		margin-left:12px;
	}
	40% {
		margin-left:0px;
	}
	50% {
		margin-left:16px;
	}
	60% {
		margin-left:0px;
	}
	70% {
		margin-left:12px;
	}
	80% {
		margin-left:0px;
	}
	90% {
		margin-left:4px;
	}
	100% {
		margin-left:0px;
	}
}
#mobilewarning {
	display:none;
}
@media screen and (max-width: 1279px) {
	body {
		overflow-x: hidden;
		overflow-y: scroll;
	}
	#mobilewarning {
		display:block;
		position:fixed;
		z-index:20;
		width:100%;
		top:0;
		background-color:var(--color5);
		text-align:center;
		font-family:"PixelOperatorBold", "PixelOperator", mono-space;
		font-size:18pt;
		/* animation-name:warninganim; */
		/* animation-duration:1s; */
		/* animation-iteration-count:1; */
		/* animation-timing-function:ease; */
	}
	#holder {
		width:100%;
		margin:0;
		box-sizing:border-box;
	}
    #content {
        width:100%;
		margin:0;
		padding:0px;
		box-sizing:border-box;
    }
	#sidebar {
		width:100%;
		box-sizing:border-box;
		float:none;
		display:block;
    }
    #main {
    	width:100%;
    	box-sizing:border-box;
		margin-bottom:0px;
		display:block;
    }
    #bigmain {
        width:100%;
        box-sizing:border-box;
        display:block;
    }
	#main .window {
		width:calc(100%);
	}
	#sidebar .window {
		width:calc(100%);
	}
	#main .window, .smallwindow {
		width:calc(100%);
	}
	#projectcontainer a {
		width:100%;
		margin-left:0;
		box-sizing:border-box;
	}
	#projectcontainer a span {
		opacity:1;
		transition:0.5s;
	}
	.projectblock {
		width:100%;
		margin:0px;
	}
	#featphoto {
		width:100%;
		box-sizing:border-box;
		margin:0;
		margin-bottom:10px;
	}
	.blogblock {
		width:100%;
		display:block;
		height:140px;
		overflow:hidden;
		margin:0px;
		margin-bottom:8px;
	}
	#header {
		height:300px;
		width:100%;
		overflow:hidden;
	}
	#logo {
		transform:scale(66%);
		margin-top:50px;
		margin-left:calc(50% - 200px);
		transition: transform .25s;
		filter: drop-shadow(none);
	}
	#logo:hover {
		transform:scale(70%);
		transition: transform .25s;
		filter: drop-shadow(none);
	}
	.logoart {
		width:400px;
		margin-left:100px;
		margin-top:20px;
	}
	#clockbutton {
        display:none;
	}
	#startcontainer {
	    transform:scale(60%);
	    transform-origin:0% 100%;
	}
}