/*  (c) 2025 crown.business | by Crown Made 
    host [at] crownma.de */

html {
    width: 100%;
    height: 100%;
    background: #d03333;
    background: -webkit-linear-gradient(69deg, #6d00d6, #d03333, #4400d0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(69deg, #6d00d6, #d03333, #4400d0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-color: #d03333;
}

body {
    font-family: 'Raleway', sans-serif;
    font-size: calc(0.75em + 1vmin); 
    overflow: hidden;
    width: 100%;
    /*min-height: 100vh;*/
    background: #d03333;  /* old browsers */
    background: -webkit-linear-gradient(69deg, #6d00d6, #d03333, #4400d0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(69deg, #6d00d6, #d03333, #4400d0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0px;

}

.txt {
    color: #fffccc;
}

.txt:hover {
    color: #f3f3f3;
}

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

.copytxt {
    font-family: 'Source Code Pro', monospace;
    text-align: center;
    font-size: calc(0.50em + 1vmin);
    color: #fffccc;
}

a {
    text-decoration: none;
    color: #fffccc;
}

a:hover {
    text-decoration: none;
    color: #f3f3f3;
}

::-moz-selection {
    background-color: #fff;
    color:#000;
}

::selection {
    background-color: #fff;
    color:#000;
}

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}

.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
    background-color: #0099cc;
}

.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

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

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

.cent {
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#container {
    perspective: 60px;
}

#inner {
    transition: transform 0.5s;
}
.cxlogo {
    fill: #fffccc;
}

.cxlogo:hover {
    fill: #f3f3f3;
}

.cximage:hover {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}