* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

:root {
  --color-surface-box: 55, 35, 85;           /* Muted violet */
  --color-border: 126, 228, 235;             /* Golden coral */
  --color-header: 230, 215, 0;               /* Reddish-orange */
  --color-text: 255, 224, 252;               /* Faded orchid */
  --color-link: 255, 244, 91;                /* Fresh green */
  --color-link-hover: 255, 238, 0;         /* Brighter green */
  --color-link-active: 247, 192, 42;         /* Deeper earthy green */
}

html { 
  background-color: rgba(var(--color-background)); /* BACKGROUND COLOR  */
} 

header,
#left,
#right,
.pfp { 
  border: .3rem dashed rgba(var(--color-border)); /* == PFP/PHOTO BORDER COLOR == */
  } 

header,
#left,
#right { 
  background-color: rgba(var(--color-surface-box)); /* == CONTENT BOX COLOR == */
} 

html { 
  color: rgba(var(--color-text)); /* == TEXT COLOR == */
} 

h1,
h2, 
h3 { 
  color: rgba(var(--color-header)); /* == HEADING COLOR == */
} 

a,
#header-ul ul a { 
  color: rgba(var(--color-link)); /* == LINK COLOR == */
} 

a:active { 
  color: rgba(var(--color-link-active));
} 

a:hover,
#header-ul ul a:hover { 
  color: rgba(var(--color-link-hover)); 
}

/* ======================= Repeat ======================= */        
header,
header img,
#left,
#right, 
#rounded-img,
.pfp {
  border-radius: .5rem;
}

#left,
#right {
  padding: 1.5rem
}


html{
  text-align: center;
  background-image: url("./images/wallpaper-img.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

p {
  font-size: .9rem;
  font-weight: bold;
}

body {
  width: 55vw;
  margin: auto;
}

header {
  margin-top: .5rem;
  position: relative;
}

header img {
  width: 100%; 
  height: auto;
  display: block;
  object-fit: cover;
}

#header-ul ul {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: 0.5rem 0;
  justify-content: space-evenly;
  align-items: flex-end;
  padding: 1rem;
  list-style: none;
  z-index: 2;
}

#header-ul ul a {
  padding: 0.5rem 1rem;
}

div #pfp {
  display: inline-block;
  border-radius: 10%;
}

#rounded-img {
  width: 100px;
}


#container {
  display: flex;
  width: 100%;
}

#left {
  width: 30%;
  margin: .5rem .25rem .5rem 0;
}

#right {
  display: flex;
  justify-content: space-evenly;
  align-items: center; 
  width: auto; 
  margin: .5rem 0 .5rem .25rem;
}

.about {
  display: flex;
  width: 100%;
}

#about-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  text-align: center;
  width: 40%;
}

.nova-img img {
  width: 7.5rem;
}

.nova-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }

#about-img img {
  width: 100%; 
  height: auto;
  display: block;
  object-fit: cover;
}

.logo-img {
  width: 1.2rem;
}

ul {
  list-style: none;
}

#cbox {
  height: 30%;
}