body {
	background-image: url("images/boards.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
}

header a {
  color: black;
}

#telegram, #info {
  position: relative;
  z-index: 1;
}

#telegram:before, #info:before {
  content: " ";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .7; 
  z-index: -1;
  background-color: #e7f4ff;
  border-radius: 10px;
}

h1 {
	font-size: 24px;
	font-weight:  700;
}

.gradient{
  text-decoration: none;
  display: inline-block;
  color: black;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(300deg, rgba(0,136,204,1) 39%, rgba(250,250,250,1) 100%);
  background-size: 200% auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
  transition: .5s;
  border: none !important;
}

.gradient:hover {
	color: grey;
}

@media only screen and (min-width: 960px) {
	#telegram, #info {
		margin-top: 25vh;
	}
}
@media only screen and (min-width: 1440px) {
    /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
    /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
   #telegram {
		margin-top: 10vh;
	}
}
@media only screen and (device-width: 768px) {
   /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  #telegram, #info {
		margin-top: 25vh;
	}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}