:root {
  --primary-color: #0A3871; 
  --my-gray: #5f656d;
  --back-color: #f3f5fc;
}

* {
  font-family: "Inter", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  box-sizing: border-box;
}

body {
  background: var(--back-color);
}

main {
  margin-bottom: 74px;
}

.logo-box {
  height: 96px;
  width: 132px;
}

#logo {
  object-fit: cover;
}

span {
  display: block;
  margin: 12px 0;
  color: var(--my-gray);
  font-size: 16px;
}

.content {
  width: 84%;
  margin: 48px auto;
}

.text-input{
  background-color: var(--back-color);
  color: var(--primary-color);
  font-size: 32px;
  border: 0 solid var(--back-color);
  margin-bottom: 64px;
  width: 96%;
  height: 200px;
  resize: vertical;
  
} 

.text-input::placeholder {
  color: var(--primary-color);
}

.buttons {
  width: 96%;
}

button {
  height: 67px;
  width: 100%;
  border: 1px solid var(--primary-color);
  border-radius: 24px;
  font-size: 16px;
  margin: 6px;
}

#encrypt {
  background: var(--primary-color);
  color: white;
}

#decrypt {
  background: white;
  color: var(--primary-color);
}

.output {
  background: white;
  text-align: center;
  width: 84%;
  padding: 32px;
  margin: 10px auto;
  border-radius: 32px;
  box-shadow: 4px 4px 16px 2px rgba(0, 0, 0, 0.25);
  position: relative;
}

.output p {
  color: var(--my-gray);
  font-size: 16px;
  font-weight: 300;
}

.copy {
  display: none; 
  width: 88%;
  margin: 16px 6%;
  left: 0;
  bottom: 0;
  background: white;
  color: var(--primary-color);
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--my-gray);
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 20px;
  border: 0 solid var(--my-gray);
}

@media (min-width: 768px) {
  button {
    width: 44%;
  }
}

@media (max-width: 1039px) {
  .output img{
    display: none;
  }
}

@media (min-width: 1040px) {
  main {
    display: flex;
    justify-content: space-between;
  }

  .content {
    flex: 0 0 60%;
    margin-left: 48px;
  }

  .output {
    flex: 1;
    margin-right: 40px;
  }

  .output img {
    max-width: 100%;
    height: auto;
    margin-top: 60px;
  }
}