* {
    box-sizing:border-box;
    padding:0;
    margin:0;
}

/* Editorial New Fonts */

@font-face{
	font-family:'PP-Editorial-New';
	src: url('Fonts/PPEditorialNew-Regular.otf') format('opentype');
	font-weight:normal;
	font-style:normal;
}

@font-face{
	font-family:'PP-Editorial-New';
	src: url('Fonts/PPEditorialNew-Italic.otf') format('opentype');
	font-weight:normal;
	font-style:italic;
}

@font-face{
	font-family:'PP-Editorial-New';
	src: url('Fonts/PPEditorialNew-Ultrabold.otf') format('opentype');
	font-weight:bold;
	font-style:normal;
}

@font-face{
	font-family:'PP-Editorial-New';
	src: url('Fonts/PPEditorialNew-UltraboldItalic.otf') format('opentype');
	font-weight:bold;
	font-style:italic;
}

@font-face{
	font-family:'PP-Editorial-New';
	src: url('Fonts/PPEditorialNew-Ultralight.otf') format('opentype');
	font-weight:300;
	font-style:normal;
}

@font-face{
	font-family:'PP-Editorial-New';
	src: url('Fonts/PPEditorialNew-UltralightItalic.otf') format('opentype');
	font-weight:300;
	font-style:italic;
}

/* Suisse Fonts */

@font-face{
	font-family:'Suisse';
	src: url('Fonts/SuisseIntl-Bold.otf') format('opentype');
	font-weight:bold;
	font-style:normal;
}

@font-face{
	font-family:'Suisse';
	src: url('Fonts/SuisseIntl-Light.otf') format('opentype');
	font-weight:lighter;
	font-style:normal;
}


body{
	background:rgb(255, 248, 221);
	font-family:'Suisse', Helvetica, Arial, sans-serif;
    color:rgb(233, 45, 45);
    font-weight:normal;
	font-style: normal;
	font-size:18px;
	text-transform: uppercase;
}

  a:link,
  a:visited {
    color:black;
  }

  a:hover {
    text-decoration:none;
    color:rgb(233, 45, 45);
  }

  a strong{
  	font-weight:bold;
  }

  h1, h2 { 
	font-family:'PP-Editorial-New', Times, serif;
	font-size:4rem;
	line-height:4rem;
  }

  h1{
  	font-weight: normal;
	font-style: italic;   
  }

  h2 { 
  	font-weight:300;
  	font-style:normal;
  }

  .top-left {
    position:fixed;
    top:0.25em;
    left:0.25em;
  }

  .bottom-right {
    position:fixed;
    bottom:0.25em;
    right:0.25em;
  }

  .top-right {
    position:fixed;
    top:0.25em;
    right:0.25em;
  }

  .bottom-left {
    position:fixed;
    bottom:0.25em;
    left:0.25em;
  }

  #main {
    display:inline-grid;
    grid-template-columns:1fr 3fr;
    position:absolute;
    top:12%;
    left:0.5rem;
    width:100%;
    max-width:1000px;
    padding:0.5rem;
  }

  a button{
  	grid-column: 1 / 2;
  	grid-row: 1 / 2;
  	font-family:'PP-Editorial-New';
  	text-decoration: none;
  	color:rgb(255, 248, 221) !important;
  	max-height:35px;
  	padding:10px;
  	width:auto;
  	margin-right:50px;
  	color:rgb(255, 248, 221) !important;
  	background:rgb(233, 45, 45);
  	border:1px solid black;
  	border-radius:4px;
  }

  a button:hover{
  	color:rgb(233, 45, 45) !important;
  	background:rgb(255, 248, 221);
  	border:1px solid rgb(233, 45, 45);
  	cursor:pointer;
  }

  ol {
  	grid-column: 2 / 2;
  	grid-row: 1 / span 2;
    list-style-type: none;
    line-height:1.5em;
  }

  li {
    transition:text-indent 0.2s;
  }

  li:hover {
    text-indent: 2em;
  }


  @media (max-width:900px) {

    body {
        font-size:16px;
    }

	.top-left, .bottom-right, .top-right, .bottom-left {
   	 	position:static;
   	 	display:inline;
	}

	h1, h2 {
    	padding:0.5rem;
	}

	#main {
    	position:static;
    	transform:translate(0,0);
    	display:block;
    	margin:auto;
	}

	a button {
		margin-bottom:25px;
		margin-right:0px;
	}

	li {
  		margin-bottom:0.25rem;
	}

  }