/*
This is a stylesheet and has nothing to do with the CTF besides styling the website.
But congrats on finding this hidden flag!!

Flag: stylesheet

COLOURS Light / Dark
GREEN
#39e47e = rgb(57, 228, 126)
#207f46

ORANGE
#e49939 = rgb(228, 153, 57)
#7f4c20

RED
#e43939 = rgb(228, 57, 57)
#7f2020 = rgb(127, 32, 32)

PURPLE
#8839e4 = rgb(136, 57, 228)
#44207f

BLUE
#39d0e4 = rgb(57, 208, 228)
*/

.loadingPage body{
	opacity: 0;
}

.loadingPage{
	height: 100%;
    overflow-y: hidden;
	background: url(../images/loading.svg);
	background-repeat: no-repeat;
	background-position: center;
}

.pageLoaded body{
	opacity: 1;
	overflow-y: show;
	-webkit-transition: all 0.8s ease;
	-moz-transition: 	all 0.8s ease;
	-ms-transition: 	all 0.8s ease;
	-o-transition: 		all 0.8s ease;
	transition: 		all 0.8s ease;
}

*{
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

body{
	background-image: url(../images/dither.png);
}

h1{
	font-size: 5em;
	letter-spacing: 4px;
	text-align: center;
	padding: 0.5em 1em 0.5em 1em;
	color: rgba(0,0,0,0.33);
}

h2{
	text-align: center;
	font-size: 3em;
}

p{
	font-size: 1.5em;
	text-align: center;
}

.fixWidth{
	margin: auto auto;
	width: 800px;
}

.grey{
	color: black;
	text-shadow: 2px 1px grey;
	font-weight: bold;
}.green{
	color: #39e47e;
	text-shadow: 2px 1px black;
	font-weight: bold;
}.orange{
	color: #ff9d2d;
	text-shadow: 2px 1px black;
	font-weight: bold;
}.red{
	color: #ff2d2d;
	text-shadow: 2px 1px black;
	font-weight: bold;
}.purple{
	color: #c387ff;
	text-shadow: 2px 1px black;
	font-weight: bold;
}

.levels{
	font-size: 3em;
}

.lvlWrap{
	margin: auto auto;
	width: 800px;
	display: flex;
	flex-direction: column;
}

.levelRow{
	display: flex;
}

.lvlzeroColumn{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 1em 0;
}

.lvloneColumn, .lvltwoColumn, .lvlthreeColumn, .lvlfourColumn{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 50%;
}

.columnSpacing:nth-child(odd){
	margin: 1em 1em 1em 0;
}

.columnSpacing:nth-child(even){
	margin: 1em 0 1em 1em;
}

.lvlzeroColumn{
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 30px;
}.lvloneColumn{
	background-color: rgba(57, 228, 126, 0.2);
	border-radius: 30px;
}.lvltwoColumn{
	background-color: rgba(228, 153, 57, 0.2);
	border-radius: 30px;
}.lvlthreeColumn{
	background-color: rgba(228, 57, 57, 0.2);
	border-radius: 30px;
}.lvlfourColumn{
	background-color: rgba(136, 57, 228, 0.2);
	border-radius: 30px;
}

.lvlzeroColumn input[type=button]:hover{
	color: black;
	background-color: grey;
	border-color: black;
}.lvltwoColumn input[type=button]:hover{
	color: #7f4c20;
	background-color: #e49939;
	border-color: #7f4c20;
}.lvlthreeColumn input[type=button]:hover{
	color: #7f2020;
	background-color: #e43939;
	border-color: #7f2020;
}.lvlfourColumn input[type=button]:hover{
	color: #44207f;
	background-color: #8839e4;
	border-color: #44207f;
}

.lvlzeroInput:hover{
	color: black !important;
	background-color: grey !important;
	border-color: black !important;
}.lvltwoInput:hover{
	color: #7f4c20 !important;
	background-color: #e49939 !important;
	border-color: #7f4c20 !important;
}.lvlthreeInput:hover{
	color: #7f2020 !important;
	background-color: #e43939 !important;
	border-color: #7f2020 !important;
}.lvlfourInput:hover{
	color: #44207f !important;
	background-color: #8839e4 !important;
	border-color: #44207f !important;
}

.homeButton{
	position: fixed;
	top: 1em;
	left: 1em;
    color: black;
    text-shadow: 2px 2px 0 #ffffff, 4px 4px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: 0.2s;
}

.homeButton:hover{
	color: #2ebc67;
	text-shadow: 2px 3px 0 #ffffff, 4px 6px 0 rgba(32, 127, 70, 0.15);
}

.confirmButton{
	position: fixed;
	top: 1em;
	right: 1em;
    color: black;
    text-shadow: 2px 2px 0 #ffffff, 4px 4px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: 0.2s;
}

.confirmButton:hover{
	color: #2ebc67;
	text-shadow: 2px 3px 0 #ffffff, 4px 6px 0 rgba(32, 127, 70, 0.15);
}

.helpButton{
	position: fixed;
	bottom: 1em;
	right: 1em;
    color: black;
    text-shadow: 1px 2px 0 #ffffff, 2px 4px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: 0.2s;
}

.helpButton:hover{
	color: #2ebc67;
	text-shadow: 1px 2px 0 #ffffff, 3px 4px 0 rgba(32, 127, 70, 0.15);
}

.info{
	width: 800px;
	margin: auto auto;
	margin-bottom: 3em;
	text-align: center;
}

/*//////////////////////////////////////////*/
/*			    	Scoreboard 	 	 	 	*/

table {
	width: 575px;
	border-collapse: collapse;
	font-size: 1.5em;
}

th, td {
	text-align: left;
	padding: 0.5em;
}

tr:nth-child(even) {background-color: rgba(0, 0, 0, 0.05);}

.refreshWrap{
	display: flex;
	justify-content: center;
	align-items: center;
}

/*//////////////////////////////////////////*/
/*				Submit Page 				*/

.submitTab{
	width: 100%;
	height: 0%; /*CHANGE THIS TO 0*/
	position: fixed;
	display: flex;
	/*flex-flow: row wrap;*/
	flex-direction: column;
	align-items: center;
	z-index: 100;
	top: 0;
	left: 0;
	overflow: hidden;
	-webkit-transition: all 0.33s;
	-moz-transition: 	all 0.33s;
	-ms-transition: 	all 0.33s;
	-o-transition: 		all 0.33s;
	transition: 		all 0.33s;
	background-color: rgba(240, 240, 240, 1);
	background-image: url(../images/dither.png);
    -webkit-box-shadow: 0 8px 15px -6px #777;
    -moz-box-shadow: 	0 8px 15px -6px #777;
	box-shadow: 		0 8px 15px -6px #777;

}

.flagForm{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.radioContainer{
	cursor: pointer;
	user-select: none;
	margin: 0 1em;
}

.radioContainer input{
	display: none;

}

.flagForm input:disabled{
	background-color: rgba(0,0,0,0.33);
	cursor: not-allowed;
}

.radioContainer span{
	display: inline-block;
	text-align: center;
	width: 6em;
	border: 3px solid black;
	-webkit-transition: all 0.2s;
	-moz-transition: 	all 0.2s;
	-ms-transition: 	all 0.2s;
	-o-transition: 		all 0.2s;
	transition: 		all 0.2s;
}

.radioSolo input:checked + span{
	background-color: #2ebc67;
}

.radioSolo:hover span{
	color: white;
	background-color: #2ebc67;
}

.radioRed input:checked + span{
	background-color: #e43939;
}

.radioRed:hover span{
	color: white;
	background-color: #e43939;
}

.radioBlue input:checked + span{
	background-color: #39cae4;
}

.radioBlue:hover span{
	color: white;
	background-color: #39cae4;
}

.flagForm .submitFlagFormInput, .flagForm .submitButton{
	width: 20em;
	font-size: 1.2em;
}

.submitTab h1{
	font-size: 4em;
}

.closeTab{
	position: fixed;
	display: none;
	top: 0;
	right: 0.5em;
	font-size: 3em;
    color: black;
    cursor: pointer;
    transition: 0.2s;
    z-index: 101;
}

.closeTab:hover{
	color: #2ebc67;
}

/*//////////////////////////////////////////*/
/*				      Null  				*/

.windowWrap{
	width: 800px;
	height: 30em;
	margin: auto auto;
}

.window{
	width: 100%;
	background-color: silver;
	border-radius: 15px;
	box-shadow: 5px 10px 18px #888888;
}

.windowHeader{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0 1em;
}

.windowTitle{
	font-size: 1.66em;
}

.windowIcons{
	display: flex;
	justify-content: space-around;
}

.windowIcons i{
	padding: .5em;
	text-shadow: 2px 1px grey;
}

.windowIcons i:nth-child(1){
	color: #e49939;
}
.windowIcons i:nth-child(2){
	color: #e43939;
}

.windowGui{
	display: flex;
	width: 100%;
	margin: auto;
	background-color: rgba(0,0,0,.10);
	border-radius: 0 0 15px 15px;
}

.guiTree{
	width: 35%;
	background-color: rgba(0,0,0,.10);
	border-radius: 0 0 0 15px;
}

.guiTree ul{
	list-style-type: none;
	padding: 0 0 0 1em;
}

.guiTree ul li{
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	margin: 1em 0;
	font-size: 1.25em;
}

.guiTree ul li i{
	padding: 0 .5em 0 0;
}

.guiTree ul li a{
	cursor: pointer;
}

.folderGui{
	width: 100%;
	border-radius: 0 0 15px 0;
}

.folders{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 1em;
}

.folders li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 25%;
	font-size: 1em;
	padding: 0 0 1em 0;
}

.folders li i, .folders li a{
	cursor: pointer;
	text-align: center;
}

.folders li i{
	font-size: 2em;
}

.modalBg{
	position: fixed;
	display: table;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-color: rgba(0,0,0,.75);
	transition: opacity .3s ease;
	z-index: 100;
}

.modalWrap{
	display: table-cell;
	vertical-align: middle;
}

.modalWindow{
	width: 800px;
	margin: auto;

	background-color: silver;
	border-radius: 15px;
	transition: all .3s ease;
	box-shadow: 5px 10px 18px black;
}

.modalHeader{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0 1em;
}

.modalTitle{
	font-size: 1.66em;
}

.modalContent{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	background-color: rgba(0,0,0,.10);
	border-radius: 0 0 15px 15px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}


/*//////////////////////////////////////////*/
/*				STEG						*/

.steg{
	margin: 1em 0 5em 0;
	width: 100%;
	border-style: solid;
	border-width: 1em;
	border-radius: 2em;
}img.steg1{
	border-color: #39e47e;
}.steg2{
	border-color: #ff9d2d;
	padding: 1em;
}img.steg3{
	border-color: #8839e4;
}

.stegTitle{
	margin: 1em 0;
}

/*//////////////////////////////////////////*/
/*				Password Cracking			*/

.passOneWrap{
	margin: auto auto;
	display: flex;
	flex-direction: column;
	width: 800px;
}

.profileWrap{
	display: flex;
	justify-content: center;
}

.passInformaiton{
	text-align: left;
	align-self: center;
	padding-left: 2em;
}

.passOne{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.passOneProfile{
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: baseline;
	border-radius: 50%;
 	border: 5px solid rgba(32, 127, 70, .5);
 	background-color: rgba(57, 228, 126, .15);
}

.passOneProfile i{
	padding: 0.05em;
	color: #39e47e;
	font-size: 10em;
	text-shadow: 0.02em 0.02em rgba(32, 127, 70, .75);
}

.passOne input, .passOneSubmit{
	width: 50% !important;
	margin: 1em 0 0 0;
}

.passwordWrap{
	margin: auto auto;
	margin-top: 4em;
	width: 800px;
}

.otherPass{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sqlPassWrap{
	width: 100%
}

.sqlPassWrap div{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

/*//////////////////////////////////////////*/
/*			    	Cookies    				*/

.cookieLogo{
	width: 20em;
	margin-left: 50%;
	transform: translateX(-50%);
}

.cookieWrap{
	width: 800px;
	margin: auto auto;
	padding-top: 2em;
}

.cookieWrap p:nth-child(n+2){
	text-align: left;
}

.cookieSubmit{
	margin-left: 50% !important;
	transform: translateX(-50%);
}

/*//////////////////////////////////////////*/
/*				HTML One     				*/

div.htmlBody form{
	margin-left: 50%;
	transform: translateX(-50%);
	width: 800px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

img.policeLogo{
	width: 20em;
	padding: 0 2em 2em 2em;
}

/*//////////////////////////////////////////*/
/*				HTML Two     				*/

.center{
	margin-left: 50%;
	transform: translateX(-50%);
}

nav{
	text-align: center;
	font-size: 2em;
	margin: 1em;
	width: 800px;
}

nav a{
	margin: 1em;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

nav a:hover{
	padding: 1em;
	color: #e49939;
	cursor: pointer;
}

/*//////////////////////////////////////////*/
/*				SQL Injection 				*/

.formWrap{
    text-align: center;
}

table {
    width: 800px;
    margin-bottom: 3em;
}

th, td{
	text-align: center;
}

/*//////////////////////////////////////////*/
/*				Reverse Engineering			*/

.reverseBody{
	width: 800px;
	margin: 2em auto;
}

.flagTest{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 1em;
}

.flagTest input{
	width: 50% !important;
	margin: 1em 0 0 0;
}

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin: auto auto;
  overflow: auto;
  width: 800px;
  padding: 5px;
  max-height: 600px;
}

code{
	margin: auto auto;
}

/*//////////////////////////////////////////*/
/*					The Button				*/

.hidden{
	display: none;
}

.buttonBody{
	width: 800px;
	margin: 2em auto;
}

video{
	margin-left: 50%;
	transform: translateX(-50%);
	/*border-radius: 100%;*/
}

.doomForm{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.doomForm input{
	width: 50% !important;
	margin: 1em 0 0 0;
}

/*//////////////////////////////////////////*/
/*				Integrity					*/

.hashBody .info{
	margin-bottom: 1.5em;
}

.hashWrap{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 800px;
	margin: auto auto;
}

.hashWrap .inputTitle{
	padding: 0 0 0.5em 0;
	color: rgba(0,0,0,0.33);
}

.convertWrap{
	display: flex;
	justify-content: space-around;
	padding: 0 0 2em 0;
}

.convertWrap:first-of-type .hashBlock{
	background-color: #39e47e;
	border: 0.1em solid #207f46;
}

.hashBlock{
	width: 5em;
	height: 5em;
	text-align: center;

	border-radius: 20%;
	background-color: rgba(228, 57, 57, 1);
	border: 0.1em solid rgb(127, 32, 32);
}

.correctHash{
	background-color: #39e47e;
	border: 0.1em solid #207f46;
}

.hashBlock p{
	font-size: 2em;
	margin-top: 50%;
	transform: translateY(-50%);
}

.inputWrap{
	display: flex;
	justify-content: space-around;
}

.inputWrap input{
	padding: 0;
    margin: 0;
    width: 2em;
    height: 2em;
    text-align: center;
    font-size: 2.5em;
    border-radius: 20%;
    /*border: 0.1em solid rgba(228, 57, 57, 0.66);*/
    /*background-color: rgba(228, 57, 57, 0.66);*/
}

/*//////////////////////////////////////////*/
/*				Hack Evil Corp				*/

/*
PURPLE
#BA8AF1
#A05EEA
#8939E4
*/

.explorerWrap{
	width: 1000px;
	margin: auto auto;
	background-color: #C694FE;
	border-radius: 15px;
	box-shadow: 5px 10px 18px #888888;
}

.explorerUi{
	display: flex;
}

.progressWrap{
	width: 100%;
	background-color: #DBBEFD;
	border-radius: 15px 15px 0 0;
	z-index: 1;
}

.progress{
	padding: 1em 3.33em;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.levelNode{
	cursor: default;
}

.levelNode i{
	font-size: 2em;
	margin-left: 50%;
	transform: translateX(-50%);
}

.done{
	color: #39e47e;
	text-shadow: 2px 1px black;
}

/*
||
*/

.treePanel{
	width: 33%;
	padding: 1em 0 1em 1em;
	background-color: #b486e8;
}

.node{
	width: 100%;
	text-align: left;
	font-size: 1.5em;
	cursor: pointer;
}

/*
||
*/

.folders{
	width: 100%;
}

/*
||
*/

.sshLoginWrap{
	background-color: #DBBEFD;
	border-radius: 0 0 15px 15px;
}

.sshTitle{
	font-size: 2em;
	text-align: center;
	padding-top: 1em;
}

.sshLogin{
	display: flex;
	justify-content: center;
	padding-top: 1em;
}

.sshLogin div{
	text-align: center;
}

/*//////////////////////////////////////////*/
/*			    Phishing         			*/

.phishWrap{
	display: flex;
	justify-content: space-around;
	width: 1000px;
	height: 500px;
	margin: auto auto;
	padding: 2em;
}

.phishFrame {
	width: 450px;
	height: 500px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow: hidden;
	user-select: none;
}