/*
#e686ac - pink
#f5bf4c - yellow
#6eb059 - green
#8ec9c2 - blue
*/

body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.leftBox {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 5%;
    align-items: flex-start;
}
  
.leftBox > :first-child {
    flex-basis: 60%; 
    flex-grow: 1;
}
  
.leftBox > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    min-width: 30%;
}

.rightBox {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 5%;
    align-items: flex-start;
}
  
.rightBox > :last-child {
    flex-basis: 60%; 
    flex-grow: 1;
}
  
.rightBox > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    min-width: 30%;
}

.leftTextInfo {
    text-align: right;
}

.textInfo {
    background-color: #8ec9c2;
    color: #efefef;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.4em;
    text-transform: uppercase;
    padding: 1em;
    box-shadow: #f5bf4c 10px 10px 0px;
    margin-bottom: 1em;
}

h1 {
    width: 90%;
    margin-top: 5%;
    padding-top: 10%;
    padding-bottom: 0%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    color: #f5bf4c;
    font-size: 5em;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: sans-serif;
    text-transform: uppercase;
    mix-blend-mode: normal;
}

h2 {
    padding-left: 5%;
    padding-bottom: 5%;
    margin: 0;
    font-size: 24px;
    line-height: 1.8em;
    color:#efefef;
    text-transform: uppercase;
}

h3 {
    padding-bottom: 2%;
    color:#efefef;
    font-size: 22px;
    text-transform: uppercase;
}

h4 {
    padding-bottom: 5%;
    padding-left: 5%;
    padding-right: 5%;
    margin: 0;
    text-transform: uppercase;
    font-size: 18px;
    color: #f5bf4c;
}

h4 a, a:visited {
    text-decoration: none;
    font-weight: bold;
    color: #8ec9c2;
}

.rightMenuHeading {
    text-align: right;
    padding-right: 0%;
}

.rightHeader {
    padding-left: 0%;
}


.leftHeader {
    padding-right: 0%;
}

.svgBox {
    min-height: 20%;
}

.blob {
    position: absolute;
    width: 50vmax;
    z-index: -0.8;
    transform-origin: center;
}

.blob1 {
    animation: blob1 10s ease-in-out infinite;
    mix-blend-mode: multiply;
}

.blob2 {
    animation: blob2 14s ease-in-out infinite;
    mix-blend-mode: multiply;
}

.blob3 {
    animation: blob3 13s ease-in-out infinite;
    mix-blend-mode: multiply;
}

