body{
    margin: 0;
}

h1{
    color: #f5bd55;
    font-size: 80px;
    font-family: "Poppins-bold", sans-serif;
    -webkit-text-stroke-color: #000000;
    -webkit-text-stroke-width: 2px;
}

h2{
    color: #f5bd55;
    font-size: 50px;
    text-align: center;
    font-family: "Poppins-bold", sans-serif;
    -webkit-text-stroke-color: #000000;
    -webkit-text-stroke-width: 2px;
}

h3{
    color: #C03221;
    font-size: 50px;
    text-align: center;
    font-family: "Poppins-bold", sans-serif;
}

p{
    line-height: 1.5;
    border-color: #C03221;
    font-family: "Poppins", sans-serif;
    padding: 10px;
    border-style: solid;
    border-radius: 25px;
}

img{
    border-color: #C03221;
    border-style: solid;
    border-radius: 25px;
}

.charColumn{
    float: left;
    width: 50%;
}

.charHalf{
    width: 50%;
    float: left;
    height: 100%;
}

.charPic{
    display: flex;
    justify-content: center;
    align-items: center;
}

.charText{
    display: flex;
    align-items: center;
    width: 40%;
}

.charDiv{
    height: 250px;
}

.button{
	box-shadow: 3px 4px 0px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#C03221;
	border-radius:18px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.button:hover {
	background:linear-gradient(to bottom, #d02718 5%, #C03221 100%);
	background-color:#f24437;
}
.button:active {
	position:relative;
	top:1px;
}

.mediaColumn{
    width: 50%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wrapper{
    width: 100%;
    min-height: 600px;
    margin-left: auto;
    margin-right: auto;
}
#pageStart{
    background-image: url(assets/img/chainsawManWallpaper.jpg);
    min-height: 1080px;
    display: flex;
    justify-content: center;
    object-fit: scale-down;
}

#pageStart div{
    align-content: center;
}


#gradiant{
    height: 100px;
    width: 100%;
    background-image: url(assets/img/farbverlauf.jpg);
}

#chars{
    height: 700px;
}

#charTitle{
    height: 60px;
    margin-bottom: 70px;
}

#pdfDiv{
    height: 100px;
}

#pdfLoader{
    width: 10%;
    margin-top: 33px;
    margin-left: 45%;
    text-align: center;
}

#vidandCanvas{
    width: 100%;
    height: 500px; 
}
#vidandCanvasdiv{
    width: 100%;
    display: flex;
    float: left;
}

#myVid{
    width: 700px;
    height: 394px;
    border-color: #C03221;
    border-style: solid;
    border-radius: 25px;
}

#myCanvas{
    height: 300px;
    width: 500px;
    border: 5px;
    border-color: #C03221;
    border-style: solid;
    border-radius: 25px;
}

#svgSec{
    height: 900px;
    width: 100%;
    display: flex;
    justify-content: center;
}

#csmLogoSvg{
    width: 1600px;
    height: 900px;
    shape-rendering:geometricPrecision;
    text-rendering:geometricPrecision;
    fill-rule:evenodd;
    clip-rule:evenodd; 
}