@font-face {
  font-family: Cavalhatriz;
  src: url(fonts/Cavalhatriz.ttf);
}
@font-face {
  font-family: Terminal Grotesque;
  src: url(fonts/terminal-grotesque.ttf);
}
@font-face {
  font-family: Terminal Grotesque OP;
  src: url(fonts/terminal-grotesque_open.otf);
}

body{
  background: #F6FFB0;
  background: linear-gradient(90deg, rgba(246, 255, 176, 1) 21%, rgba(255, 255, 255, 1) 32%, rgba(255, 94, 145, 1) 50%, rgba(255, 255, 255, 1) 70%, rgba(246, 255, 176, 1) 83%) repeat-y;
}
.container{
    display: flex;
    position: absolute;
    border-radius: 5%;
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    background: white;
    height: auto;
    width:  40%;
}
#container-text{
    position: relative;
    margin: 50px;
}
#text{
    text-align: left;
    font-family: Cavalhatriz;
    color: #f5568b;
    font-weight: 900;
    font-size: 1.5em;
}

#text-important{
    margin-top: -6%;
    text-align: left;
    font-family: Terminal Grotesque OP;
    color: #f5568b;
    font-weight: 900;
    font-size: 1.1em;
}

#text-2{
    text-align: left;
    font-family: Terminal Grotesque OP;
    color: #0029bb;
    font-weight: 200;
    font-size: 1.1em;
}

a{
    text-align: left;
    font-family: Terminal Grotesque OP;
    color: #f5568b;
    font-weight: 900;
    font-size: 1em;
}

.banner-container{
    display: flex;
}
#banner{
    background: transparent;
    position: absolute;
    top: -8%;
    left: 70%;
}
#banner:hover{
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

.banner-container-2{
    display: flex;
}
#banner-2{
    background: transparent;
    position: absolute;
    top: 24em;
    right: 88%;
}
#banner-2:hover{
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-2px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(2px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 1px) rotate(-1deg); }
  60% { transform: translate(-1px, 1px) rotate(0deg); }
}