.test1 {
    animation: bloboscillate 16s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.rotateBlob {
    animation: blobrotate 11s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.rotateBlob2 {
    animation: blobrotate2 13s ease-in-out infinite;
}

.rotateBlob3 {
    animation: blobrotate3 7s ease infinite;
}

.squareBlob1 {
    animation: squareBlob1 12s ease-in-out infinite;
}

.squareBlob2 {
    animation: squareBlob2 12s ease-in-out infinite;
}

.squareBlob3 {
    animation: squareBlob3 12s cubic-bezier(0.124, 0.89, 0.6, 0.7) infinite;
}

.squareBlob4 {
    animation: squareBlob4 12s ease infinite;
}

@keyframes blob1 {
    0% { transform: scale(0.6) translate(120%, -50%) rotate(0deg);}
    20% { transform: scale(0.7) translate(100%, 10%) rotate(160deg);}
    43% { transform: scale(0.4, 0.45) translate(110%, 20%) rotate(190deg);}
    57% { transform: scale(0.5, 0.6) translate(130%, 45%) rotate(270deg);}
    76% { transform: scale(1.1, 0.95) translate(90%, 20%) rotate(340deg);}
    100% {transform: scale(0.6) translate(120%, -50%) rotate(360deg);}
}

@keyframes blob2 {
    0%   { transform: scale(0.4)   translate(40% 20%) rotate(0deg); }
    40%  { transform: scale(0.45, 0.36) translate(110%, 0%) rotate(160deg); }
    58%  { transform: scale(0.59) translate(180%, 34%) rotate(197deg); }
    78%  { transform: scale(0.66) translate(130%, 50%) rotate(280deg); }
    100% { transform: scale(0.4)   translate(40% 20%) rotate(360deg); }
}

@keyframes blob3 {
    0%   { transform: scale(0.6)   translate(50%, 50%); }
    38%  { transform: scale(0.55) translate(80%, 30%) rotate(170deg); }
    54%  { transform: scale(0.8) translate(120%, 20%) rotate(219deg); }
    69%  { transform: scale(0.64) translate(140%, 25%) rotate(240deg); }
    78%  { transform: scale(0.7) translate(100%, 20%) rotate(325deg); }
    100% { transform: scale(0.6)   translate(50%, 50%) rotate(360deg); }
}

@keyframes bloboscillate {
    0%   { transform: scale(0.6)   translate(130%, 35%); }
    28%  { transform: scale(0.50) translate(80%, 75%) rotate(130deg); }
    38%  { transform: scale(0.55) translate(30%, 120%) rotate(170deg); }
    50%  { transform: scale(0.40) translate(20%, 180%) rotate(10deg); }
    67%  { transform: scale(0.7) translate(10%, 105%) rotate(325deg); }
    82%  { transform: scale(0.55) translate(60%, 85%) rotate(185deg); }
    100% { transform: scale(0.6)   translate(130%, 35%); }
}

@keyframes blobrotate {
    0% {transform: rotate(0deg); }
    20% {transform: rotate(45deg); }
    40% {transform: rotate(178deg); }
    76% {transform: rotate(220deg); }
    100% {transform: rotate(360deg); }
}

@keyframes blobrotate2 {
    0% {transform: translate(80%, 90%) rotate(0deg); }
    20% {transform: translate(80%, 90%) rotate(45deg); }
    40% {transform: translate(80%, 90%) rotate(178deg); }
    76% {transform: translate(80%, 90%) rotate(220deg); }
    100% {transform: translate(80%, 90%) rotate(360deg); }
}

@keyframes blobrotate3 {
    0% {transform: translate(50%, 50%) rotate(0deg); }
    20% {transform: translate(50%, 50%) rotate(45deg); }
    40% {transform: translate(50%, 50%) rotate(178deg); }
    76% {transform: translate(50%, 50%) rotate(220deg); }
    100% {transform: translate(50%, 50%) rotate(360deg); }
}

@keyframes squareBlob1 {
    0% {transform: translate(20%, 20%) rotate(0deg) scale(1.8); }
    22% {transform: translate(80%, 20%) rotate(20deg) scale(1.65); }
    48% {transform: translate(80%, 80%) rotate(138deg) scale(1.85); }
    80% {transform: translate(20%, 80%) rotate(270deg) scale(2.1); }
    100% {transform: translate(20%, 20%) rotate(360deg) scale(1.8); }
}

@keyframes squareBlob2 {
    0% {transform: translate(80%, 20%) rotate(0deg) scale(1.8); }
    18% {transform: translate(80%, 80%) rotate(20deg) scale(1.95); }
    58% {transform: translate(20%, 80%) rotate(138deg) scale(1.65); }
    70% {transform: translate(20%, 20%) rotate(270deg) scale(2.4); }
    100% {transform: translate(80%, 20%) rotate(360deg) scale(1.8); }
}

@keyframes squareBlob3 {
    0% {transform: translate(80%, 80%) rotate(0deg) scale(2.6); }
    24% {transform: translate(20%, 80%) rotate(20deg) scale(2.95); }
    48% {transform: translate(20%, 20%) rotate(138deg) scale(2.25); }
    83% {transform: translate(80%, 20%) rotate(270deg) scale(2.3); }
    100% {transform: translate(80%, 80%) rotate(360deg) scale(2.6); }
}

@keyframes squareBlob4 {
    0% {transform: translate(20%, 80%) rotate(0deg) scale(1.8); }
    26% {transform: translate(20%, 20%) rotate(20deg) scale(1.65); }
    52% {transform: translate(80%, 20%) rotate(138deg) scale(1.85); }
    76% {transform: translate(80%, 80%) rotate(270deg) scale(2.1); }
    100% {transform: translate(20%, 80%) rotate(360deg) scale(1.8); }
}