/* global variables */
:root{
  --sans-font: Helvetica, sans-serif;

  --grad-top: #6eb6ff;
  --grad-center: #a6c5ff;
  --grad-bottom: #b2a3ff;
  --bg: #fff;
  --accent-bg: #cce5ff;
  --text: #212121;
  --accent: #0059b2;
  
}


/* reset box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* reset default appearance */
textarea, select, input, progress {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

html {
  /* set the font globally */
  font-family: var(--sans-font);
  scroll-behavior: smooth;
  min-height: 100%; 
}


/* set body properties */
body {
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /*  background: #b2a3ff;*/
  /* create background gradient */
  background: linear-gradient(350deg,
    var(--grad-bottom) 25%, var(--grad-center) 65%, var(--grad-top) 85%);
  padding-top: 0rem;
  padding-bottom: 5rem;
  font-size: 1.25rem;
  line-height: 2rem;
}


/* main central div for the content of the webpage */
.main-div {
  color: var(--text);
  min-width: 480px;
  width: 100%; /* necessary for centering the div in firefox */
  max-width: 1000px;
  margin: 0 auto; /* center the div horizontally */
  background-color: var(--bg);
  padding: 10px 80px 40px 80px; /* top right bottom left */
  box-shadow:
    5px 5px 10px rgba(0, 0, 0, 0.2),
   -5px 5px 10px rgba(0, 0, 0, 0.2);
}


/* justify paragraphs and add hyphens */
p {
  text-align: justify;
  -webkit-hyphens: auto; /* For older WebKit browsers (Chrome, Safari) */
  -moz-hyphens: auto;    /* For older Firefox */
  -ms-hyphens: auto;     /* For older Internet Explorer/Edge */
  hyphens: auto;         /* Standard property */
}



/* format links & buttons */
a {
  color: var(--accent);
  text-decoration: none;
}


/* format headers */
h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem;
}



/* format main title */
.main-title {
  text-align:center;
  margin-top:2.5rem;
  margin-bottom:0rem;
}

/* format main subtitle */
.main-subtitle {
  text-align:center;
  margin-top:1rem;
  margin-bottom:0rem;
}

/* format sections */
.section {
  margin-top:4rem;
  margin-bottom:0rem;
}




/* format tables */
table {
  background-color: var(--accent-bg);
  border-collapse: collapse;
}

td {
  border: 4px solid var(--bg);
  padding: 0.75rem;
  text-align: center;
  vertical-align: middle;
}



/* prevent subscripts and supscripts from affecting line-height */
sup, sub {
  vertical-align: baseline;
  position: relative;
}

sup {
  top: -0.4em;
}

sub { 
  top: 0.3em; 
}



/* responsiveness */
@media only screen and (max-width: 800px) {
  .main-div {
    padding: 10px 60px 60px 40px; /* top right bottom left */
  }
}

@media only screen and (min-width: 720px) {
  tr.narrow-screen {
    display: none;
  }
}

@media only screen and (max-width: 720px) {
  td.wide-screen {
    display: none;
  }
  tr.narrow-screen {
    line-height:0.75rem;
  }
  .main-div {
    max-width: 100%;
    padding: 10px 40px 40px 40px; /* top right bottom left */
  }
}

@media only screen and (max-width: 550px) {
  .main-div {
    max-width: 100%;
    padding: 10px 10px 40px 10px; /* top right bottom left */
  }
}


/* tabla horarios */
table.table-horarios {
  max-width:680px;
  margin: 2rem auto 5rem auto; /* top right bottom left */
}


/* tabla para links a las prácticas */
td.prbullet {
  background-color: var(--bg);
  text-align:right;
  border: 0px solid black;
  padding: 1rem 0rem 1rem 1rem; /* top right bottom left */
  line-height: 0.5rem;
}

td.prtitle {
  background-color: var(--bg);
  text-align:left;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0px solid black;
  line-height: 1.5rem;
}


/* lista sin bullets para bibliografía y parciales*/
ul.no-bullets {
  list-style: none; /*no bullets*/
  line-height: 2.25rem;
  padding: 0;
  margin-top: -0.5rem;
}

li.no-bullets {
  margin-bottom: .5rem;
  margin-left: 1rem;
}