<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

html {
    background-color: #e5e5e5;
    font-family: 'Quicksand';
    font-size: 20px;
    color: #242424;
}

.a {
    color:darkblue;
}

.a:hover {
    text-decoration: underline;
    text-emphasis: bold;
    color:antiquewhite;
}

body {
  margin: 0;
}

/* Style the header */
.header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
    text-emphasis: bold;
}


/*

.buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
.buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

.buttons li{float:left;position:relative;}/* ie needs position:relative here*/

.buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
.buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}

.content{overflow:hidden}/* hide horizontal scrollbar*/

*/




















.grid-container {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-gap: 20px;
  background-color: white;
  padding: 20px;
}

.grid-container > div {
  background-color: white;
  text-align: left;
  padding: 20px;
  font-size: 30px;
}

.leftside {
    max-height: inherit;
    text-align: center;
    /*background-image:url(image/borderleft.png)*/
}

.rightside {
    max-height: inherit;
    text-align: center;
    /*background-image:url(image/border.png)*/
}
    
/*HOMEPAGE*/
.grid-images{
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-gap: 10px;
  background-color: white;
  padding: 10px;
text-align: center;
    align-content: center;
}

.grid-images > div {
  background-color: white;
  text-align: center;
  padding: 10px;
  font-size: 20px;
}

.grid-images2{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 10px;
  background-color: white;
  padding: 10px;
text-align: center;
    position:relative;
}

.grid-images2 > div {
  background-color: white;
  text-align: center;
    align-content: center;
    margin:auto;
  padding: 10px;
  font-size: 20px;
}

.imageheight {
    padding: 20px;
}


.assignment{
    text-align: center;
}

.highlight {
    background-color: lightgrey;
    padding: 15px;
}

.list1 {
    text-align: center;
}

/*ROTATE*/
.rotateimg90 {
  -webkit-transform:rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.rotateimg180 {
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.rotateimg270 {
  -webkit-transform:rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.download {
    text-align: center;
    font-weight: bold;
}
    
////






</style>
</head>
<body>