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

#main {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-color: #0003;
    width: 100%;
    max-width: 1000px;
    margin: 1rem auto;
}

h1 {
    text-align: center;
    padding: 1rem;
}

.container {
    display: flex;
    padding: 1rem;
    gap: 3rem;
}

.container>* {
    background-color: silver;
    padding: 1rem;
    width: 50%;
    border-radius: 10px;
    box-shadow: 4px 4px 12px #2e2e2e;
}


.container>*:hover{
    box-shadow: 1px 1px 4px #2e2e2e;
}

.container form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.container form div {
    display: flex;
    gap: 1rem;
}

form div :where(input, select):not(#readUrl) {
    align-items: center;
    width: 100%;
    height: 2rem;
    outline: none;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    box-shadow: 4px 4px 12px #2e2e2e;
}

form div :where(input, select):hover:not(#readUrl){
    box-shadow: 1px 1px 5px #2e2e2e;
}

#readUrl {
    padding: 6px 0;
    width: 100%;
    background-color: transparent;
}

.container .display {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.display .display-content{
    overflow: hidden;
    font-size: 1.2rem;
}

.display-header{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

 .display-header img{
    max-width: 80px;
    height: 80px;
    border-radius: 50%;
}

.translated-ltr {
    margin-top: -40px;
}

.translated-ltr {
    margin-top: -40px;
}

.goog-te-banner-frame {
    display: none;
    margin-top: -20px;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

#translate-div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#save{
    padding: 5px 10px;
    border: 0;
    box-shadow: 3px 3px 5px black;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#data{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 5px 20px;
}

.singleDiv{
    display: flex;
    align-items: center;
    gap: 2%;
    padding: 5px 10px;
    background-color: #1313134a;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.singleDiv img{
    max-width: 60px;
    width: 8%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.singleDiv h4{
    width: 20%;
}

@media screen and (max-width:767px) {
    form div {
        flex-direction: column;
    }
          .container {
              flex-direction: column-reverse;
              gap: 1rem;
          }
    
          .container>* {
              width: 100%;
          }
    
          #main {
              margin: auto
          }

          .singleDiv img{
            height: 90%;
            width: 10%;
          }

          .singleDiv h4{
            width: 30%;
          }
}