/* color scheme https://coolors.co/333333-48e5c2-fcfaf9-f3d3bd-5e5e5e*/
.css-selector {
font-family: 'Raleway', serif;
}

body{
  background-color: #FCFAF9;
  text-align: center;
  font-family: 'Raleway';
}

h1{
  color: #333333;
  text-align: center;
  font-size: 300%;
}

p{
  color: #5E5E5E;
  text-align: left;
}

select{
  background-color: #48E5C2;
  margin-bottom: 5%;
}

input{
  background-color: #48E5C2;
}

form{
  text-align: left;
  margin-left: 5%;
  font-size: 200%;
}


/*two grids*/
.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
    height: 100%;
}

/*.grid-container:hover {
    grid-template-columns: 1fr 1fr;
    transition: all 1s;
}*/

.grid-child-input{
    width: 100%;
    background-color: #F3D3BD;
    transition: width 1s;
}

.grid-child-input:hover{
    width: 150%;
    transition: width 1s;
}
.grid-child-output{
    width: 100%;
    transition: width 1s;
}
.grid-child-input:hover ~ .grid-child-output{
    width: 110%;
    transition: width 1s;
}

.output-image{
  background-color: #48E5C2;
}

.output-image image{
  width: 100%;
  height: auto;
}