* 
{
  box-sizing: border-box;
}

body 
{
  margin: 4%;
  font-family: Arial;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows:    1fr;
  background-color: #222222;
  color: white;
}

h1
{
  text-align: center;
  font-family: 'Marcellus', serif;
}

h1 a
{
  color: white;
  text-decoration: none;
  text-align: center;
}

main
{
  grid-column:2/7;
	grid-row:1/2;	
}

aside
{
  padding: 2%;
  text-align: right;	
  width: auto;
}

nav
{
	width:100%;
	height:auto;	
  margin: 1.5% 0% 4% .5%;
  font-size: 1.35rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

nav a
{
	width: 15%;
	padding: 0% 2.5% 2% 0%;
	text-align: center;
	text-decoration: none;
  color: white;
}

nav a:hover
{
	text-decoration: none;
  color: rgb(144, 165, 235);
}


.logo img
{
  width: 4.5%;
  float: right;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding:.5%
}

/* Style the images inside the grid */
.column img {
  opacity: 1; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 0px;
}

nav div a
{
  font: tahoma;
  color: #373ad4;
}

nav div  a:hover
{
  color: white;
}
  

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.aboutme
{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:    1fr;
  height: 50vh;
}

.aboutmeImg
{	
  width: 100%;
  background-image: url("images/jules.jpg");
  background-size: cover;
  background-position: center;
  grid-column:1/2;
  grid-row:1/2;
}

.aboutmeTxt
{
  
  grid-column:2/4;
  grid-row:1/2;
  padding: 0% 5% 5% 5%;
  font-family: 'Montserrat', sans-serif;
}

.desc
{
  text-align: center;
  font-size: 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-decoration: none;
  color: white;
  padding: 2.5%;
}

.desc a
{
  text-decoration: none;
  color: white;
}

.desc a:visited
{
  text-decoration: none;
  color: white;
}


footer
{
  width: 100%;
  padding: 5%;
  margin-top: 5%;
  text-align: center;
}

footer img
{
  width: 5%;
  padding: .5%;
}

@media (max-width: 1280px)
{
  body
  {
    grid-template-columns: 1fr;
    grid-template-rows:    1fr;
  }
	main
	{	
		grid-column:1/2;
		grid-row:1/2;	
	}
  nav a
  {
    padding: 0% 2.5% 2% 2.5%;
  }
  
  .logo img
  {
    padding-right: 2.5%;
    width: 7.5%;
  }

  .column {
    float: left;
    width: 50%;
    padding:.5%
  }

  .aboutme
  {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:    1fr;
    height: 40vh;
  }
  
}
@media (max-width: 768px)
{ 
  .column 
  {
    float: left;
    width: 50%;
    padding:.5%
  }

  .logo img
  {
    padding-right: 2.5%;
    width: 12%;
  }

  .aboutme
  {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:    1fr;
    height: 30vh;
  }

  footer
  {
    margin-top: 30%;
  }

  footer img
  {
    width: 10%;
    padding: .5%;
  }

}