*{ margin: 0; padding: 0; scroll-behavior: smooth; } body{ } .b-move{ display: none; } .img-ex{ width: 90%; } .li-dropdown{ list-style-type: none; border-bottom: 1px solid black; padding-bottom: 1vh; margin-bottom: 1vh; margin-top: 1vh; font-size: 1vw; } footer{ position: fixed; Width: 100%; bottom: 0; font-size: 1vw; border-top: 1px solid #000; background-color: #fff; } .id li{ display: inline; margin-left: 3vw; } .li-dropdown:last-child{ border-bottom: none; } .li-dropdown a:hover{ text-shadow: -.25px -.25px 0 black, .25px .25px black; } #navbar{ height: auto; } .li-navbar{ display: inline; } .ul-navbar{ text-align: center; font-size: 1.3640625vw; } a{ text-decoration: none; color: black; } .dropdown { position: relative; display: inline-block; width: 7.5vw; padding: 1%; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 7.5vw; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 1vw; z-index: 1; margin-left: -1vw; margin-top: 0.95vw; } .dropdown:hover .dropdown-content { display: block; } .a-navbar{ text-decoration: none; color: black; padding: 1%; } .a-navbar:hover{ padding: 1%; background-color: beige; } .dropdown:hover{ background-color: beige; } i{ padding-right: 0.5vw; font-size: 1vw; } .div-links{ width: 84vw; margin-left: auto; margin-right: auto; padding: 3vw; border: 1px solid black; box-shadow: 8px 8px 16px 0px rgba(0,0,0,0.5); margin-bottom: 26vh; } .h-links{ font-size: 2vw; } .links-grid{ display: grid; grid-template-columns: 33% 33% 33%; margin-top: 5vh; } .item-left{ width: 100%; padding: 5%; } .item-middle{ width: 100%; padding: 5%; border-left: 1px solid black; } .item-right{ width: 100%; padding: 5%; border-left: 1px solid black; } h6{ font-size: 1.2vw; } .item-left a{ line-height: 1.5; font-size: 1vw; color: blue; } .item-middle a{ line-height: 1.5; font-size: 1vw; color: blue; } .item-right a{ line-height: 1.5; font-size: 1vw; color: blue; } @media only screen and (max-width: 1000px) and (min-width: 100px) { footer{ font-size: 2vw; } #navbar{ height: 100vh; width: 100vw; background-color: white; position: fixed; z-index: 2; display:flex; transform: translateX(-100%); margin-top: -5vw; } .li-navbar{ width: 100vw; display: flex; height: 5vh; border-bottom: 1px solid black; padding-top: 3vw; padding-bottom: 1vw } .a-navbar{ font-size: 5vw; margin-left: auto; margin-right: auto; padding: 0; } .ul-navbar{ width: 100vw; list-style-type: none; height: 100vh; } .li-navbar:hover{ background-color:none; } .dropdown { width: 100vw; padding: 0; } .dropdown-content { display: none; position: absolute; background-color: lightgray; min-width: 100vw; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; padding: 0; margin: 0; } i{ font-size: 3vw; } .li-dropdown{ font-size: 5vw; padding-bottom: 1vh; margin-bottom: 1vh; margin-top: 1vh; padding-top: 1vh; } .b-move{ border: none; height: 4vh; width: 4vh; position: fixed; display: block; z-index: 20; margin-top: -4vh; } .a-navbar:hover{ padding: 1%; background-color: white; } .dropdown:hover{ background-color: white; } .div-links{ margin-top: 4vh; } .links-grid{ display: block; grid-template-columns: reverse; margin-top: 2vw; } .h-links{ font-size: 5vw; } .sub-h { font-size: 4vw } .p-ex{ font-size: 5vw; line-height: 2vw; } .item-right a{ font-size: 3vw; } .item-middle a{ font-size: 3vw; } }