/* go to default */
body, p, div, span, a, li, ul {
    padding: 0;
    margin: 0;
}

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

a {
    color: white;
}

/* connect fonts */
@font-face {
    font-family: 'Archive';
    src: local('Archive'), url('../fonts/archive.woff2') format('woff2'), url('../fonts/archive.woff') format('woff'), url('../fonts/archive.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Aquarion';
    src: local('Aquarion'), url('../fonts/aquarion.woff2') format('woff2'), url('../fonts/aquarion.woff') format('woff'), url('../fonts/aquarion.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'Casper';
    src: local('Casper'), url('../fonts/casper.woff2') format('woff2'), url('../fonts/casper.woff') format('woff'), url('../fonts/casper.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Casper';
    src: local('Casper Italic'), local('CasperItalic'), url('../fonts/casperitalic.woff2') format('woff2'), url('../fonts/casperitalic.woff') format('woff'), url('../fonts/casperitalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Casper';
    src: local('Casper Bold'), local('CasperBold'), url('../fonts/casperbold.woff2') format('woff2'), url('../fonts/casperbold.woff') format('woff'), url('../fonts/casperbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Casper';
    src: local('Casper Bold Italic'), local('CasperBoldItalic'), url('../fonts/casperbolditalic.woff2') format('woff2'), url('../fonts/casperbolditalic.woff') format('woff'), url('../fonts/casperbolditalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* ScrollBar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background-color: #CBCBD1;
    border-left: 1px solid black;
}

::-webkit-scrollbar-thumb {
	background-color: #303140;
    border-left: 1px solid black;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #2B2B2E;
}

/**/
.trail { /* className for the trail elements */
    position: absolute;
    height: 5px; width: 5px;
    border-radius: 3px;
    background: white;
}

/* main */
body {
    background-color: #FFF;
}

.wrapper {
    width: 100%;
    height: auto;
}

.header {
    background-image: url(../Images/header.jpg);
    width: 100%;
    height: 30vh;
    background-size: cover;
    margin: 0 auto;
    background-position: 95%;
}

#logo {
    width: inherit;
}

.logo {
    width: 65%;
    padding-left: 5%;
}

.content {
    width: 100%;
    height: 100vh;
    color: white;
}

.menuStrip {
    width: 100%;
    height: 10vw;
    background-color: #F29C2C;
    border-bottom: 2px solid black;
}

.menuItem {
    height: 100%;
    float: left;
    font-size: 2.3vw;
    margin-left: 3%;
    margin-top: 2.3%;
    font-family: Archive;
}

.menuItem:first-letter {
    font-size: 3vw;
}

a>.menuItem:hover {
    color: black;
}

.preview {
    width: 100%;
    height: auto;
    color: black;
}

.leftP {
    width: 65%;
    float: left;
    text-indent: 3%;
    padding-left: 3%;
    padding-right: 4%;
    text-align: justify;
    font-size: 1.6vw;
    padding-top: 4%;
    font-family: Aquarius;
}

.leftP>p {
    margin-bottom: 4%;
}

.rightP {
    width: 35%;
    float: left;
}

#preview {
    width: 90%;
}

.news {
    width: 100%;
    height: auto;
    background-color: white;
    border-top: 2px solid black;
}

.supported {
    width: 100%;
    height: 17vw;
    background-image: url(../Images/darkness.jpg);
    border-bottom: 2px solid black;
    color: white;
    font-family: Archive;
    text-align: center;
    font-size: 2.1vw;
    padding-top: 1%;
}

.supported>p {
    margin-bottom: 2%;
}

.logoContent {
    width: 25%;
    height: 80%;
    float: left;
}

#opensource {
    width: auto;
    height: 65%;
}

#amd {
    width: 70%;
    height: auto;
    margin-top: 7%;
}

#opengl {
    width: 50%;
    height: auto;
    margin-top: 2%;
}

#sourceforge {
    margin-top: 5%;
}

.headline {
    width: 100%;
    height: 8vw;
    background-color: #F29C2C;
    border-bottom: 2px solid black;
    color: white;
    text-align: left;
    font-size: 3vw;
    font-family: Archive;
    text-indent: 3%;
}

.headStrip {
    font-family: Casper;
    font-weight: bold;
    font-size: 1.5vw;
    text-indent: 3%;
    margin-bottom: 1%;
    background-color: #ffbe75;
    padding-right: 3%;
    padding-left: 2%;
}

.textStrip {
    font-family: Aquarius;
    font-size: 1.2vw;
    text-align: justify;
    text-indent: 3%;
    padding-right: 3%;
    padding-left: 2%;
}

.textStrip>ul {
    list-style-type: none;
}

.statusStrip {
    font-family: Casper;
    text-align: right;
    font-style: italic;
    padding-right: 3%;
    padding-left: 2%;
}

.newsItem {
    width: 85%;
    margin-left: 5%;
    background-color: #ffefd8;
    border-left: 2px solid #F29C2C;
    border-top: 1px solid #F29C2C;
    margin-bottom: 4%;
}

.newspaper {
    padding-top: 5%;
}

.footer {
    float: left;
    width: 100%;
    height: 15vw;
    background-image: url(../Images/darkness.jpg);
    color: white;
    text-align: center;
    font-family: serif;
    font-size: 1.4vw;
    padding-top: 4%;
}

.notification {
    width: 40%;
    margin-left: 5%;
    padding: 10;
    border-radius: 5px;
    color: black;
    margin-bottom: 3vh;
    background-color: #3B5F35;
    float: left;
}

.notification>a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.notification>a:hover {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.dev {
    background-color: #E7664B;
    float: left;
}

.textL {
    float: left;
    width: 66%;
}
.imgRight {
    
}