a
{
    font-size: inherit;
    font-family: inherit;
    color:inherit;
    text-decoration: none;

    &:hover{color:rgb(80, 145, 125);}
}

body
{
max-height: 95svh; max-width:100vw;

background-color: rgb(20, 20, 20);
font-family: 'Times New Roman', Times, serif;
color:antiquewhite;

  text-shadow: 
    0px 0px 2px rgb(20, 20, 20),
    0px 0px 5px rgb(20, 20, 20),
    0px 0px 10px rgb(20, 20, 20),
    0px 0px 15px rgb(20, 20, 20);
}



.avatar
{
    max-width: 25%;
    object-position: 90%;
    object-fit: cover;
}


.banner
{
    padding-top:.5em;
    padding-bottom:.5em;
    background-color: rgba(25, 25, 25, 0.166);
    border: 2px solid rgba(45, 45, 45, 0.03);
    width:100svw;
    overflow:hidden;
    text-align:center;
    font-size:larger;

}

.button 
{
  z-index:5;
  width: 10em; height:10em;
  background:none;
  border:none;
  background-image:url(../resources/playstatic.png);
  background-size: contain;
  
  position:absolute;
  bottom:2rem; right:2rem;
  box-sizing: border-box;

  &:hover{background-image:url(../resources/play.gif)}

  &.paused 
  {background-image:url(../resources/pausestatic.png); &:hover{background-image: url(../resources/pause.gif)} }
  
}


.card
{
    width:85%; height:fit-content;
    padding-bottom:3em; 
    padding-left:3.5em; padding-right:3.5em;
    font-size:1.25rem;
    overflow-x:hidden;
    &.visible
    {
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: 15px;
    }
    
}

.column
{
    padding-top:2em;
    padding-left:5%; padding-right:5%;
    display:flex;
    flex-direction: column;
    align-items: center;
}

.content
{
    overflow-y: scroll;
    width:100%; height:85vh;
    padding-top:2em;
    padding-bottom:5vh;
    display:flex;
    justify-content: center;
    backdrop-filter:blur(5px);
    -ms-overflow-style:none;
    scrollbar-width:none;
    &::-webkit-scrollbar{display:none;} 
}


.image-grid {
  overflow-y: scroll;
  width: fit-content;
  margin-inline: auto;
  height: 90vh;
  padding-top: 2em;
  padding-bottom: 5vh;
  scrollbar-width: none;
  display: grid;
  gap: 1em;
  backdrop-filter: blur(5px);
  -ms-overflow-style: none;
  box-sizing: border-box;

  grid-template-rows: repeat(12, 7em);
  grid-template-columns: repeat(5, 14em);
  grid-template-areas:
    "box-1  box-2  box-2  box-3  box-3"
    "box-1  box-2  box-2  box-3  box-3"
    "box-4  box-4  box-4  box-7  box-7"
    "box-4  box-4  box-4  box-7  box-7"
    "box-5  box-5  box-6  box-7  box-7"
    "box-5  box-5  box-6  box-8  box-8"
    "box-9  box-10 box-10 box-11 box-11"
    "box-9  box-10 box-10 box-11 box-11"
    "box-12 box-12 box-12 box-15 box-15"
    "box-12 box-12 box-12 box-15 box-15"
    "box-13 box-13 box-14 box-15 box-15"
    "box-13 box-13 box-14 box-16 box-16";

  &::-webkit-scrollbar { display: none; }

  & > [data-area] {
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(45, 45, 45, 0.55);
    border-radius: 10px;
  }

  & > [data-area="box-1"]  { grid-area: box-1;  background-image: url('../media/guns.jpg'); }
  & > [data-area="box-2"]  { grid-area: box-2;  background-image: url('../media/hata.jpg'); }
  & > [data-area="box-3"]  { grid-area: box-3;  background-image: url('../media/milli.jpg');       background-position-y: center; }
  & > [data-area="box-4"]  { grid-area: box-4;  background-image: url('../media/warmth.jpg');      background-position-y: center; }
  & > [data-area="box-5"]  { grid-area: box-5;  background-image: url('../media/purplesmoke.jpg'); background-position-y: 15%; }
  & > [data-area="box-6"]  { grid-area: box-6;  background-image: url('../media/shade.jpg');       background-position: center; }
  & > [data-area="box-7"]  { grid-area: box-7;  background-image: url('../media/heartshot.jpg'); }
  & > [data-area="box-8"]  { grid-area: box-8;  background-image: url('../media/TV.jpg');          background-position-y: 40%; }
  & > [data-area="box-9"]  { grid-area: box-9;  background-image: url('../media/god.jpg');         background-position:center;}
  & > [data-area="box-10"] { grid-area: box-10; background-image: url('../media/glass.jpg'); }
  & > [data-area="box-11"] { grid-area: box-11; background-image: url('../media/drink.jpg');       background-position-y: 80%; }
  & > [data-area="box-12"] { grid-area: box-12; background-image: url('../media/melting.jpg');     background-position-y: center; }
  & > [data-area="box-13"] { grid-area: box-13; background-image: url('../media/locked.jpg');      background-position-y: 45%; }
  & > [data-area="box-14"] { grid-area: box-14; background-image: url('../media/twosuns.jpg');     background-position: center; }
  & > [data-area="box-15"] { grid-area: box-15; background-image: url('../media/ophelia.jpg');     background-position-x: 60%; }
  & > [data-area="box-16"] { grid-area: box-16; background-image: url('../media/trapped.jpg');     background-position-y: 40%; }

}


