@tailwind base;
@tailwind components;
@tailwind utilities;

:root{color-scheme:dark}

.navlink{display:inline-flex;align-items:center;gap:.5rem;border-radius:0.75rem;padding:0.5rem 0.75rem;font-size:.875rem;font-weight:600;color:rgb(226 232 240);transition:background-color .2s ease,color .2s ease,transform .2s ease}
.navlink:hover{background-color:rgb(255 255 255 / .07)}
.navlink:focus{outline:none}
.navlink:focus-visible{box-shadow:0 0 0 2px rgb(165 243 252 / .9)}

.mobilelink{width:100%;text-align:center;border-radius:1rem;padding:0.75rem 1rem;font-size:1.5rem;line-height:2rem;font-weight:700;color:rgb(255 255 255);transition:transform .2s ease,background-color .2s ease,opacity .2s ease}
.mobilelink:hover{background-color:rgb(255 255 255 / .08);transform:translateY(-1px)}
.mobilelink:focus{outline:none}
.mobilelink:focus-visible{box-shadow:0 0 0 2px rgb(165 243 252 / .9)}

.footerlink{color:rgb(226 232 240);text-decoration:underline;text-decoration-color:rgb(255 255 255 / .18);text-underline-offset:4px;transition:color .2s ease,text-decoration-color .2s ease}
.footerlink:hover{color:rgb(255 255 255);text-decoration-color:rgb(255 255 255 / .6)}
.footerlink:focus{outline:none}
.footerlink:focus-visible{box-shadow:0 0 0 2px rgb(165 243 252 / .9);border-radius:.5rem}

img{max-width:100%;height:auto;display:block}

::selection{background:rgb(34 211 238 / .25);color:rgb(255 255 255)}