*{box-sizing:border-box;}html, body{margin:0;padding:0;}.nav-bar a{text-decoration:none;color:black;display:block;}.nav-bar > ul{list-style-type:none;margin:0;padding:0;}.nav-bar > ul > li > a{padding:10px;background:green;}.nav-bar > ul > li > a:hover{background:tomato;color:#f8f9f9;}.nav-bar .active{background:#173459;color:#f8f9f9;}.nav-bar > ul > li{float:left;width:25%;text-align:center;}.logo{width:200px;height:200px;position:absolute;top:10%;left:20%;}.hra{width:30px;color:white;margin:2px;padding:2px;background:black;}@media screen and (min-width:500px){body{background:green;}.logo{width:200px;height:200px;position:absolute;top:10%;left:35%;}}.dd{position:relative;display:inline-block;}.dd-btn{padding-left:15px;padding-right:15pxtext-align:center;border:none;width:30px;color:#f8f9f9;}.dd-content{position:absolute;display:none;width:100%;box-shadow:0 18px 36px rgba(0,0,0,0.30), 0 14px 11px rgba(0,0,0,0.22);}.dd:hover > .dd-content{display:block;}.dd-content > a{display:block;padding:15px;text-decoration:none;color:black;}.dd-content > a:hover{color:white;background:#903C56;}#hip{display:none;background:grey;position:fixed;top:0px;right:0px;bottom:0px;left:0px;border-right:50px solid black ;border-left:50px solid black ;}.ico{width:20px;height:20px;}footer{background-color:#f2f2f2;padding:20px;text-align:center;}h1, h3{text-align:center;color:blue;}