.ja-only{display:none;}

.link{
    background-color: rgb(30, 30, 30);
    border: 2px solid rgb(10, 10, 10);
    border-radius: 10px;
    display:flex;
    flex-direction: row;
    padding:1em;
    align-items:center;
}
.link-grid
    {
        padding-top:2em;
        display:grid;
        justify-content: center;
        align-items: center;
        gap:1em;
        grid-template-rows: repeat(4,1fr);
        grid-template-columns: repeat(2,40vw);
        grid-template-areas:
        "box-1 box-2"
        "box-3 box-4"
        "box-5 box-6"
        "box-7 box-8";

        img
        {
            width: 5vh;
            object-position: 100%;
            box-shadow:none;
            padding-right:1em;
        }
    }

.menuitem
{
    z-index:2;
    padding:0;
    border:none;
    background:none;
    font-family: inherit;
    font-size: max(3rem,5vw,5vh);
    color:inherit;
    text-shadow: 
    0px 0px 2px rgb(20, 20, 20),
    0px 0px 5px rgb(20, 20, 20),
    0px 0px 10px rgb(20, 20, 20),
    0px 0px 15px rgb(20, 20, 20);
    &:hover {color:rgb(80, 145, 125); cursor: pointer;}
}

.message
{
    height:max-content;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(45, 45, 45, 0.55);
    border-radius: 10px;
    padding:1em;
    font-size:3rem;
    text-shadow: 
    0px 0px 2px rgb(20, 20, 20),
    0px 0px 5px rgb(20, 20, 20),
    0px 0px 10px rgb(20, 20, 20),
    0px 0px 15px rgb(20, 20, 20);
}

.navwrapper
{
    z-index:1;
    padding-top: 5vh; padding-bottom:5vh;
    padding-left: 1em; padding-right: 1em;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap:2rem;
    box-shadow: 0 8px 10px -10px rgb(0,0,0);
}

.overlay
{
    z-index:-1;
    width:100%; height:100%;
    position: absolute;
    top:0; left:0;
    background-color: transparent;
    overflow: hidden;

    &.vignette
    {
      -o-background-size: cover;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      background-image: url(../resources/51.jpg);
      background-repeat: no-repeat;
      box-shadow: 
        0px -2px max(2vh,2vw) rgba(0, 0, 0, 0.5) inset,
        0px 2px max(2vh,2vw) rgb(0, 0, 0) inset,
        0px -2px max(5vh,5vw) rgba(0, 0, 0, 0.5) inset,
        0px 2px max(5vh,5vw) rgb(0, 0, 0) inset;
    }
}

.sample{
    width:40vw;
    padding-top:1vh;
    padding-bottom:10vh;
    object-position: center;
    object-fit: cover;
}



@media (max-width:1200px)
{   
    .avatar{max-width:35%;}
    .button{z-index:-2;}
    .image-grid{
        grid-template-rows: repeat(12, 5em);
        grid-template-columns: repeat(5, 10em);}
    
}

@media (max-width:950px)
{
    .image-grid{
        width:80vw;
        grid-template-rows: repeat(16, 45vw);
        grid-template-columns: repeat(1,80vw);
        grid-template-areas:
        "box-3"
        "box-2"
        "box-4"
        "box-5"
        "box-6"
        "box-1"
        "box-7" 
        "box-8"
        "box-9"
        "box-10"
        "box-11"
        "box-12"
        "box-13"
        "box-14"
        "box-15"
        "box-16";
    }
}

@media (max-width:800px)
{  
    .avatar{max-width:45%;}
    .card{padding-top:0.1em;}
    .link{img{padding-right:0.5em;}}
    .menuitem{font-size: 2rem;}
    .column{padding-left:0%; padding-right:0%;}
    .sample{width:70vw;}
    
    
}

@media(max-height:850px)
{.navwrapper{padding-bottom:2vh;padding-top: 2vh;}}

@media(max-width:159px)
{body > * {display:none;}}