<?php
require_once 'sys/common.php';


$content = "
@font-face
{
    font-family: Montserrat;
    src: url('pub/Montserrat-Regular.ttf');
}
html, body
{
    width: 100%;
    height: 100%;
	margin: 0;
    overflow-x: hidden;
    --zoom: 1;
}
body
{
    font-family: Montserrat, Consolas;
    user-select: none;
}
a
{
    text-decoration: none;
    color: black;
}
#container
{
	position: relative;
	width: 100%;
	height: 100%;
    border: 0px solid red;
}
.topLayer_panel
{
	position: relative;
	width: 100%;
	height: 40vh;
	background: grey;
	z-index: 10000;
}
#topLayer_panel1
{
	background: dodgerblue;
	height: 55vmin;
	font-size: 2vmin;
	z-index: 2000000;
}
#topLayer_panel2
{
	background: #15b0dd;
    height: auto;
	min-height: 20vmin;
	color: white;
}
#topLayer_panel3
{
    width: calc(100% - 1vmin);
	background: purple;
	color: white;
	height: auto;
    min-height: 40vmin;
    border: .5vmin solid purple;
}
#topLayer_panel4
{
    width: calc(100% - 1vmin);
	background: limegreen;
	color: white;
    height: auto;
    min-height: 70vmin;
    border: .5vmin solid limegreen;
}
#topLayer_panel5
{
    width: calc(100% - 1vmin);
	background: orange;
	color: white;
	height: auto;
    min-height: 60vmin;
    border: .5vmin solid orange;
}

.background
{
    position: relative;
	width: 100%;
	height: 40vh;
	z-index: 90;
	opacity: 0.8;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#background1
{
	background-image: url('images/coding_bg1.jpg');
	height: 14vh;
}
#background2
{
	background-image: url('images/coding_bg3.jpg');
	height: 24vh;
}
#background3
{
	background-image: url('images/servers_bg.jpg');
	/background-size: contain;
	height: 28vh;
}
#background4
{
	background-image: url('images/coding_bg4.jpg');
	/background-size: contain;
	height: 28vh;
    /background-position: 0 0;
}
#background5
{
	background-image: url('images/coding_bg_illum1.jpg');
	/background-size: contain;
	height: 28vh;
}
#mainTitle
{
    position: relative;
    width: 99%;
    height: 4vmin;
	font-weight: bold;
	font-family: Arial;
	font-size: 4.5vmin !important;
	text-align: center;
	padding: 5vmin 0;
    white-space: nowrap;
    margin: 0 auto;
    text-shadow: 0 0 2vmin #EEEEEE;
}


.helloCard
{
	width: 95%;
	height: auto;
	margin: 3vmin auto;
}
.helloCard .coverImg
{
	position: relative;
	top: 3vmin;
    width: 25vmin;
	border: .4vmin solid #EEEEEE;
	border-radius: .4vmin;
	display: inline-block;
	z-index: 2000000;
}
.helloCard .dataBox
{
	position: relative;
	top: 3vmin;
	left: 3vmin;
	width: 70%;
	height: auto;
	display: inline-block;
	vertical-align: top;
    /border: 2px solid;
}
.helloCard .dataBox .name
{
	width: 90%;
	font-family: Consolas;
	font-weight: bold;
	font-size: 5vmin;
	margin-bottom: 3.1vmin;
	text-align: left;
}
.helloCard .dataBox .row
{
	width: 95%;
	height: auto;
	border: 0px solid goldenrod;
	margin-bottom: 1.1vmin;
	padding: .1vmin;
    white-space: nowrap;
}
.helloCard .dataBox .key
{
	display: inline-block;
	font-weight: normal;
	font-size: 2.4vmin;
	vertical-align: top;
	width: 24vw;
    white-space: nowrap;
}
.helloCard .dataBox .value
{
    font-size: 2.4vmin;
	padding-left: 1vmin;
	display: inline-block;
	vertical-align: middle;
    white-space: nowrap;
    font-weight: 600;
}


#topLayer_panel2 .welcomeText
{
	text-align: center;
	padding: 3vmin;
	font-size: 3vmin;
	font-weight: 900;
	color: white;
}
.adTrunk
{
	margin-left: 5vmin;
	margin-bottom: 5vmin;
	padding: 2vmin 1vmin;
	font-size: 3vmin;
}
.adTrunk .subBlock
{
	margin-left: 15px;
}
.adTrunk .beforeTitle
{
    font-weight: 900;
    margin: 2vmin 0;
    color: white;
}
.adTrunk .specialNote
{
    font-weight: 900;
    margin-top: 3vmin;
    color: yellow;
    text-shadow: 0 0 2vmin #EEEEEE;
}
.adTrunk .contact_me
{
    position: relative;
    top: 3vmin;
    font-weight: 900;
    margin-top: 3vmin;
    color: yellow;
    text-shadow: 0 0 2vmin #EEEEEE;
}

.mail_link 
{
	font-weight: bold;
	cursor: pointer;
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
    color: black;
}

.h
{
	font-weight: 900;
	font-size: 5vmin;
	color: dodgerblue;
	margin-bottom: 10px;
}
.row
{
	margin-bottom: 5px;
}

@media screen and (max-width: 1500px)
{
    #mainTitle
    {
        font-size: 5.5vmin;
    }
}
@media screen and (max-width: 1300px)
{
    #mainTitle
    {
        font-size: 5vmin;
    }
}
@media screen and (max-width: 1100px)
{
    #mainTitle
    {
        font-size: 4.5vmin;
    }
}
@media screen and (max-width: 900px)
{
    #mainTitle
    {
        font-size: 4vmin;
    }
}
@media screen and (max-width: 700px)
{
    #mainTitle
    {
        font-size: 3.5vmin;
    }
}

@media screen and (max-width: 550px)
{
    #container
    {
        /visibility: hidden;
    }
    body
    {
        /background: dodgerblue;
    }
}";


$Output = new MiniOutput('text/css', 'UTF-8', $content, true, true);
$Output -> send();