/* This file contains all base styling and CSS variables */
:root
{
    --accent: #61b6e6;
    --background: #1f2937;
    --background-color: rgb(246, 249, 252);
    --white : #ededed;
    --green: rgb(0, 209, 0);
    --font-body : ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --transition: all ease .2s;
    --box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

body
{	
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color:#1f2937;
    margin:0;
    padding: 0;
}

html
{
    scroll-behavior:smooth;
}

a
{
    text-decoration: underline;
    padding: .10rem;
    border-radius: .25rem;
    color: var(--background);
    transition: var(--transition);
}

h1,h2,h3,h4
{
    font-weight: 400;
}

h1
{
  background: var(--background);
  padding: .5rem;
  color:white;
}

a:visited
{
    color:#800080;
}

/* Add a 'external link' svg to all links that are external */
.link-with-external-indicator[href^="http"]:not([href*="cornucopia-mvp.vercel.app"]):not([href*="localhost"]):after {
    content: '';
    display: inline-block;
    margin-left: 0.2em;
    width: 1rem;
    height: 1rem;
    -webkit-mask: url('/icons/external-link.svg') no-repeat 50% 50%;
    mask: url('/icons/external-link.svg') no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: currentColor; 
}

.display-s {
    display: contents
}

.how-to-play 
{
    width:59vw;
    height:auto;
    aspect-ratio:16/9;
}