@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: "Montserrat", sans-serif;
}

body {
 background-color: #ddd;
}

/* Customizing scrollbar */
body::-webkit-scrollbar {
 width: 12px;
}

body::-webkit-scrollbar-track {
 background: #000;
}

body::-webkit-scrollbar-thumb {
 background-color: #000;
 border-radius: 20px;
 border: 3px solid #ddd;
}

/* nav */
nav {
 background-color: #000;
 color: #fff;
 padding: 20px 0;
 border-bottom: 2px solid blue;
}

nav .max-width {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

nav #nav-title {
 transition: color 0.7s ease-in-out;
}

nav .right-content {
 background-color: #fff;
 border-radius: 8px;
 width: 60px;
 height: 40px;
}

nav .right-content img {
 height: 100%;
 width: 100%;
}

.max-width {
 width: 90%;
 margin: 0 auto;
}

main {
 position: relative;
 top: 60px;
 display: flex;
 justify-content: space-between;
}

a {
 color: rgb(89, 117, 244);
 text-decoration: none;
 font-weight: 500;
}

/* left section */
section#left-section {
 width: 42%;
 display: flex;
 flex-direction: column;
 gap: 20px;
}

/* right section */
section#right-section {
 flex-basis: 48%;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

/* stats container */
#stats-container {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
}

#stats-container div:first-child {
 display: flex;
 flex-direction: column;
 gap: 5px;
}

#stats-container p {
 font-size: 18px;
 font-weight: bold;
}

#stats-container span {
 color: blue;
}

/* Textarea & inputs */
textarea,
input {
 outline: none;
 border: 1.2px solid blue;
 border-radius: 10px;
 padding: 15px;
 font-size: 18px;
 width: 100%;
}

textarea:focus,
input:focus {
 border: 1.2px dashed blue;
}

/* buttons */
#btn-container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
}

button {
 padding: 15px;
 border: 2px solid#fff;
 background-color: #000;
 color: #fff;
 border-radius: 8px;
 cursor: pointer;
 font-size: 16px;
 transition: background-color 0.5s ease;
}

button:hover:not(button.disabled) {
 background-color: #414a4c;
}

button.disabled {
 opacity: 0.2;
 cursor: not-allowed;
}

/* footer */
footer {
 position: fixed;
 background-color: #000;
 padding: 10px;
 font-size: 18px;
 bottom: 0;
 width: 100%;
 text-align: center;
 color: white;
}

/* Media Query */
@media screen and (max-width: 780px) {
 body {
  padding-bottom: 200px;
 }
 nav {
  padding: 10px 0;
  border-bottom: 1px solid blue;
 }

 .max-width {
  width: 90%;
  margin: 0 auto;
 }

 main {
  top: 40px;
  flex-direction: column;
  gap: 15px;
 }

 section#left-section {
  width: 100%;
  gap: 20px;
 }

 #stats-container p {
  font-size: 16px;
  font-weight: bold;
 }

 footer {
  font-size: 16px;
 }
}