#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
  }

.container {
  position: relative;
}

.container-background {
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(244,229,238,1) 50%, rgba(255,237,249,1) 100%);
  width: 600px;
  margin-left: 25%;
  padding-top: 1%;
  padding-bottom: 1%;
  border-radius: 5px;
  opacity: 90%;
}

.sucessPost {
  position: relative;
  border-radius: 3px;
  margin-top: 13%;
}

.sucessPost  h1 {
  color: #380B61;
  font-weight: 700;
  font-style: italic;
  font-size: 40px;
}

.sucessPost  h2 {
  color: #380B61;
  font-weight: 700;
  font-style: italic;
  font-size: 40px;
}

img {
  pointer-events: none;
  position: relative;
  margin-bottom: -15%;
}

p {
  font-size: 15px;
}

label {
  font-size:  11px;
}

.title {
    margin-top: 1px;
}

.title img {
    width: 300px;
    margin-top: 1%;
}

.form {
    margin-top: 11%;
    padding-bottom: 2%;
    width: 100%;
    border-radius: 3px;
}

#form1 {
    display: none;
}

#sucessPost {
  display: none;
}

.form  p {
    color: #380B61;
    font-weight: 500;
}

.form  h1 {
  color: #380B61;
  font-weight: 700;
  font-style: italic;
  font-size: 40px;
}

.form  h2 {
  color: #380B61;
  font-weight: 700;
  font-style: italic;
  font-size: 40px;
}

.login {
    margin-top: 1%;
    padding-top: 1%;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 30%;
}

.g_id_signin {
  width: 35%;
  margin-left: 30%;
}

.card {
    all: unset;
    border-radius: 4px;
    height: 40px;
    width: 200px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
    line-height: 24px;
  }

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
}

.card-container .card:not(:last-child) {
    margin-right: 0;
  }

.card.card-small {
    height: 16px;
    width: 168px;
  }

.card-container .card:not(.highlight-card) {
    cursor: pointer;
  }

.card-container .card:not(.highlight-card):hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
  }

.card-container .card:not(.highlight-card):hover .material-icons path {
    fill: rgb(105, 103, 103);
  }

.card.highlight-card {
    background-color: #1976d2;
    color: white;
    font-weight: 600;
    border: none;
    width: auto;
    min-width: 30%;
    position: relative;
  }

.card.card.highlight-card span {
    margin-left: 60px;
  }

.circle-link {
    height: 40px;
    width: 40px;
    border-radius: 40px;
    margin: 8px;
    background-color: white;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: 1s ease-out;
}

.circle-link:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}


@media (max-width: 768px) {

    .card-container > *:not(.circle-link) ,
      .terminal {
        width: 100%;
      }
    
    .card:not(.highlight-card) {
      margin: 8px 0;
    }
    
    .card.highlight-card span {
      margin-left: 72px;
    }
    
    svg#rocket-smoke {
      right: 120px;
      transform: rotate(-5deg);
    }

    .title img {
        width: 80%;
    } 

    .form {
        height: 200px;
    }

    .container-background {
      background:none;
      background: none;
      width: auto;
      margin-left: 25%;
      padding-top: 1%;
      padding-bottom: 1%;
      border-radius: 5px;
      opacity: 90%;
    }
    
    .g_id_signin {
      width: 100%;
      margin-left: 0%;
    }
}