105 lines
1.3 KiB
CSS
105 lines
1.3 KiB
CSS
body {
|
|
font-family: monospace;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.wrapper {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.inner_wrapper {
|
|
padding: 0 15%;
|
|
}
|
|
|
|
.header {
|
|
flex: 10%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.header_title {
|
|
font-size: 44px;
|
|
padding-top: 1.25%;
|
|
}
|
|
|
|
.main {
|
|
flex: 83%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main__input {
|
|
flex: 30%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.main__input_form {
|
|
height: 20%;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.main__input_line {
|
|
font-family: monospace;
|
|
font-size: 24px;
|
|
height: 100%;
|
|
width: 86%;
|
|
}
|
|
|
|
.main__input_button {
|
|
font-family: monospace;
|
|
font-size: 24px;
|
|
color: darkgreen;
|
|
height: 110%;
|
|
width: 14%;
|
|
background: #73b06a;
|
|
border: none;
|
|
}
|
|
|
|
.main__input_button:hover {
|
|
background: #49a83b;
|
|
}
|
|
|
|
.main__info {
|
|
flex: 68%;
|
|
}
|
|
|
|
.main__info_field {
|
|
font-size: 22px;
|
|
border: 1px solid red;
|
|
padding: 2% 2%;
|
|
}
|
|
|
|
.footer {
|
|
font-size: 16px;
|
|
color: grey;
|
|
flex: 5%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
.inner_wrapper {
|
|
padding: 0%;
|
|
}
|
|
.main__input_form {
|
|
padding: 0 2%;
|
|
}
|
|
.main__info {
|
|
padding: 0 2%;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 600px) {
|
|
.main__input_button {
|
|
height: 120%;
|
|
}
|
|
}
|