:root {
--black: #000; 
--white: #fff;
--red: #ea1f1f;
--blue: #0156e7;
}
html, body {
height : 100%;
}
body {
margin : 0;
}
.h-90 {
height: 90% !important;
}
.h-10 {
height: 10% !important;
}
.min-hpx-40 {
min-height: 40px !important	
}
.min-h-50 {
min-height: 50% !important	
}
a {
color : var(--black);
text-decoration : none;
}
a:focus {
color : var(--black);
text-decoration : none;
}
a:current {
color : var(--black);
text-decoration : none;
}
a:hover {
color : var(--black);
text-decoration : none;
}
.container {
border-left : 1px solid var(--black);
border-right : 1px solid var(--black);
}
.main {
display : flex;
flex-direction: column;
justify-content: center;
min-height : 100vh;
}
.row .bordercol-right:last-of-type {
border-right : none;
}
.bordercol-right {
border-right : 1px solid var(--black);
}
.bordercol-top {
border-top : 1px solid var(--black);
}
.bordercol-left {
border-left : 1px solid var(--black);
}
.bordercol-right {
border-right : 1px solid var(--black);
}
.bordercol-bottom {
border-bottom : 1px solid var(--black);
}
header {
border-bottom : 1px solid var(--black);
}
.content {
display : flex;
flex-grow : 1;
min-height : 150px;
padding-left : 0;
padding-right : 0;
}
footer {
border-top : 1px solid var(--black);
}
footer a {
padding: 8px;
}
.main-title a {
padding: 8px;
}
.navtoggler {
display : flex;
width : 100%;
cursor : pointer;
padding : 20px 21px;
}
.bar {
position : relative;
margin-left : auto;
margin-right : auto;
margin-top : 5px;
margin-bottom : 5px;
display : inline-block;
width : 100%;
height : 3px;
background-color : var(--black);
border-radius : 3px;
}
div.bar:first-of-type {
position : relative;
top : 5px;
margin-top : 0;
}
div.bar:last-of-type {
position : relative;
bottom : 5px;
margin-bottom : 0;
}
.navigation {
width: 0;
height : 100%;
position : relative;
z-index : 1;
top : 0;
left : 0;
background-color : var(--red);
overflow-x : hidden;
transition : width 0.3s;
}
.portfolio {
background-color : var(--blue);
}
.portfolio a {
color: var(--white);
}
.navifull {
width : 100%;	
}
.navigation a {
padding : 8px 8px 8px 32px;
text-decoration : none;
font-size : 16px;
color : var(--black);
display : block;
border-top : 1px solid var(--black);
}
.navigation a:first-of-type {
border-top : none;
}
.navigation a:hover {
color : var(--black);
}
.navigation .closebtn {
position : absolute;
top : 0;
right : 25px;
font-size : 36px;
margin-left : 50px;
}
.menucenter {
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
}
.modeicon {
color : var(--white);
}
.bodymode {
background : var(--black);
}
.bodymode .bordercol-right, .bodymode .bordercol-top, .bodymode .container, .bodymode .content, .bodymode a, .bodymode .darkmode, .bodymode .clock, .bodymode header, .bodymode footer {
border-color : var(--white);
color : var(--white);
}
.bodymode .bar, .bodymode .clock .hand {
background-color : var(--white);
}
.modetoggler {
display : flex;
cursor : pointer;
}
.no-gutter > [class*="col-"] {
padding-right : 0;
padding-left : 0;
}
.clock {
text-align : center;
position : absolute;
top : 50%;
left : 50%;
width : 120px;
height : 120px;
margin : -60px 0 0 -60px;
border-radius : 50%;
border : 1px solid var(--black);
}
.hand {
position: absolute;
background-color: var(--black);
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
-o-transition: -o-transform 0.5s ease;
transition: transform 0.5s ease;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.hour {
height : 20%;
top : 30%;
left : 50%;
width : 3px;
margin-left : -1.5px;
}
.minute {
height : 30%;
top : 20%;
left : 50%;
width : 2px;
margin-left : -1px;
}
.second {
height : 45%;
top : 5%;
left : 50%;
width : 1px;
margin-left : -0.5px;
}
/*
.galerie .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
    background: #f00;
}

*/
/*
@media screen and (max-width: 768px) {
.clock {
width : 80px;
height : 80px;
margin : -40px 0 0 -40px;
}
.navigation a {
padding : 5px 5px 5px 35px;
text-decoration : none;
font-size : 16px;
color : var(--black);
display : block;
border-top : 1px solid var(--black);
}
}
*/
/*
@media screen and (max-width: 600px) {
.galerie .column {
flex : 100%;
max-width : 100%;
}
}
*/

@media screen and (max-width: 768px) {
header {
border-top : 1px solid var(--black);
}
footer {
border-bottom : 1px solid var(--black);
}
}