@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins/Poppins-Light.ttf") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Poppins Light Italic */
@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins/Poppins-LightItalic.ttf") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Poppins SemiBold */
@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins/Poppins-SemiBold.ttf") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.poppins-light {
  font-family: 
    "Poppins",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-semibold {
  font-family: 
    "Poppins",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-light-italic {
  font-family: "
    "Poppins",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  font-weight: 300;
  font-style: italic;
}

body{
	margin:0;
	padding:0;
	display:flex;
	align-content: center;
	justify-content: center;
	height:100vh;
	font-size:16px;
	background-color: #34353a;
  color: #DDE6ED;
}
.header{
  grid-area: header;
  display:flex;
  justify-content: flex-start;
  flex-direction: column;
}

.header > .toplinks{
  display: flex;
  justify-content: end;
  align-items: center;
  margin-bottom: 1rem;
}

.main{
  grid-area: main;
  display:flex;
  flex-direction:column;
}

.links{
  grid-area: links;
  padding: 1rem;
}

.links > .header a{
  visibility: hidden;
}

.wrapper {
  display: grid;
  gap: 20px;
  grid-template-areas:
    "header"
    "main"
    "links";
}

main{
	/*display:inline-grid;
	grid-template-columns: 1fr 2fr 1fr;*/
	margin:auto;  
  width: 90%;
  max-width: 1500px;
}

main>section{
	flex: 1 1 100px;
	display:inline-grid;
	grid-template-rows: 5rem auto 5rem;
	padding:1rem;
}

a{
  color: #DDE6ED;
}

.titulo{
	grid-col-start: 2;
	grid-col-end: 4;
	margin-bottom: 0;
	margin-top: 0;
}

.subtitulo{
	margin: 0 auto;
}

.alumni, .jobtitle{
  border-bottom: 1px solid white;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}
.contenido{
	margin-top:1rem;
}

.laimagen{
	grid-row-start:1;
	grid-row-end:4;
	border-radius: .5rem;
	width:100%;
	border-radius:1rem;
}

content{
	display:flex;
	flex-direction: column;
}
footer{
	position:relative;
	bottom:0;
}

.toolbar{
	margin:1rem 0;
}

.toolbar-action{
    background-color: white;
    transition: background-color 0.3s;
	padding: 0.5rem 0.7rem;
    color: black;
    text-decoration: none;
    border-radius: 0.5rem;
    border: 1px solid lightgray;
    margin-right: 0.3rem;
    text-align: center;
}

.toolbar-action:hover{
    background-color: lightgray;
	padding: 0.5rem 0.7rem;
    color: black;
    text-decoration: none;
    border-radius: 0.5rem;
    border: 1px solid lightgray;
    margin-right: 0.3rem;
    text-align: center;
}

.toolbar-action > svg{
	position: relative;
    left: 2px;
    top: -2px;
}

@media (min-width: 900px) {
  .wrapper {
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
      "header links"
      "header main";
  }

  .links > .header{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }

  .links > .header a {
    visibility: visible;
  }


  .header > .toplinks{
    display: none;
  }

}

@media (min-width: 600px) {

  .links > .linklist {
    column-count: 2;
  }
}