body{margin:0;
     font-size: 1.5rem;
     font-family: 'Ubuntu', sans-serif;
    overflow-y: hidden;}

body::before{ content: '';
                width:100%;
                height: 100%;
                position: fixed;
                z-index: -1;
                top:0;
                left:0;
                opacity: 0.6;
              background-image: url(./gradienta-7brhZmwXn08-unsplash.jpg);
              background-repeat: no-repeat;
              background-size: cover;}

.container{width:90%;
            margin:0 auto;
            text-align: center;
            height: 100vh;}

h1{font-family: 'Cairo', sans-serif;}


.flex2{display: flex;
        justify-content: space-evenly ;
        margin-top: 1em ;}

.ViewColor{ border: 2px solid rgba(0,0,0,0.5);
            border-radius:10px 50px;
            background-color: white;
            height:200px;
            width:70%;
            margin:0 auto;}

.Generate{  width:45%; 
            display: flex; 
            flex-direction: column;}

.colorHex{border: 2px solid rgba(0,0,0,0.5);
            padding: .3em;
           color:rgb(10, 10, 99)}

.View{width:45%;
    display: flex;
    flex-direction: column; }

.Generate h3{margin-top:0.3em;
             margin-bottom: 1em;}

 .View h3 {margin-top:0;
           margin-bottom: .7em;}

.text::before{width:100px;
    font-weight: bold;
    font-size: 1.5rem;
    font-family: 'Ubuntu', sans-serif;
      outline: none;
      border: 2px solid rgba(0,0,0,0.5);
      padding:.3em;
      background-color: transparent;
     color:rgba(0,0,0,0.8) ;}

.text{width:100px;
    font-weight: bold;
    font-size: 1.5rem;
    font-family: 'Ubuntu', sans-serif;
      outline: none;
      border: 2px solid rgba(0,0,0,0.5);
      padding:.3em;
      background-color: transparent;
      color:rgb(10, 10, 99);}



.button{   align-self: center;
           margin-top: 0;
           width:100px;
           padding: .5em;
           cursor: pointer;
           font-family: 'Ubuntu', sans-serif;
           font-size: 1rem;
           border-radius: 8px;
           border:2px solid black;
           color: black;
           font-weight: bold;}


@media (max-width:740px){
    body { font-size: 1rem;}

    .container h3{margin-bottom: 4em;}

    .flex2{ flex-direction: column; }

    .ViewColor{width:90%;}

    .Generate , .View {flex-direction: row; 
                       justify-content: center;
                       width: 100%;}

    .Generate h3 , .View h3 { flex-direction: row;}

    .text::before , .text { font-size: 1rem;
                            width:60px;}

    .button{width:70px;
           padding: .2em 0;
           font-size: .9rem;
           margin-left: 1em;}

    .Generate h3{ margin-bottom: 1em;}

    .View h3 {margin-bottom: 0;}
}