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);
}

iframe
{width:70%; height:85%; border:none; box-shadow: 0 0 .5rem .1rem black;}


img
{
    max-width: 25%;
    object-position: 90%;
    object-fit: cover;
    box-shadow: 0 0 1rem .75rem black;
}

.avatar
{
    width:10em;
    object-position: 0%;
    object-fit: contain;
    box-shadow:none;
}

.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)} }
  
}


.content
{
    width:85%; height:fit-content;
    padding-top:3em; padding-bottom:3em; 
    padding-left:3.5em; padding-right:3.5em;
    margin-bottom:5vh;
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: 15px;
    font-size:1.25rem;
}
.card
{
    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;}   
}

.text
    {
        width:60%;
        padding:3em;
        font-size:1.25em;
        
        .avatar
        {
            width:10em;
            padding-right:0em;
        }

        .link
        {
            padding:1em;
            margin-bottom:5%;
            margin-left: -1em;
            width:100%;
            background-color: #575757ee;
            border-radius: 25px;
            display:flex;
            align-items: center;
        }

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

.media
{
    z-index:-1;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap:40%;

    a{display:contents;}
}

.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;
    }
}

.hint
{
    display:block;
    z-index:1; 
    width:100%;
    position:absolute;
    bottom: 4rem; 
    text-align: center;

   

    img
    {
        width:2vw; 
        border:none; box-shadow: none;
        opacity:50%;
    }
}

.spacer
{
    width:60%; height:2em;
}

.textbox
{
    padding-left:5%; padding-right:5%;
    display:flex;
    flex-direction: column;
    align-items: center;

}

@media (max-width:1100px)
{   
    img{max-width:50%;}
    iframe{width:80%;}
    .media{gap:15%;}
    .content{margin-bottom:0;}
    .hint{width:0; height:0; top:-100%;}
    .button{z-index:-2;}
}

@media (max-width:800px)
{  
    img{max-width:70%;}
    iframe{width:90%;}
    .card{padding-top:0.1rem; iframe{margin-top:1rem}}
    .media{gap:10%; padding-top:2rem;}
    .spacer{margin-bottom:10vh;}
    .text{width:100%;}
}

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

@media(max-height:700px)
{iframe{height:75%;} .spacer{margin-bottom:20vh;}}

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