@font-face {
  font-family: 'creato';
  src: url('/_main-page/font/creato_display/CreatoDisplay-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

* {
    font-family: sans-serif;
    margin: 0;
    padding: 0;

    --back: -100;
    --glasscolor: #e7e7e761;
    --darkglasscolor: #b0b0b06d;
    --glassblur: 0.5rem;
}

html {
    font-size: clamp(14px, 3vmax, 30px);
}

body {
    overflow-y: scroll;
}

.top {
    width: 100%;
    background-color: var(--darkglasscolor);
    backdrop-filter: blur(var(--glassblur));
    padding: 1rem;
    border-bottom: solid 0.1rem var(--darkglasscolor);
}

.bottom {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: var(--darkglasscolor);
    backdrop-filter: blur(var(--glassblur));
    padding: 1rem;
    border-top: solid 0.1rem var(--darkglasscolor);
}

h1 {
    padding: 1rem;
    font-size: 2rem;
    color: rgb(76, 76, 76);
    text-shadow: 0 0 1rem rgb(255, 255, 255);
    /* -webkit-text-stroke: 0.05rem rgb(0, 0, 0); */
}

p {
    padding: 0.5rem;
}

.nospace {
    padding: 0;
}

li {
    padding: 0.15rem;
    font-size: 0.7rem;
    list-style: none;
    text-align: center;
    color: black;
    text-shadow: 0 0 20px white;
}

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  z-index: -1;

  /* background: linear-gradient(to bottom, #f1f9fa, #00ffee); */
  background-image: url("/_main-page/okbg.png");
  background-size: cover;
  background-repeat: no-repeat;

  filter: contrast(0.8) brightness(1.1);
}

.subtitle {
    text-align: center;
    padding: 0rem 0 1rem 0;
    margin: 2rem 2rem 0 2rem;
    background-color: var(--glasscolor);
    backdrop-filter: blur(var(--glassblur));
    border-radius: 2rem;
    border: solid 0.05rem lightgray;
}

.homegrid {
    padding: 2rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: center;     /* vertical */
    justify-items: center;   /* horizontal */
}

.gridelement {
    width: 100%;
    height: 100%;
    padding: 1rem 1rem 0 1rem;
    background-color: var(--glasscolor);
    backdrop-filter: blur(var(--glassblur));
    border-radius: 2rem;
    border: solid 0.05rem lightgray;
}

.gridimg {
    cursor: pointer;
    width: 100%;
    height: 3rem;
    background-image: conic-gradient(red, yellow, green);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 1rem;
    filter: brightness(1);
    transition: cubic-bezier(1, 0, 0, 1) 0.1s filter;
}

.niebla {
    background-image: url("/_main-page/thumbnails/niebla.png");
}

.defense {
    background-image: url("/_main-page/thumbnails/defense.png");
}

.liverreal {
    background-image: url("/_main-page/thumbnails/liverreal.png");
}

.econorge {
    background-image: url("/_main-page/thumbnails/econorge.png");
}

.mapgame {
    background-image: url("/_main-page/thumbnails/mapgame.png");
}

.firlandspill {
    background-image: url("/_main-page/thumbnails/firlandspill.png");
}

.wave {
    background-image: url("/_main-page/thumbnails/wave.png");
}

.ui-ideas {
    background-image: conic-gradient(red, yellow, green);
}

.myapp {
    background: white;
}

.blockygo {
    background-image: url("/_main-page/thumbnails/blockygo.png");
}

.gridimg:active {
    filter: brightness(0.9);
}

/* .gridimg.clicked {
    filter: brightness(1);
    z-index: 1;
    position: relative;
    width: 100vw;
    height: 100vh;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
} */

/* if screen size is under px */
@media screen and (max-width: 840px) { 
.homegrid {
    grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 600px) { 
.homegrid {
    grid-template-columns: repeat(1, 1fr);
}

h1 {
    font-size: 1rem;
}
}