* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tooltip__bubble { transition: none; transform: translateX(-50%) translateY(-8px); }
}

 body {
 height: 100vh;
 width: 100vw;
 display: flex;
 justify-content: center;
 align-items: center;
 font-family: "barlow", sans-serif;
 background-color: #eff6ff;
 color: #2a4a5c;
 }

.container {
 display: flex;
 width: 68%;
 height: 80%;
 background-color: white;
}

.pic {
 position: relative;
 width: 50%;
 }
 .pic .bg {
 position: absolute;
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
 .pic .logo {
 position: absolute;
 top: 10px;
 left: 20px;
 width: 50px;
 height: 50px;
}

 .btns {
  display: flex;
  justify-content: space-between;
}

.icon-btn {
  display: flex;
  align-items: center;
  border: none;
  color: #fff;
}

.icon-btn.fb {
  background-color: #3b5998;
}

.icon-btn.ln {
  background-color: #0077b5;
}

.icon {
  width: 20px;
  height: 20px;
}


 .fb {
 background-color: #255a9b;
 width: 110px;
 height: 30px;
 }

 .ln {
 background-color: #0076b6;
 width: 110px;
 height: 30px;
 }

  fieldset {
 border: none;
  }

h2 {
  font-size: 18px;
}

p {
  font-size: 12px;
}

   .or {
 display: flex;
 align-items: center; /* vertical alignment */
 gap: 10px; /* space between text and lines */
 font-weight: bold;
 }
 .or::before,
 .or::after {
 content: "";
 flex: 1; /* fills available space */
 height: 1px; /* thickness of line */
 background-color: #aaa; /* line color */
 }

.form {
    width: 50%;
    position: right;
    margin: 30px;
  
}

 .inputs {
 display: flex;
 justify-content: space-between;
 }

.input {
 position: relative;
 background-color: #ffffff;
 border: 1px solid #eeeeee;
 height: 42px;
 }
 .input span {
 position: absolute;
 font-size: 12px;
 }
 .input input {
 padding-top: 14px;
 border: none;
 outline: none;
 }
 .input:focus-within {
 border-left: 4px solid #0076b6;
 }
.tooltip {
  position: relative;  
}

.tooltip__bubble {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  top: 100%;            
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(253, 252, 252, 0.95);
  color: #4e6497;
  font-size: 13px;
  line-height: 1.2;
  pointer-events: none;    /* so not to block mouse events */
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(215, 207, 207, 0.25);
}

/* little cloud-like shape using pseudo-element */
.tooltip__bubble::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  border-width: 8px 8px 0 8px;
  border-style: solid;
  border-color: rgba(30,30,30,0.95) transparent transparent transparent;
}

/* show on hover or keyboard focus */
.tooltip:hover .tooltip__bubble,
.tooltip:focus .tooltip__bubble,
.tooltip:focus-within .tooltip__bubble {
  opacity: 1;
  visibility: visible;
}

.tooltip:focus {
  box-shadow: 0 0 0 3px rgba(100,150,255,0.18);
  border-radius: 4px;
}

.terms {
  font-size: 11px;
}

#create {
  background-color: #3698FB;
  color: #ffffff;
  border: none;
  width: 50%;
  height: 30px;
  border-radius: 5px;

  
}