* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

:root {
  --background: rgb(19, 19, 67);
  --white-color: #FFFFFF;
  --blue-color: #1E90FF;
  --foreground: #000000;
}

body {
  color: var(--foreground);
}

/* Begin theme preference */
body.dark {
  background-color: #121212;
  color: var(--white-color);
}

body.dark .top input {
  background-color: var(--foreground);
  color: var(--white-color);
  border: 1px solid var(--white-color);
}

body.dark .top .from-select,
body.dark .to-select {
  background-color: var(--foreground);
  border: 1px solid var(--white-color);
}

body.dark select {
  background-color: var(--foreground);
  color: var(--white-color);
  border: none;
  outline: none;
}

body.light {
  background-color: var(--white-color);
  color: var(--foreground);
}

/* End theme preference */

header {
  background-color: var(--background);
  border-bottom: 1px solid var(--white-color);
  height: 15vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

header #site-logo img {
  max-width: 70px;
  max-height: 70px;
}

nav {
  display: flex;
  align-items: center;
}

nav a {
  color: var(--white-color);
  text-decoration: none;
  padding-right: 20px;
  font-size: large;
}

nav span {
  font-size: 20px;
  cursor: pointer;
  color: var(--white-color);
  padding-right: 20px;
  position: relative;
}

nav span ul {
  list-style: none;
  background-color: var(--white-color);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
  width: 80px;
  padding: 5px 5px;
  line-height: 30px;
  font-size: small;
  position: absolute;
  right: 0;
  color: black;
  display: none;
}

nav span ul.modeOpen {
  display: block;
}

.nav-menu .menu-icon {
  font-size: 20px;
  cursor: pointer;
  color: var(--white-color);
  display: none;
}

.content {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 50px;
}

.content h1 {
  font-size: 2.5rem;
  margin: 20px 0;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
}

.content p {
  font-size: 1.2rem;
  line-height: 1.5;
}

.main-wrapper {
  position: relative;
  /* border: 1px solid var(--foreground); */
  box-shadow: 2px 2px 10px 5px #ccc;
  margin: 30px auto;
  padding: 30px 20px;
  max-width: 90vw;
  height: fit-content;
}

.top {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.top input {
  width: 30%;
  padding: 20px 10px;
  border: 1px solid var(--foreground);
  outline: none;
  border-radius: 5px;
}

.top .from-select,
.to-select {
  position: inherit;
  width: 34%;
  border: 1px solid black;
  border-radius: 5px;
  background-color: var(--white-color);
  padding: 10px 10px;
}

select {
  width: 100%;
  padding: 10px 0;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  outline: none;
}

.arrow-icons {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 33px;
  width: 33px;
  border: 1px solid var(--foreground);
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  right: 33%;
  bottom: 13px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  border: 2px solid #ccc;
}

.arrow-icons:hover {
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 5px var(--blue-color);

}

.arrow-icons p {
  font-size: 10px;
}

.bottom {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.bottom p {
  font-size: 30px;
  width: 70%;
}

button {
  background-color: var(--blue-color);
  color: var(--white-color);
  padding: 10px;
  transition: all 0.5s ease;
  width: 25%;
  height: 100%;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 50px;
  animation: 4s linear 0s infinite alternate bounce;
}

@keyframes bounce {
  from {
    transform: translateY(10px);
  }

  to {
    transform: translateY(0);
  }
}

button:hover {
  background-color: rgb(0, 81, 255);
}

section {
  display: flex;
  background-color: whitesmoke;
  margin-top: 150px;
  padding: 20px;
  height: 90vh;
}

section .side-content {
  margin: 0 0 20px 20px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: #0a146e;
  color: var(--white-color);
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
}

.write-up h2 {
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.write-up .quick-links {
  margin-top: 20px;
}

.quick-links a {
  color: var(--white-color);
  font-size: 1rem;
  padding-right: 20px;
}


section .side-image {
  width: 50%;
  height: 100%;
  margin: 0 20px 20px 0;
}

.side-image img {
  width: 100%;
  height: 100%;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

footer {
  margin: 150px auto 50px auto;
  max-width: 90vw;
}

@media screen and (max-width: 991px) {

  nav>.nav-top {
    position: fixed;
    top: 14vh;
    right: -100%;
    transition: all 0.3s ease-in-out;
    background-color: var(--background);
    color: white;
    padding: 10px 10px;
    display: block;
  }

  nav>.nav-top.menu-show {
    right: 0;
  }

  .nav-menu .menu-icon {
    display: block;
  }

  .content h1 {
    font-size: 2rem;
  }

  .main-wrapper {
    height: fit-content;
  }

  .top {
    flex-direction: column;
  }

  .top input {
    width: 100%;
    margin-bottom: 10px;
  }

  .top .from-select,
  .top .to-select {
    width: 100%;
    margin-bottom: 10px;
  }

  .arrow-icons {
    /* right: 400px; */
    bottom: 55px;
    margin: 10px auto;
  }

  .bottom {
    flex-direction: column;
  }

  .bottom button {
    width: 100%;
  }

  section {
    height: fit-content;
    display: grid;
    grid-template-areas: "image image"
      "content content";

  }

  section .side-content {
    grid-area: content;
    margin: 0 20px 20px 20px;
    width: 90%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
  }

  section .side-image {
    grid-area: image;
    width: 90%;
    margin: 20px 20px 0 20px;
  }

  .side-image img {
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

}

@media screen and (max-width: 320px) {
  .arrow-icons {
    right: 40%;
  }
}

@media screen and (max-width: 428px) {
  .arrow-icons {
    right: 44%;
  }
}

@media screen and (max-width: 800px) {
  .arrow-icons {
    right: 50%;
  }
}

/* @media (min-width: 481px) and (max-width: 768px) {
  .arrow-icons {
    right: 200px;
  }
} */

/* @media screen and (max-width: 791px) {
  .arrow-icons {
    right: 180px;
    bottom: 50px;
  }
} */