/* this file contains the layout rules (size, margin, styles) 
   Colors are defined in color_web & color_print */

/* -----------------------------------------------------------------------------
   Rules on elements
------------------------------------------------------------------------------*/

h1 { font-size: 2rem }
h2 { font-size: 1.8rem }
h3 { font-size: 1.6rem }
h4 { font-size: 1.4rem }

/* -- buttons -- */
.btn {
  
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 25px;
  
}


/* -- icons -- */
.icon {
  
  font-size: 36px;
  
}



/* -----------------------------------------------------------------------------
   Custom classes
------------------------------------------------------------------------------*/

/* -- subtitle -- */
.subtitle {
  
  font-style: italic; 
  
}


/* -- to create tags -- */
.tag {
  
  border-radius: 25px;
  width: fit-content;
  display: inline-block;
  
}


/* -- footer -- */
.footer {
  
  font-size:9pt;
  margin-top:20px;  
  
}

.dimmed {
  
  opacity: 0.35;
  
}


/* -----------------------------------------------------------------------------
   Custom classes (YouTube preview)
------------------------------------------------------------------------------*/

/* Container needed to position the button. Adjust the width as needed */
.k-preview {
  position: relative;
}

/* Style the button and place it in the middle of the container/image */
.k-preview .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}


/* -----------------------------------------------------------------------------
   Custom classes (padding)
------------------------------------------------------------------------------*/

/* -- to add space between topics -- */
.section {
  
  margin-top: 7vh;
  margin-bottom: 5vh;
  
}


/* -- to tune modal window & content -- */
.modal-dialog {
  
  max-width: 90vw;
  margin: 10vh auto 10vh auto;
  
}

.modal-content {
  
  padding: 5vw;
  
}



/* -----------------------------------------------------------------------------
   Custom classes (iframe)
   This is to make the blog post fit in the app
------------------------------------------------------------------------------*/

.blog {
  
  width: 100%;
  height: 85vh;
  
}