body{
    background-color: white;
    max-width: 850;
    max-height: 1200;
}
h1, h2, h3 {
  border: 100px black;
  padding: 110px;
  width: 850px;
  height: 1200px;
  position:fixed;

 }
 .B1:hover, .B2:hover, .B3:hover {
  background-color: red;
}

@media screen and (max-width: 850px) {
	.frame{
        width: 100%;
        height: 850;
	}

.frame{
    max-width: 850px;
    height: 1200px;
    overflow: hidden;
    margin: 0em auto;
    background: #03a9f4;
}	
.B1 {
    width: 360px;
    height: 360px;
    background: #2f409e;
    opacity: 90%;
    position: fixed;
    top: 140px;
    left: 105px;
    transform: rotate(45deg);
}
.B2 {
    width: 360px;
    height: 360px;
    background: #2f409e;
    opacity: 90%;
    position: fixed;
    top:  405px;
    left: 370px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    transform: rotate(45deg);
}
.B3 {
    width: 360px;
    height: 360px;
    background: #2f409e;
    opacity: 90%;
    position: fixed;
    top: 670px;
    left: 635px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    transform: rotate(45deg);
}
.G1 {
    width: 250px;
    height: 250px;
    background: green;
    opacity: 70%;
    position: fixed;
    top: -200px;
    left: -25px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    transform: rotate(45deg);
}

.G2 {
    width: 250px;
    height: 250px;
    background: green;
    opacity: 70%;
    position: fixed;
    top: -15px;
    left: 160px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    transform: rotate(45deg);

}
.G3 {
    width: 250px;
    height: 250px;
    background: green;
    opacity: 70%;
    position: fixed;
    top: 170px;
    left: 345px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    transform: rotate(45deg);
}
h1 {
	transform: rotate(45deg);
	font-size: 38px;
	position: fixed;
	width: 100%;
	padding: 5px;
	top:  550px;
    left: -400px;
    font-family: ff-zwo-corr-web-pro, sans-serif;
    font-style: normal;
}
h2 {
	transform: rotate(45deg);
	font-size: 35px;
	position: fixed;
	width: 100%;
	padding: 5px;
	top:  200px;
    left: -890px;
    font-family: ff-zwo-corr-web-pro, sans-serif;
    font-style: normal;
    text-align: right;
}
h3 {
	transform: rotate(45deg);
	font-size: 08px;
	position: fixed;
	width: 100%;
	padding: 5px;
	top:  850px;
    left: -280px;
    font-family: ff-zwo-corr-web-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
}
h4{
	transform: rotate(45deg);
	font-size: 05px;
	position: fixed;
	width: 100%;
	padding: 5px;
	top:  1040px;
    left: -45px;
    font-family: ff-zwo-corr-web-pro, sans-serif;
    font-weight: 400;
    font-style: normal;

}

@media screen and (max-width: 400px) {
  }

h1 {
    transform: rotate(45deg);
    font-size: 18px;
    position: fixed;
    width: 100%;
    padding: 5px;
    top:  250px;
    left: -405px;
    font-family: ff-zwo-corr-web-pro, sans-serif;
    font-style: normal;
}
h2 {
    transform: rotate(45deg);
    font-size: 15px;
    position: fixed;
    width: 100%;
    padding: 5px;
    top:  75px;
    left: -625px;
    font-family: ff-zwo-corr-web-pro, sans-serif;
    font-style: normal;
    text-align: right;
}
h3 {
    transform: rotate(45deg);
    font-size: 04px;
    position: fixed;
    width: 100%;
    padding: 5px;
    top:  380px;
    left: -340px;
    font-family: ff-zwo-corr-web-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
}
h4{
    transform: rotate(45deg);
    font-size: 2.5px;
    position: fixed;
    width: 100%;
    padding: 5px;
    top:  570px;
    left: -10px;
    font-family: ff-zwo-corr-web-pro, sans-serif;
    font-weight: 400;
    font-style: normal;

}
.B1 {
    width: 180px;
    height: 180px;
    background: #2f409e;
    opacity: 90%;
    position: fixed;
    top: 140px;
    left: 55px;
    transform: rotate(45deg);
}
.B2 {
    width: 180px;
    height: 180px;
    background: #2f409e;
    opacity: 90%;
    position: fixed;
    top:  275px;
    left: 190px;
    transform: rotate(45deg);
}
.B3 {
    width: 180px;
    height: 180px;
    background: #2f409e;
    opacity: 90%;
    position: fixed;
    top: 410px;
    left: 325px;
    transform: rotate(45deg);
}
.G1 {
    width: 125px;
    height: 125px;
    background: green;
    opacity: 70%;
    position: fixed;
    top: -60px;
    left: 25px;
    transform: rotate(45deg);
}

.G2 {
    width: 125px;
    height: 125px;
    background: green;
    opacity: 70%;
    position: fixed;
    top: 35px;
    left: 120px;
    transform: rotate(45deg);

}
.G3 {
    width: 125px;
    height: 125px;
    background: green;
    opacity: 70%;
    position: fixed;
    top: 130px;
    left: 215px;
    transform: rotate(45deg);
}