body{background-color: olivedrab;}
h1{color:cornsilk;
font-family:Helvetica;}
.circle-image {
    width: 350px; 
    height: 350px; 
    overflow: hidden; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
  border: 4px solid cornsilk
}

.circle-image img {
    width: 150%; 
    height: auto; 
}

.kwadrat
{ 
  width: 232px; 
  height: 180px; 
  border-bottom: 3px solid cornsilk; 
  overflow: hidden; 
}
.trojkat
{ 
  position: relative; 
  overflow: hidden; 
  transform: rotate(45deg) skew(10deg,10deg); 
  border-left: 3px solid cornsilk; 
  border-top: 3px solid cornsilk;

  width: 200px;
  height: 200px;
  margin:81px 0 0 16px;
}

.trojkat_bg
{
	position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(https://cdn.pixabay.com/photo/2019/03/29/03/54/flower-4088502_960_720.jpg);
  background-size: 100%;
  background-position: center top;
  transform: skew(-10deg,-10deg) rotate(-45deg) ;
  transition: .3s;
}

.trojkat_bg:hover{ background-size: 90%; }
		
.kwadrat2
{ 
  width: 232px; 
  height: 170px; 
  border-top: 3px solid cornsilk; 
  overflow: hidden; 
  margin-top: 5px; 
}

.trojkat2
{
	position: relative;
  overflow: hidden;
  transform: rotate(45deg) skew(10deg,10deg);
  border-bottom: 3px solid cornsilk;
  border-right: 3px solid cornsilk;
  width: 200px;
  height: 200px;
  margin:-100px 0 0 16px;
}
.trojkat_bg2
{
	position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(https://farm3.staticflickr.com/2585/4052236723_971daed911_z.jpg?zz=1);
  background-size: 100%;
  background-position: center top;
  transform: skew(-10deg,-10deg) rotate(-45deg) ;
  transition: .3s;
}

.trojkat_bg2:hover{ background-size: 90%; }


.heart {
  --c: cornsilk;
  width: 200px;
  aspect-ratio: 1;
  background:
   radial-gradient(at 70% 31%,var(--c) 29%,#0000 30%),
   radial-gradient(at 30% 31%,var(--c) 29%,#0000 30%),
   conic-gradient(from -45deg at 50% 84%,var(--c) 90deg,#0000 0) 
    bottom/100% 50% no-repeat;
}

:root {
  --main-flower: #DB7093;
  --nose: #ffc0cb;
  --stem: #51d691;
  --pot: #FF7043;
  --pot-shadow: #d66f51;
} 
.flower {
  position: relative;
}
.flower__head {
  width: 120px;
  height: 40px;
  border-radius: 20px;
  background: var(--main-flower);
  margin-top: 50px;
}

.flower__head::after, .flower__head::before {
  content: '';
  position: absolute;
  background: var(--main-flower);
  border-radius: 20px;
  width: 120px;
  height: 40px;
  transform: rotate(60deg);
}

.flower__head::before {
  transform: rotate(-60deg);
}
.flower__nose {
  position: absolute;
  left: 04.2%;
  transform: translateX(-50%);
  top: 22%;
  width: 30px;
  height: 30px;
  z-index: 1;
  background: var(--nose);
  border-radius: 50%;
}