:root {

    --body-bg-image: url(lua.svg);
    --play-state: running; /*controls bg scrolling animation*/
    /*Background*/--clrBG: #749BC2;
    /*Base*/--clrB: linear-gradient(180deg,rgba(145, 200, 228, 1) 0%, rgba(116, 155, 194, 1) 100%);
    /*Paper*/--clrP: #FFFBDE;
    /*Accent*/--clrA: #749BC2;
    /*BoxBorder*/--clrBX: #FFFBDE;
    /*Shadow*/--clrS: #1e3e53;
    /*Text*/--clrT: #1e3e53;
    /*Link*/--clrL: rgba(116, 155, 194, 1);
   /*Highlight*/ --clrH: linear-gradient(180deg,rgba(255, 251, 222, 1) 0%, rgba(209, 219, 213, 1) 44%, rgba(116, 155, 194, 1) 100%) padding-box;
}



/*fonts*/
@font-face {
    font-family: "Bahnschrift";
    src: url("/fonts/Bahnschrift.TTF");
}
@font-face {
    font-family: "SevenSegment";
    src: url("/fonts/SevenSegment.ttf");
}
body, html { /*blur effect*/
        filter: blur(0.54px);
}



/*global edits-------------------------------------------*/
p {
  font-family: 'Bahnschrift';
}
a {
  font-family: 'Bahnschrift';
  text-decoration: none;
  color: var(--clrP);
  line-height: 0.8em;
}
a:hover {

  color: var(--clrT);

}
button {

  border-radius: 180px;

  background: var(--clrP);

  line-height: 2em;

  width: 3em;

  font-family: 'Bahnschrift';
  font-size: larger;
  color: var(--clrT);
  font-weight: bold;
  text-shadow: 1px 1px 1px var(--clrS);

  box-shadow: 1px 1px 2px var(--clrS);

  transition: all 0.2s ease-out;

}
button:hover {

  background: var(--clrL);
  


  color: var(--clrP);

}
/*-------------------------------------------------------*/



/*scrolling BG-------------------------------------------*/
/*scrolling bg animation viewport setup*/
body, html {

    margin: 0;
    padding: 0;
    height: 100%;

    overflow:hidden;

    background-color: var(--clrP);

}
/*scrolling background element*/
.scrollingBG {
  
  position: relative;
  height: 100vh;

  background: var(--clrBG);
  
  overflow: hidden;   

  transition: all 0.3s ease-in;

  z-index: -1;

}
.scrollingBG::before {

  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--body-bg-image);
  background-size: 50px 50px;
  background-repeat: repeat;
  filter: blur(0.2px); 
  opacity: 0.4;
  pointer-events: none;
  animation: scroll 127s linear infinite;
  animation-play-state: var(--play-state);

}
/*-------------------------------------------------------*/



/*-------------------------------------------------------*/
/*containers*/

/*default container*/
.container {

  margin: 3.3em;
  padding: 3.3em;

  height: fit-content;
  width: fit-content;

  background: var(--clrB) padding-box;

  border: double var(--clrBG);
  border-radius: 35px;

}
/*solid border*/
.sldBrdr {

  margin: 0.3em;
  padding: 1em;

  border: solid 1px var(--clrBX);
  border-radius: 25px;

  box-shadow: 1px 1px px var(--clrBX), -1px -1px 2px var(--clrBX);

}
/*hovering effect*/
.hoverWrap {

  margin: 0em auto;
  padding: 0em;



}

/*root container*/
#rootContainer {

    background: var(--clrBG);
    display: flex;
    justify-content: center;
    overflow: scroll;
    
    min-width: 110em;

    height: 100vh;
    position: 0 0;

    border: double 8px var(--clrP);
    border-radius: 60px;
    border-bottom: solid 8px var(--clrB);

}
#rootcontainer h1 {

  font-weight: bold;

}
#titleContainer {

  padding-top: 0.3em;
  margin: 4.3em;

  text-align: center;
  color: var(--clrP);

  transition: all 0.2s ease-out;

}
#titleContainer:hover {

  margin: 4.3em;
  padding: 3em;

}
/*display fengari status*/
#statusContainer {

  margin: 1em auto;
  margin-top: 3.3em;
  padding: 0.2em;

  background: none;
  border: solid 1px var(--clrP);
  box-shadow: 0px 1px 1px var(--clrP);

  font-family: 'BahnSchrift';
  font-size: 0.8em;
  font-weight: lighter;

}
#statusContainer:hover {

  background: var(--clrP);

}
#calcContainer {

  transition: background-color 0.2s ease;

}
#calcContainer:has(.calculator:hover) {

  background-color: var(--clrH);

}

/*-------------------------------------------------------*/



/*---lua svg---------------------------------------------*/
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
svg {
	width: 15rem;
	height: auto;
	display: block;
	color: hsl(240, 95%, 26%);
}
svg {
	--duration: 3s;
}
#dashoffset {
	animation: dashoffset 3s steps(30);
	animation: dashoffset var(--duration) steps(30);
}
.rotate {
	animation: rotate 3s steps(30);
	animation: rotate var(--duration) steps(30);
}
.opacity {
	animation: opacity 0s 3s step-end both;
	animation: opacity 0s var(--duration) step-end both;
}
@keyframes rotate {
	100% {
		transform: rotate(-1turn);
	}
}
@keyframes dashoffset {
	0% {
		stroke-dashoffset: 0;
	}
}
@keyframes opacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*-------------------------------------------------------*/



/*calculator-------------------------------------------------*/
/* Change container background only if calculator is hovered */
.calculator {

    background: var(--clrA);
    margin: 1.3em;
    padding: 0.9em;

    border:  double 6px var(--clrBX);
    border-radius: 25px;

    transition: all 0.2s ease-out;
    
}
.calculator:hover {

  background: var(--clrB) padding-box;

  padding: 0.3em;
  margin: 2.3em;

  border:  double 7px var(--clrS);
  border-radius: 30px;

  box-shadow: 1px 1px 2px var(--clrS), -1px -1px 2px var(--clrS);

}
#calcDisplay {
    width: 9em;
    height: 2em;
    
    margin-top: 0.6em;
    margin-bottom: 0.2em;

    background-color: var(--clrS);

    font-size: 2em;
    font-family: 'SevenSegment';
    letter-spacing: 0.2em;
    
    text-align: right;
    color: var(--clrBX);
    text-shadow: 1px 1px 2px var(--clrBX);

    border-radius: 5px;
}
.calcButtons {
    margin: 10px auto;
    padding: 1.8em;
    
    display: grid;
    grid-template-columns: repeat(4, 2em);
    gap: 30px;
}
#calcLbl {
  width: fit-content;
  height: 2.6em;

  padding-left: 10em;
  display: flex;

  margin-top: 1.3em;


  color: var(--clrP);
}
#calcLbl p {
  margin-top: 1.1em;
}
#calcLogo {
  width: 1.6em;
  margin-left: 0.6em;
  margin-top: 0.5em;
}
/*-------------------------------------------------------*/