@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");

        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }


        html {
            font-size: 13pt;
        }

        body {
            background-color: #fff;
            color: rgba(0, 0, 0, 0.5);
        }

        body.darkmode {
            background: black;
            color: white;
        }

        body, input, select, textarea {
            font-family: "Poppins", sans-serif;
            font-weight: 300;
            font-size: 1rem;
            line-height: 1.65;
        }

        .image {
            display: inline-block;
            width: 400px;
            height: auto;
            position: relative;
            transition: transform ease-in-out 0.4s;
        }

		.image img {
			display: block;
		}

		.image.left, .image.right {
			max-width: 50%;
		}

		.image.left img, .image.right img {
			width: 100%;
		}

		.image.left {
			float: left;
			margin: 0 1rem 1rem 0;
			top: 0.25rem;
		}

		.image.right {
			float: right;
			margin: 0 0 1rem 1rem;
			top: 0.25rem;
		}

		.image.fit {
			display: block;
			margin: 0 0 2rem 0;
			width: 100%; 
		}

        .image.fit.flush {
			display: flex;
            justify-content: center;
            align-items: center; 
            margin-bottom: 10px;
		}

		.image.fit img {
			width: 100%;
		}

		.image.main {
			display: block;
			margin: 0 0 3rem 0;
			width: 100%;
		}

		.image.main img {
			width: 100%;
		}

        .spotlight {
            display: -moz-flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            -moz-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -moz-align-items: center;
            -webkit-align-items: center;
            -ms-align-items: center;
            align-items: center;
	    }

        #header {
            color: #a6a6a6;
            cursor: default;
            position: relative;
            text-align: center;
            z-index: 10001;
        }

         body.darkmode #header {
            color: #a6a6a6;
        }

        #header > .logo {
            margin: 3rem 0 0rem 0;
            padding: 0;
        }

        #header > .logo a {
            font-size: 4rem;
            font-weight: 700;
            color: black;
            text-decoration: none;
            line-height: 3rem;
        }

        #header > .bellwald a {
            color: black;
            text-decoration: none;
        }

        body.darkmode #header > .bellwald a {
            color: white;
            text-decoration: none;
        }

        body.darkmode #header > .logo a {
            color: white;
        }

        #header > .logo span {
            font-weight: 300;
            font-size: 1rem;
            display: block;
            color: black;
        }

        td, th {
            border-right: 0.0000001px solid;
            border-color: #f7f7f7;
        }

        div.beschrieb-nr {
            width: 80px;
            padding-left: 6px;
            padding-right: 6px;
        }       

        div.beschrieb-bh {
            width: 300px;
            padding-left: 6px;
            padding-right: 6px;
        }

        div.beschrieb-ob {
            width: 400px;
            padding-left: 6px;
            padding-right: 6px;
        }

        div.beschrieb-ort {
            width: 190px;
            padding-left: 6px;
            padding-right: 6px;
        }

        div.beschrieb-bb {
            width: 155px;
            padding-left: 6px;
            padding-right: 6px;
        }

        div.beschrieb-z {
            width: 150px;
            padding-left: 6px;
            padding-right: 6px;
        }

        div.beschrieb-bl {
            width: 130px;
            padding-left: 6px;
            padding-right: 6px;
        }

        body.darkmode #header > .logo span {
            font-weight: 300;
            font-size: 1rem;
            display: block;
            color: white;
        }

        #main > .inner-top {
            width: 140rem;
            max-width: 95%;
            margin-bottom: 0rem;
            padding-top: 2px;
            background: rgba(255, 255, 255, 0.95);
            -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
            border-radius: 4px;
        }

        body.darkmode #main > .inner-top {
            background: #3B3B3B;
            -webkit-box-shadow: 0px 0px 3px 0px #F7F7F7;
            -moz-box-shadow: 0px 0px 3px 0px #F7F7F7;
            box-shadow: 0px 0px 3px 0px #F7F7F7;
            border-radius: 4px;
        }

        div.inner-top {
            position: sticky;
            top: 0;
            z-index: 100;
            border-left-width: 2px;
            margin-bottom: 10px;
            margin-left: 48px;
        }

        #main > .inner {
            margin: 0 auto;
            width: 140rem;
            max-width: 95%;
            margin-bottom: 0rem;
            padding-top: 2px;
            background: rgba(255, 255, 255, 0.95);
            -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
            border-radius: 4px;
        }

        body.darkmode #main > .inner {
            background: #3B3B3B;
            -webkit-box-shadow: 0px 0px 3px 0px #F7F7F7;
            -moz-box-shadow: 0px 0px 3px 0px #F7F7F7;
            box-shadow: 0px 0px 3px 0px #F7F7F7;
            border-radius: 4px;
        }

        div.clubname {
            float: left;
            font-size: 20px;
            font-weight: 500;
        }

        div.league, div.manager, div.stadion {
            margin-bottom: 15px;
            font-size: 15px;
            line-height: 17px;
            font-weight: 100;
            float: left;
        }

         div.vorname, div.nachname, div.newsletter {
            text-align: center;
            margin-bottom: 15px;
            font-size: 28px;
            line-height: 30px;
            font-weight: 500;
        }

        label.newsletter {
            text-align: center;
            margin-bottom: 15px;
            font-size: 28px;
            line-height: 30px;
            font-weight: 500;
        }
        

        form.auswahl-fav {
            text-align: center;
        }

        div.newsletter #text  {
            text-align: center;
            margin-bottom: 15px;
            font-size: 28px;
            line-height: 30px;
            font-weight: 500;
        }

        div.text {
            text-align: justify;
            margin: 80px;
            margin-top: 20px;
            margin-right: 80px;
            margin-bottom: 80px;
            margin-left: 80px;
        }

        .content {
            padding-bottom: 1px;
        }

        .search_top {
            margin-top: 15px;
            margin-top: 15px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 69px;
        }

        .beschrieb {
            float: left;
            font-size: 15px;
        }

        a.buttondelet {
            color: rgba(0, 0, 0, 0.5);
            text-decoration: none;
        }

        body.darkmode a.buttondelet {
            color: white;
            text-decoration: none;
            float: right;
        }

        body a.buttondelet {
            rgba(0, 0, 0, 0.5)
            text-decoration: none;
            float: right;
        }

        .button_hinzufuegen {
                margin-top: 10px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-right: 69px;
        }	

        .logout {
                margin-top: 10px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-right: 69px;
        }

        .user_button {
                margin-top: 10px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-right: 69px;
                margin-bottom: 20px;
                }

        .content a {
            padding-left: 10px;
            padding-right: 10px;
        }

        .switch {
                margin-top: 10px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-right: 69px;
                }

        .login {
                margin-top: 10px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-right: 69px;
        }

        .vergessen {
                text-align: center;
        }

        .button_random {
            margin-top: 2px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 69px;
        }

        img[onClick]{
            cursor:pointer;
        }

        #preview{
            width:100%;
            height:100%;
            background-image:url(\'http://tools.webmaster-glossar.de/img/black80.png\');
            position:absolute;
            display:none;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }
        #preview #imgPrev{
            display:block;
            margin: 0 auto;
        }
        #preview #preview_inner{
            width:100%;
            height:100%;
            background-position:center center;
            background-repeat:no-repeat;
        }
        #preview a.close{
            cursor:pointer;
            float:right;
            margin:0;
            width:70px;
            height:70px;
            text-align:right;
            box-sizing:border-box;
            padding:15px 20px;
            background-color:#AB5D4B;
            color:#fff;
            border-radius:0 0 0 100%;
            font-family:Arial;
            font-size:18px;
        }
        #preview a.close:hover{
            background-color:#C6442A;
        }
    
        @media screen and (max-width: 1911px) {
            div.inner-top {
            margin-left: 40px;
            }
        }
            
        @media screen and (max-width: 1911px) {
            div.beschrieb-nr {
                width: 90px;
            }       

            div.beschrieb-bh {
                width: 200px;
            }

            div.beschrieb-ob {
                width: 300px;
            }

            div.beschrieb-ort {
                width: 130px;
            }

            div.beschrieb-bb {
                width: 120px;
            }

            div.beschrieb-z {
                width: 100px;
            }

            div.beschrieb-bl {
                width: 100px;
            }

            html {
                font-size: 13px; 
            }
            
            div.inner-top {
            margin-left: 40px;
            }
        }
        
        @media screen and (max-width: 1860px) {
            div.inner-top {
            margin-left: 44px;
            }
        }

        @media screen and (max-width: 1680px) {
            div.inner-top {
            margin-left: 44px;
            }
        }

        @media screen and (max-width: 1600px) {
            div.inner-top {
            margin-left: 38px;
            }
        }

        @media screen and (max-width: 1370px) {
            div.inner-top {
            margin-left: 33px;
            }
        }

        @media screen and (max-width: 1464px) {
            div.beschrieb-nr {
                width: 36px;
            }        

        @media screen and (max-width: 1438px) {
            div.beschrieb-nr {
                width: 40px;
            }       

            div.beschrieb-bh {
                width: 120px;
            }

            div.beschrieb-ob {
                width: 220px;
            }

            div.beschrieb-ort {
                width: 100px;
            }

            div.beschrieb-bb {
                width: 100px;
            }

            div.beschrieb-z {
                width: 70px;
            }

            div.beschrieb-bl {
                width: 90px;
            }

            html {
                font-size: 10px; 
            }
            
            div.inner-top {
            margin-left: 34px;
        }
        }
            
        @media screen and (max-width: 1163px) {
            div.inner-top {
            margin-left: 29px;
            }
        }
            
        @media screen and (max-width: 1071px) {
            div.inner-top {
            margin-left: 26px;
            }
        }     

        @media screen and (max-width: 1010px) {
            div.beschrieb-nr {
                width: 25px;
            }       

            div.beschrieb-bh {
                width: 90px;
            }

            div.beschrieb-ob {
                width: 130px;
            }

            div.beschrieb-ort {
                width: 85px;
            }

            div.beschrieb-bb {
                width: 80px;
            }

            div.beschrieb-z {
                width: 60px;
            }

            div.beschrieb-bl {
                width: 60px;
            }

            html {
                font-size: 10px; 
            }
            
            div.inner-top {
            margin-left: 19px;
        }
        }
            


        @media screen and (max-width: 650px) {
        your font  style goes here


        }