@font-face { font-family: myFirstFont; src: url('../fonts/megrim2.ttf') format('truetype'); } body { font-family: 'Titillium Web', sans-serif; } /*plynulý posun při kliknutí na kotvu*/ html { scroll-behavior: smooth; } .menu{ text-align: center; font-family: myFirstFont; font-size: 50px; } .menu a { color:inherit; text-decoration: none; } .logo {display: none; } .menu-1, .logo, .logo-mob, .menu-2 { margin: auto; width: 90% } .logo-mob img{ width: 90%; } #header { text-align: center; margin: 10 0 10 0 ; /* border-bottom: 6px solid grey; border-bottom-style:inset;*/ } hr.header{ height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); width: 100.5%; margin-left: -0%; } hr.footer{ border: 0; height: 0; /* Firefox... */ box-shadow: 0 0 10px 1px black; } hr.footer:after { /* Not really supposed to work, but does */ content: "\00a0"; /* Prevent margin collapse */ } footer { text-align: center; font-size: 13px; line-height: 1; } * { box-sizing: border-box; } /* Create two equal columns that floats next to each other */ /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .column { width: 100%; /*height: 300px; Should be removed. Only for demonstration */ padding: 1%; text-align: justify; /* top: 50%; transform: translateY(-50%);*/ } /*.column p { padding-left: 10px; padding-right: 10px; }*/ .carusell { /* background: LightGreen;*/ margin-top: 5px; } .title { display: block; font-size: 30px; text-align: left; font-weight: 700; } .column-img { max-width: 100%; width: 100%; height: auto; text-align: center; display: block; margin-left: auto; margin-right: auto; } p { text-align: justify; } .troj { width:25px; } h3 { margin-bottom: 0px; } .todo:before { content: "TODO"; } .todo { /*background-color: yellow;*/ color: red; } @media screen and (max-width: 999px){ .desktop-block {display: none; } } @media screen and (min-width: 1000px) { .container{ margin: 0 auto; width: 80%; max-width: 1000px; } .menu-1, .menu-2 { border-width: 0px; width: 7%; display: inline-block; } .logo { /* min-width: 200px;*/ border-width: 0px; width: 30%; display: inline-block; } .menu{ text-align: center; font-family: myFirstFont; font-size: 20px; } .menu:hover a{ font-weight:bold; } .menuspace{ height: 105px; } /*offset kotvy*/ :target:before { content: ""; display: block; height: 120px; margin: -120px 0 0; } .menu-container{ text-align: center; position: fixed; background-color: white; width: 100%; /*margin-left: -21%;*/ margin-top: -10px; z-index: 100; } .logo img{ width: 300px; margin-bottom: -15px; } .logo-mob {display: none;} .menu-1 {border-color: red} .logo {border-color: green} .menu-2 {border-color: blue} .column { float: left; width: 50%; /*height: 300px; Should be removed. Only for demonstration */ } .normal-column { width: 46%; margin: 2%; } .column-big { float: left; width: 100%; } .title { display: block; text-align: right; font-weight: 700; text-transform:uppercase; } .profil-left { clip-path: polygon(0% 0%, 60% 0%, 100% 100%, 0% 100%); } .profil-right { clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%); } .row { display: flex; /* flex-direction: column;*/ align-items: center; /* justify-content: center;*/ margin-bottom: 20px; } .mobile-block {display: none; } }