@font-face{font-family:'rogallo';src:url("./fonts/rogallo-font.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

  * {margin: 0;padding: 0;box-sizing: border-box;}

body {color: #fff;background: #fff;font-family: "Playfair Display", serif;background: url(img/rogallo-the-man-the-wing-the-truth.webp) no-repeat center fixed;background-size: cover;}

main footer .idea .img-container img,
main footer .idea .img-container,
main footer .idea,
main::after {width: 100%;}

main footer .idea .img-container img,
main footer .idea .img-container,
main::after {height: 100%;}

main {min-height: 100vh;position: relative;display: grid;grid-template-columns: repeat(12, 1fr);padding-inline: clamp(1rem, 5%, 4rem);}
main nav,main header {grid-column: span 12;}
main nav {display: flex;justify-content: space-between;padding: 2.5em 0 0;}
main header {padding: 0 clamp(1.5rem, 5%, 3.5rem);align-self: center;padding-block: min(20vh, 3rem);}

h1 {color: #fff;font-family:rogallo; font-size: clamp(2.375rem, 1.3825rem + 4.9624vw, 6.5rem);font-weight: 500;line-height: 1.1;}

@media screen and (min-width: 37.5rem) {main header a {font-size: 1.1rem;}}
main header a:hover {color: #fe8c4c;}
main header a i {display: grid !important;place-items: center;background: #fe8c4c;color: #fff;width: 2.188rem;height: 2.188rem;border-radius: 50%;margin-right: 0.625em;}

@media screen and (min-width: 37.5rem) {main header a i {width: 2.5rem;  height: 2.5rem;}}
main header a:hover i {background: #111111;}

.pd {padding: 25px;}
.logo {width: clamp(120px, calc(10px + 15vw), 240px);}