/* global variables */
:root {
    /* color */
    --backgroundColor: black;
    --lightGray: #999;
    --evilDarkGray: #666;       /* dark gray */
    --darkGray: #333;           /* dark dark gray */
    --borderColor: white;
    --textShadowColor: #909090;

    /* dimensions */
    --borderThickness: 2px;
    --profileImageSize: 200px;
    --textShadowDisplacement: 6px;
    --heightWidthRatio: 56.25%;
}

* {
    font-family: 'Josefin Sans', sans-serif;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /*font-family: Verdana, sans-serif;*/
    user-select: none;
    -webkit-user-select: none;  /* Chrome/Safari */        
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE10+ */
}

.row {
    max-width: 1000px;
    margin: auto;
}
.row::after {
	content: "";
	clear: both;
	display: table;
}

[class*="col-"] {
    width: 100%;
    /*max-width: 700px;*/
	float: left;
	padding: 15px;
}

/* types */

body {
	/*background: var(--backgroundColor);*/
    background-color: black;
}

h1 {
    color: white;
}

li {
    vertical-align: sub;
    display: inline;
    color: black;
    margin: 0 0 0 10px;     /* top, right, bottom, left */
    padding: 0 10px 0 0;    /* top, right, bottom, left */
    cursor: pointer;
}
li:hover {
    color: white;
}

a {
    text-decoration: none;
    color: black;
}
a:hover {
    color: white;
}

/* classes */

.quarter {width: 25%;}
.third {width: 33%;}
.half {width: 50%;}

.topBanner {
    position: absolute;
    width: 100%;
    height: 50px;
    background: linear-gradient(to right, #bbbbbb, #bbbbbb, #bbbbbb, #efefef, #efefef, #efefef);
    background: -webkit-linear-gradient(to right, #bbbbbb, #bbbbbb, #bbbbbb, #efefef, #efefef, #efefef);
    background: -moz-linear-gradient(to right, #bbbbbb, #bbbbbb, #bbbbbb, #efefef, #efefef, #efefef);
    border-bottom: 1px solid white;
    z-index: -1;
}

/* ids */

#topBar {
	height: 50px;
	display: flex;
    border-bottom: 1px solid white;
	background: linear-gradient(to right, #bbbbbb, #bbbbbb, #bbbbbb, #efefef, #efefef, #efefef);
    background: -webkit-linear-gradient(to right, #bbbbbb, #bbbbbb, #bbbbbb, #efefef, #efefef, #efefef);
    background: -moz-linear-gradient(to right, #bbbbbb, #bbbbbb, #bbbbbb, #efefef, #efefef, #efefef);
}

#menu {
	height: 80%;
    width: auto;
	align-self: center;
	cursor: pointer;
}

#navigation {
    display: none;
    /*vertical-align: middle;*/
    /*border: 1px solid black;*/
    margin: 0;
    padding: 0;
}

#home, #media, #projects {
    border-right: 1px solid gray;
}

#mainContent {
    margin-top: 40px;
}

#container {
    margin: auto;
    max-width: 600px;
}

.photo {
    /*border: var(--borderThickness) solid var(--borderColor);*/
    /*background-color: white;*/
    cursor: pointer;
    max-width: 100%;
    width: 100%;
    height: auto;
    /*vertical-align: middle;*/
    /*margin-top: auto;*/
    /*margin-bottom: auto;*/
    /*box-shadow: 0px 10px 8px var(--darkGray);*/
}
.photo:hover {
    opacity: 0.8;
}

#profile {
    width: var(--profileImageSize);
    height: var(--profileImageSize);
    background: linear-gradient(#ffffff, #000000);
    background: -webkit-linear-gradient(#ffffff, #000000);
    background: -moz-linear-gradient(#ffffff, #000000);
    border: var(--borderThickness) solid var(--borderColor);
    display: block;
    margin: auto;
    border-radius: 200%;
    box-shadow: 0px 10px 8px var(--darkGray);
}
#profile:hover {
    opacity: 1;
}

#aboutInfo {
    color: white;
    text-align: center;
    text-shadow: 0 var(--textShadowDisplacement) var(--textShadowDisplacement) var(--evilDarkGray);
    display: block;
    margin: auto;
}

/* For mobile phones: */
/*[class*="col-"] {
    width: 100%;
}*/

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

@media only screen and (orientation: landscape) {
    body {
        /*background-color: white;*/
    }
}