/* Import af Eksterne kilder */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
/* Nulstil sideegenskaber */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* GLOBALE variabler */
:root {
  --clr-body-background: #dcdcdc;
  --clr-body-color: #000;
  
  --clr-header-background: #393939;
  --clr-header-color: #f5f5f5;
  --clr-header-hover: rgba(255, 255, 255, 0.1);
  --clr-header-page-nav-menu-background: rgba(57, 57, 57, .95);
  
  /* --clr-sidebar-background:whitesmoke; */
  --clr-sidebar-background:#eeeeee;
  --clr-sidebar-color: #000;
  --clr-sidebar-hover: rgba(0, 0, 0, 0.1);
  
  --clr-page-card-color:var(--clr-header-background);
  --clr-page-card-background:var(--clr-header-color);

  --clr-gradient-dark: linear-gradient(145deg, rgba(0,0,0,0),rgba(0,0,0,0.15));
  --clr-gradient-light: linear-gradient(145deg, rgba(255,255,255,0),rgba(255,255,255,0.25));

  --ff-body-font-family: 'Roboto', Arial;
  --ff-header-font-family: 'Orbitron', Arial;
  --ff-sidebar-font-family: 'Orbitron', Arial;

  --ff-page-card-header-font-family: 'Roboto', Arial;
  --ff-page-card-font-family: 'Roboto', Arial;

  --sz-header-height:4.7rem;
  --sz-sidebar-width:5.5rem;
  --sz-sidebar-button-height: 4.7rem;
  --sz-content-left: calc(var(--sz-sidebar-width) + 0.5rem);

  --txt-title: "Bylaug";
  --txt-subtitle: "";

  --page-size-small: 450px;
}

@media (prefers-color-scheme: dark){
/*Tema i DARK MODE*/
  :root{
    --clr-body-background: rgb(40, 40, 40);
    --clr-body-color: rgb(180, 180, 180);
    
    --clr-header-background: rgb(57, 57, 57);
    --clr-header-color: whitesmoke;
    --clr-header-hover: rgba(255, 255, 255, 0.1);
    --clr-header-page-nav-menu-background: rgba(57, 57, 57, .95);
    
    --clr-sidebar-background: var(--clr-header-background);
    --clr-sidebar-color: whitesmoke;
    --clr-sidebar-hover: rgba(255, 255, 255, 0.1);
    
    --clr-page-card-color:var(--clr-header-background);
    --clr-page-card-background:var(--clr-header-color);
  }
}

html{
  font-family: var(--ff-body-font-family);
  color: var(-clr--body-color);
}
body {
  /* This style below will be inherited */
  margin: 0;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  background-color: var(--clr-body-background);
  /*background-image: var(--clr-gradient-light);*/
}

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

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

p {
  margin-top: 0;
  margin-bottom: 0;
}

.main-content-display-frame {
  position:absolute;
  width: calc(100% - var(--sz-sidebar-width) - 1.0rem);
  height: calc(100% - var(--sz-header-height));
  top: calc(var(--sz-header-height) + 0.5rem);
  left: var(--sz-content-left);
  border: none;
}

@media screen and (max-width: 500px) {
/* Nedenstående sker hvis skærmen er lille */
  :root{
    --sz-content-left: 0.5rem;
  }
  .main-content-display-frame {
    width: calc(100% - 1.0rem);
  }
}
@media screen and (max-height: 460px) {
  /* Nedenstående sker hvis skærmen er lille */
    :root{
      --sz-content-left: 0.5rem;
    }
    .main-content-display-frame {
      width: calc(100% - 1.0rem);
    }
  }