/* FONTS */
/* open-sans-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans-v36-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v36-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/open-sans-v36-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v36-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/open-sans-v36-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }


  /*---------------------------------------------*/
              /*General */
*{
  font-family: Open Sans;
}

body{
  margin: 0;
  background-color: rgb(60, 60, 60);
}

a{
  text-decoration: none;
}

.header a{
  color: inherit;     /*HAceque el link del header se mantenga negro*/
}

          /* Site Layout */
#site{
  display: grid;
  grid-template-columns: 1fr 3fr;
  /* background-color: rgb(85, 85, 85);
  color: rgb(238, 238, 238);
  text-align: center; */
}

.side-menu{
  background-color: rgb(50, 50, 50);
  height: 100vh;
  color:antiquewhite
}

.right-side{
  height: 100vh;
}

.header{
  height: 100px;
  
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: rgb(169, 169, 169);
}

.header h1{
  margin: 0%;
}

  /* Start Button */

#start-test-button-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  

  width: 100%;
  height: 80%;
}

#start-test-button{
  border-radius: 10px;
  width: 50%;
  height: 20%;
  font-size: 2em;  
}


/*  QUESTIONS */
.question{
  border: 1px solid rgb(53, 53, 53);
  border-radius: 7px;
  background-color: rgb(53, 53, 53);

  color: rgb(225, 225, 225);
  margin: 10px;
  padding: 5px;
  position:relative;
  right: 0px;
}

.question .area{
  background-color: rgb(118, 133, 146);
  text-align: center;
  border-radius: 4px 4px 0px 0px;

  padding: 10px;
  margin: 5px 5px 5px 5px;
}

.question .question-header{
  background-color: rgb(49, 96, 137);
  padding: 10px;
  margin: 5px;
}


/* question options */
.question .options{
  background-color: rgb(67, 87, 105);
  padding: 10px;
  margin: 5px;
  border-radius: 0px 0px 10px 10px;
}

.question .options div {
  margin-bottom: 12px; /* Adds space between each radio button set */
}

.question .options input[type="radio"] {
  display: inline-block; /* Display radio buttons in line */
  vertical-align: middle; /* Align them vertically */
  margin-right: 5px; /* Add spacing between radio button and label */
}

.question .options label {
  display: inline-block; /* Show labels in line */
  vertical-align: middle; /* Align them vertically with the radio buttons */
}

button{
  position:relative;
  right: 0px;
  
  text-align: center;
  margin: 7px 10px 10px 5px;
  padding: 7px 50px 7px 50px;

  border: none;
  border-radius: 4px;
  color: white;
  background-color:rgb(63, 107, 107);

  
}

.no-answer-warning{
  background-color: rgb(225, 83, 83);
  color: rgb(234, 234, 234);
  text-align: center;
}

/*------------------------GRAPH------------------------*/

.graph{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: flex-end;

  border: 1px solid rgb(53, 53, 53);
  border-radius: 7px;
  background-color: rgb(53, 53, 53);

  margin: 10px;
  padding: 5px;
  position:relative;
  right: 0px;
  
  width: 100%;
  height: 70vh;
}

.graph .bar{
  height: 120px;
  width: 10%;
  background-color: black;
}

/*EJEMPLOS*/
#bar-extreme-left{
  height: 180px;
  background-color: rgb(255, 4, 4);
}

#bar-left{
  height: 80px;
  background-color: rgb(231, 95, 95);
}

#bar-center{
  height: 60px;
  background-color: rgb(100, 100, 100);
}

#bar-right{
  height: 130px;
  background-color: rgb(79, 79, 255);
}

#bar-extreme-right{
  height: 30px;
  background-color: rgb(0, 42, 255);
}

/*-------------------------TREE------------------------*/
.random-tree{
  width: 500px;
  height: 500px;
}

.reply-leaf{
  position: absolute;

  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.reply-leaf.extreme-left{
  background-color: red;
}

.reply-leaf.left{
  background-color: rgb(255, 161, 161);
}

.reply-leaf.center{
  background-color: rgb(101, 101, 101);
}

.reply-leaf.right{
  background-color: rgb(117, 126, 255);
}

.reply-leaf.extreme-right{
  background-color: blue;
}
/*----------------------ANIMATIONS---------------------*/

/*Animation classes*/
.fade-out{
  opacity: 1;
  pointer-events: none;

  transition: opacity 3s ease-out;
}

.fade-out.fade-out-hidden{
  opacity: 0;
}

.slide-in{
  right: 0px;
  transform: rotate(0deg);

  transition: right 1s ease-out, transform 1s ease-out;
}

.slide-in.slide-out{
  pointer-events: none;
  right: -100%;
  /*transform: rotate(80deg);*/
}