/*
common element shares by all the screens
*/
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
/* define the reused values/use logical names for values */
:root {
  /*variables used in home css*/
  --fill-parent:100%;
  --corner-radius-desktop:10px;
  --corner-radius-mobile:10px;
  --glass-blur:5px;
  --transparent-bg:rgba(0,0,0,0);

  --panel-background-color: rgba(100, 100, 100, 0.2);/*bg color of most of the panels*/
  --input-background-color:rgba(0,0,0,0.2);
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;

  font-family:"JetBrains Mono",monospace;
  font-style:normal;
  font-optical-sizing:auto;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0);
  display: flex;
}

.background-image {
  height: var(--fill-parent);
  width: var(--fill-parent);

  background-image: url("../../assets/main_background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.root-container {
  height: var(--fill-parent);
  width: var(--fill-parent);

  background-color: rgba(0, 0, 0, 0.5);

  /* glass blur to root container(if needed)
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));*/

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow:hidden;
}

.bg-contain {
  background-color: var(--transparent-bg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}

/*for desktop*/
@media(min-width:600px){
  body{
    padding:5px;
  }

  .background-image {
    border-radius: var(--corner-radius-desktop);
  }

  .root-container {
    border-radius: var(--corner-radius-desktop);
  }
}

/*for mobile*/
@media(max-width:600px){
  body{
    padding:3px;
  }

  .background-image {
    border-radius: var(--corner-radius-mobile);
  }

  .root-container {
    border-radius: var(--corner-radius-mobile);
  }
}