body {
	background: url("bg-alex-machado.webp") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	font-family: "Century Gothic", sans-serif;	
}

main {	
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
}

.container  {
  max-width: 760px;
}

.container {
  display: block;
  border-radius: 8pX;
  background-color: #fff;
  border: solid 2px #fff;
  box-shadow:
    inset 60px 0 120px #f0f,  /* left magenta */
    inset -60px 0 120px #0ff; /* right cyan */
 }
  
  .container div {
   margin: 1.25em;
  } 
  
  
  ul li {
    background-color: transparent;
    border: 1px solid white; 
}

h2 {
	padding:0;
	margin:0;
}

.contact, .lnkdin, .art, ul li { 
	background-color: #ffffffC0;
	border-radius: 8px;
	padding: 0.5em;
	padding-top: 1em;
  justify-items: center;
	align-items: center;

}

.contact, .lnkdin, .art {
 box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

img.teaser {
	display: table-cell;   
}

a { border: 3px solid transparent }

a span {
  display: block;
  font-weight: bold;    
}

a { display: block; }

a:hover {
  border: 3px solid;
  background-color: #8c8c8c33;
  text-decoration: none;  
}

ul {
    list-style: none;
    padding: 0 1.25em;
}
ul li {
   margin-bottom: 0.75em;
    border: 1px solid #999;
    padding: 0;
  
}

ul li a {
  
  display: block;
  padding: 0.9em;  
}


@media screen and (min-width: 1400px) {

  .container {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 32px 39px;
    grid-auto-flow: row;
     
    grid-template-areas:
      "logo logo logo"
      "contact lnkdin art";
    justify-items: center;
    align-items: center;
    box-shadow: unset;
    background-color: transparent;
    border: unset;
    max-width: 95%;
  
  }
  
   .container div {
   margin:unset;
  } 
  
  .contact, .lnkdin, .art, ul li { 
   padding: 1.25em;
  }

  .logo { 
    grid-area: logo;
    -webkit-filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 1));
    filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 1));  
  }
  
  .contact { grid-area: contact; }
  .contact a { 
    padding: 0.5em;
    font-size: 150%; 
  }
  

  .lnkdin { grid-area: lnkdin; }

  .art { grid-area: art; }
}