@font-face { font-family: myFirstFont; src: url('../fonts/megrim2.ttf') format('truetype'); } * { box-sizing: border-box } html { scroll-behavior: smooth } body { font-family: 'Titillium Web', sans-serif } .menu{ text-align: center; font-family: myFirstFont; font-size: 50px; } .menu a { color:inherit; text-decoration: none; } .logo { display: none } ul.leaf { list-style-image: url('../img/troj-modry-maly.png'); } .menu-1, .logo, .logo-mob, .menu-2 { margin: auto; width: 90% } .logo-mob img{ width: 90%; } #header { text-align: center; /* 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%; } hr.footer{ border: 0; height: 0; box-shadow: 0 0 10px 1px black; margin: 3em 0; } 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; } /* 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; } /* RESPONSIVITY */ @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%; } .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%, 80% 0%, 100% 100%, 0% 100%); } .profil-right { clip-path: polygon(20% 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 } }