@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap"); #header { background: #01003B; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } @media screen and (max-width: 550px) { #header { flex-direction: column; } } #header #logo { font-family: "Montserrat", sans-serif; font-weight: 700; margin-left: 20px; color: #D6FFFF; } #header .navbar { display: flex; } #header .navbar .nav-item { margin-right: 20px; font: 18px "Montserrat", sans-serif; font-weight: 600; color: #A3C2C2; text-decoration: none; } #header .navbar .nav-item:hover { color: #D6FFFF; } @media screen and (max-width: 550px) { #header .navbar .nav-item:last-of-type { margin-right: 0; } } #footer { margin: 0; display: flex; justify-content: flex-start; flex-direction: row; align-items: flex-start; padding: 20px; } #footer .footer-column { color: aliceblue; display: flex; flex-direction: column; margin: 0 20px 0 0; } #footer .footer-column h2 { font: 22px "Montserrat", sans-serif; font-weight: 600; color: white; margin-bottom: 0; } #footer .footer-column hr { margin: 0 0 10px 0; border: 1px dotted white; } #footer .footer-column a { color: inherit; text-decoration: none; margin: 0 0 5px 0; font: 16px "Montserrat", sans-serif; font-weight: 500; } #footer .footer-column .footer-social { display: inline-flex; align-items: center; border-radius: 5px; } #footer .footer-column .footer-social img { border-radius: 10px; width: 35px; height: 35px; margin: 0 15px 0 0; } #footer .footer-column .footer-social:hover { background: #D6FFFF; color: black; } #footer .footer-column p { font: 16px "Montserrat", sans-serif; font-weight: 500; color: inherit; margin: 0; } #footer .footer-column:last-of-type { margin: 0; } html, body { margin: 0; padding: 0; background-color: #364040; } #container { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr 1700px 1fr; grid-row-end: -1; grid-auto-rows: 1fr; grid-gap: 0; } @media screen and (max-width: 1700px) { #container { grid-template-columns: 0 1fr 0; background: red; } } #left { grid-column: 1; grid-row-start: 1; grid-row-end: 3; } #header { grid-column: 2; grid-row: 1; } #content { background: aquamarine; grid-column-start: 2; grid-row-start: 2; padding: 20px; overflow-wrap: break-word; } #footer { background: black; grid-column: 2; grid-row: 3; } #right { grid-column: 3; grid-row-start: 1; grid-row-end: 3; } /*# sourceMappingURL=main.css.map */