body, h1, h2, h3, h4, p, a {
  margin: 0;
  font-size: 100%; font-weight: normal;
}
* {
 box-sizing: border-box; 
}
body {
  font-family: 'Inter', sans-serif;
}
.buttonup {
width:88px; 
height:118px;
position:fixed;
bottom:20px;
right:50px;
}
.header {
  height: auto;
  background-color: #eee;
  background-image: url(images/fonheader.jpeg);
  background-size: cover;
  background-position: center;
  text-align: center;
  
}
.header1 {
  height: auto;
  background-color: #eee;
  background-image: url(images/im5.jpg);
  background-size: cover;
  background-position: center;
  text-align: center;
  
}

.header-title {
  font-size: 100px;
  color: white;
  text-transform: uppercase;
  font-weight: 500;
  margin: auto;
}



#navbar {
  margin: auto;
  padding: 0;
  list-style-type: none;
  width: 850px;
  text-align: center;
  font-size: 20px;
  
}
#navbar a {
  color: #fff;
  padding: 35px 1px;
  margin-left: 30px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  width: 135px;
  
  
}
#navbar li { display: inline; }

#navbar a:hover {
  border-radius: 10px 5px;
  background-color: hsla(120,50%,100%,0.4);
  text-decoration: underline;
}
/*.photos {
	display: inline;
	margin-left: 40px;
	background-position: left;
	opacity: 0.9;
	
}*/

.div1.im2{
	margin-left: 440px;
}
.im1 {opacity: 0.8; box-shadow: 2px 1px 3px #fff;}
.im1:hover{opacity: 1.0; }
.im2 {opacity: 0.8; box-shadow: 2px 1px 3px #fff;}
.im2:hover{opacity: 1.0; }
.im3 {opacity: 0.8; box-shadow: 2px 1px 3px #fff;}
.im3:hover{opacity: 1.0; }
.content {
  font-size: 0;
  width: 790px;
  margin: 100px auto 50px;
}
.card{
  width: 350px;
  margin-bottom: 60px;
  padding: 45px 45px 70px 45px;
  display: inline-block;
  margin-right: 90px;
  box-shadow: 4px 4px 5px rgba(250, 50, 50, .4);
}
.no-right-margin {
    margin-right: 0;
}
.card-title{
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 10px;
}
.card-text {
  font-size: 16px;
 
}
.card-image{
  width: 100%;
  margin-bottom: 25px;
}
.footer{
  background-color: #000;
  height: 70px;
  display: flex;
}
.footer-author{
  font-size: 24px;
  color: #fff;
  margin: auto;
}
.left-col, /* левая колонка */
.right-col/* правая колонка */
{
    width: 40%;    /* ширина */
    min-width: 200px;  /* минимальная ширина сужения */
    height: auto;  /* высота */
    box-sizing: border-box;
    float: left; /* плавающие блоки */
}
.left-col{
    padding-right: 6px; /* отступ справа */
	padding-top: 30px;
	margin-left: 30px;
	padding-bottom: 30px;
}
.right-col{
    padding-left: 30px; /* отступ слева */
	padding-top: 30px;
	padding-bottom: 30px;
}<br>/*Cтили для маленьких мониторов*/
@media (max-width: 500px){
.left-col, /* левая колонка */
.right-col/* правая колонка */
    {
        width: 100%;    /* ширина */
    }
    .right-col{
        padding-left: 0px; /* отступ слева */
    }
}
/* clearfix сбрасывает float*/
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
  padding: 1.5em;
}
.grid div {
  background-color: antiquewhite;
}