/* ===== RESET & BASE ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --main-bg-color: var(--tomato);
  --secondary-bg-color: var(--naples);
  --tertiary-bg-color: var(--color-14);
  --main-text-color: var(--secondary-bg-color);
  --secondary-text-color: var(--rosa);
  --tertiary-text-color: var(--color-13);

  --rosa:#ee82ee;

  --tomato: #9ca264;
  --naples: #f1e8c7;

  --color-1: #4ccdc4;
  --color-2: #8de2d4;
  --color-3: #b2f0e8;
  --color-4: #f8f1a0;
  --color-5: #ff6b6b;

  --color-6: #f9d59f;
  --color-7: #ffb84d;
  --color-8: #ff6d1f;
  --color-9: #e63746;
  --color-10: #f2faef;

  --color-11: #330036;
  --color-12: #38182F;
  --color-13: #2F394D;
  --color-14: #56666B;
  --color-15: #EEE1B3;

  --color-16: #ff6e61;
  --color-17: #ffa142;
  --color-18: #ffcc00;
  --color-19: #afeeee;
  --color-20: #5b8b89;

  --color-21: #F0E491;
  --color-22: #BBC863;
  --color-23: #658C58;
  --color-24: #31694E;
}

body {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  gap: 1px;
  font-family: Arial, sans-serif;
  margin: 25px 275px;
  padding: 0;
  min-height: 100vh;
  cursor: url('resources/images/fantasmo128x128.png') 0 0, auto;
  background-image: url('resources/images/noite.png');
  background-size: cover;
  background-position: center;
}

/* ===== TYPOGRAPHY ===== */
p, h1, h2, h3, h4, h5, h6:hover{
  cursor: default;
}

a {
  text-decoration: none;
  color: var(--main-text-color);
}

a:hover {
  color: var(--secondary-text-color);
}

li {
  text-decoration: none;
  list-style-type: none;
  margin-top: 10px;
}

ul {
  padding: 0;
}

#interests ul {
  padding-left: 15px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: var(--main-text-color);
}

.atual{
  font-weight: 500;
  font-size: 14px;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  color: var(--secondary-text-color);
}

.atual:hover{
  color: var(--main-text-color);
}

.text-section {
  font-size: 16px;
  line-height: 1.6;
  font-family: 'Bitcount Single', sans-serif;
}

.sub-text {
  font-size: 14px;
  line-height: 1.4;
  font-family: 'Bitcount Single', sans-serif;

}

.banger-text{
    color: var(--main-text-color);
    background-color: #7ab4f76c;
    border-radius: 7px;
    margin-bottom: 4px;
    margin-right: 10px;
    text-shadow: #5a3f3f 1px 1px 2px;
}

/* ===== HEADER ===== */
header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
  background-color: var(--main-bg-color);
  border-radius: 10px;
  color: #ffffff;
  padding: 10px 0;
}

header .title {
  margin: 0;
  padding: 0;
  font-size: 50px;
  text-align: center;
  font-family: 'bitcount single', sans-serif;
}

.header{
  display: flex;
  flex-direction: row;
}

.update-info{
  position: absolute;
  left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
  font-size: 14px;
  text-align: start;

}

/* ===== NAVBAR ===== */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.navbar-item {
  margin: 0 15px;
  font-size: large;
}

.navbar-item:hover {
  cursor: pointer;
  color: var(--secondary-text-color);
}

/* ===== LAYOUT CONTAINERS ===== */
#container {
  display: grid;
  grid-template-columns: 264px 630px;
  margin: 0 auto;
  gap: 20px;
}

.organization {
  margin-top: 35px;
  display: flex;
  flex-direction: row;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 14px;
  background-color: var(--main-bg-color);
}

.borda{
  border: 10px groove var(--secondary-bg-color);
  border-radius: 7px;
}

.subContent {
  padding: 0;
  text-align: center;
}

.sideContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 264px;
  padding: 10px;
  background-color: var(--main-bg-color);
}

#left-sidebar,
#right-sidebar {
  display: flex;
  justify-content: start;
  width: 100%;
}

#right-sidebar {
  display: none;
}

/* ===== IMAGES & MEDIA ===== */
.main-image {
  width: 255px;
  height: auto;
  display: block;
  border-radius: 7px;
  margin-right: 10px;
  box-shadow: #00000079 0px 4px 8px 0px;
}

.icon {
  width: 45px;
  height: 45px;
}

/* ===== INTERESTS SECTION ===== */
#interests {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  padding: 0 30px 20px 20px;
  font-weight: 700;
  border-radius: 7px;
  padding-bottom: 20px;
}

.interestTitle {
  color: var(--main-text-color);
  text-align: center;
  font-weight: 300;
  font-size: 20px;
  margin: 10px 0;
}

.interestItens {
  color: var(--main-text-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: start;
  font-weight: 300;
  font-size: large;
}

.interestItens:hover {
  cursor: pointer;
  color: var(--secondary-text-color);
}

.interestIcon{
  margin-right: 10px;
}

/* ===== FOOTER ===== */
footer.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  height: 230px;
  padding: 10px 30px 10px 5px;
  margin: 10px;
  font-size: 28px;
  text-align: start;
  color: var(--main-text-color);
  background-color: var(--secondary-bg-color);
  border-radius: 7px;
}