@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap");:root{--light-cyan:#cee3e9;--neon-green:#52ffa8;--grayish-blue:#4e5d73;--dark-grayish-blue:#323a49;--dark-blue:#1f2632}*{margin:0;padding:0;box-sizing:border-box;utline:1px solid #000}body,html{width:100%;height:100%}body{font-family:Manrope,Trebuchet MS;display:flex;flex-flow:column;justify-content:center;align-items:center;background-color:var(--dark-blue)}main{width:375px;height:100%;display:grid;grid-template:5fr 6fr 1fr/auto;grid-template-areas:"one" "two" "three";padding:1rem;grid-gap:.5rem;gap:.5rem}header{grid-area:one;grid-template:5fr 1fr/auto;grid-template-areas:"top" "bottom";margin:0 auto;text-align:center}header,menu{display:grid;width:100%}menu{grid-area:top;grid-template:1fr 1fr/auto;grid-template-areas:"one-menu" "two-menu";grid-gap:.2rem;gap:.2rem}article{width:100%}#obi-reason{grid-area:one-menu;display:grid;grid-template:4fr 1fr/auto;grid-template-areas:"one-obir" "two-obir";height:100%;grid-gap:.2rem;gap:.2rem}#nav-obir{grid-area:one-obir}nav{width:100%;background-color:var(--grayish-blue);border-radius:.5rem;display:flex;flex-flow:column;justify-content:space-evenly;align-items:center}h2{font-size:.8rem;color:var(--neon-green)}h3{font-size:.9rem;width:90%;color:var(--light-cyan);text-align:center}#pdm-obi{grid-area:two-obir;margin:0 auto}#others-reason{grid-area:two-menu;display:grid;grid-template:1fr 4fr/auto;grid-template-areas:"one-othersr" "two-othersr";height:100%;grid-gap:.2rem;gap:.2rem}#pdm-others{grid-area:one-othersr;margin:0 auto}#nav-othersr{grid-area:two-othersr}aside{grid-area:bottom}aside,aside div{display:flex;justify-content:center;align-items:center}aside div{background-color:var(--neon-green);border-radius:50%;width:30px;height:30px;margin:0 auto}aside div:hover{cursor:pointer;box-shadow:0 0 20px 5px var(--neon-green)}section{grid-area:two;width:100%;display:flex;justify-content:center;align-items:center}#obi-pics,footer{border-radius:.5rem}footer{grid-area:three;background-color:var(--grayish-blue);color:var(--light-cyan);width:90%;display:flex;flex-flow:column;justify-content:center;align-items:center;margin:0 auto}a{color:var(--neon-green)}@media (min-width:500px){main{width:475px}}@media (min-width:600px){main{width:570px}}@media (min-width:700px){main{width:665px}}@media (min-width:800px){main{width:760px}menu{grid-template:auto/1fr 1fr;grid-template-areas:"one-menu two-menu"}h2{font-size:.9rem}h3{font-size:1rem}}@media (min-width:900px){main{width:855px}menu{grid-template:auto/1fr 1fr;grid-template-areas:"one-menu two-menu"}h2{font-size:.9rem}h3{font-size:1rem}}@media (min-width:1000px){main{width:950px}menu{grid-template:auto/1fr 1fr;grid-template-areas:"one-menu two-menu"}h2{font-size:.9rem}h3{font-size:1rem}}