:root {
    --deep_blue:#1F3A5F;
    --white:#FFFFFF;
    --black:#000000;
    --sand:#F1F4EC;
    --grey:#5F6B73;
    --yellow:#D9A441;
}

*{margin:0; padding:0;}

body {
    font-family: "Montserrat", serif;
}

header {overflow: hidden;}

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
}

/* Columns and rows divs */ 
.column_dark {
  float: left;
  background-color:var(--deep_blue);
  color:var(--white);
  width: 94%;
  padding-left: 3%;
  padding-right: 3%;
  padding-top: 1%;
  padding-bottom: 1%;
}

.column_light {
  float: left;
  background-color:var(--sand);
  color:var(--black);
  width: 94%;
  padding-left: 3%;
  padding-right: 3%;
  padding-top: 1%;
  padding-bottom: 1%;
}

.section{
  float: left;
  width: 100%;
  padding-bottom:1%;
}

.row_element{
  float: left;
  padding-left: 1%;
  padding-bottom:1%;
  width: 90%;
}

.publication_body_dark{
	width: 80%;
	padding-left: 1%;
	padding-right: 1%;
	float: left;
}

.publication_body_dark:before{
  content: '';
  display: inline-block;
  height: 22px;
  width: 15px;
  background-image: url('ermin_dark_cropped.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: -15px;
  margin-bottom: -5px;
}

.publication_body_light{
	width: 80%;
	padding-left: 1%;
	padding-right: 1%;
	float: left;
}

.publication_body_light:before{
  content: '';
  display: inline-block;
  height: 22px;
  width: 15px;
  background-image: url('ermin_light_cropped.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: -15px;
  margin-bottom: -5px;
}

.publication_buttons{
	width: 20%;
	padding-left: 1%;
	padding-right: 1%;
	margin-left: 82%
}

.button_light{
	background: var(--yellow);
	padding-right: 5%;
	padding-left: 5%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--white);
	font-weight: bold;
	line-height: 30px;
  transition: color .5s ease-in-out;
}

.button_light:hover{
	background: color-mix(in srgb, var(--yellow) 75%, var(--sand));
	padding-right: 5%;
	padding-left: 5%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--deep_blue);
	font-weight: bold;
	line-height: 30px;
}

.button_arxiv{
	background: var(--yellow);
	padding-right: 9%;
	padding-left: 9%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--white);
	font-weight: bold;
	line-height: 30px;
  transition: color .5s ease-in-out;
}

.button_arxiv:hover{
	background: color-mix(in srgb, var(--yellow) 75%, var(--sand));
	padding-right: 9%;
	padding-left: 9%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--deep_blue);
	font-weight: bold;
	line-height: 30px;
}

.button_hal{
	background: var(--yellow);
	padding-right: 6%;
	padding-left: 6%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--white);
	font-weight: bold;
	line-height: 30px;
  transition: color .5s ease-in-out;
}

.button_hal:hover{
	background: color-mix(in srgb, var(--yellow) 75%, var(--sand));
	padding-right: 6%;
	padding-left: 6%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--deep_blue);
	font-weight: bold;
	line-height: 30px;
}

.button_dark{
	background: var(--yellow);
	padding-right: 5%;
	padding-left: 5%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--white);
	font-weight: bold;
	line-height: 30px;
  transition: color .5s ease-in-out;
  max-width: 20px;
}

.button_dark:hover{
	background: color-mix(in srgb, var(--yellow) 75%, var(--sand));
	padding-right: 5%;
	padding-left: 5%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--deep_blue);
	font-weight: bold;
	line-height: 30px;
  max-width: 20px;
}

.button_poster{
	background: var(--yellow);
	padding-right: 4%;
	padding-left: 4%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--white);
	font-weight: bold;
	line-height: 30px;
  transition: color .5s ease-in-out;
  max-width: 20px;
}

.button_poster:hover{
	background: color-mix(in srgb, var(--yellow) 75%, var(--sand));
	padding-right: 4%;
	padding-left: 4%;
  padding-top: 3px;
  padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: var(--deep_blue);
	font-weight: bold;
	line-height: 30px;
  max-width: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Mobile modifications */

@media only screen and (max-width: 700px) {
  .column_dark {
    float: left;
    background-color:var(--deep_blue);
    color:var(--white);
    width: 100%;
  }

  .column_light {
    float: left;
    background-color:var(--sand);
    color:var(--black);
    width: 100%;
  }

  .row_element{
  float: left;
  padding-left: 5%;
  padding-bottom:1%;
  width: 90%;
  }
}