@import url('https://fonts.googleapis.com/css2?family=LXGW+Marker+Gothic&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: "LXGW Marker Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

:root {
  --bg-color: #081b29;
  --second-bg-color: #112e42;  
  --alpha-text-color: #f9cedd; 
  --inferior-text-color: #ebc5a5; 
  --main-color: #4f31a3;  

}

html {
  font-size: 69%;
  overflow-x: hidden;
}

body {
  background: var(--bg-color);
  color: var(--inferior-text-color);
}

section {
  min-height: 100vh;
  padding: 10rem 9% 2rem;

}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 3rem 9%; 
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.logo {
  font-size: 4rem;
  color: var(--alpha-text-color);
  font-weight: 600;
  cursor: default;
}

.navbar a {
  font-size: 2.3rem;
  color: var(--inferior-text-color);
  font-weight: 700;
  margin-left: 3.5rem;
  transition: .3s;
}

.navbar a:hover , .navbar a.active {
  color: var(--main-color);
}

#menu-icon { /* # refers to an id of a class */
  font-size: 3.6rem;
  color: white;
  cursor: pointer; /* which cursor will show when user hovers over icon? */
  display: none;
}

.home {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-img img {
  width: 35vw;
  height: 35vw;
  border: .5rem solid #850737;
  border-radius: 4rem;
}
.home-content h3 {
  font-size: 2.9rem;
  font-weight: 700;
  margin: 0 2rem 0 0;
}

.home-content h3:nth-of-type(2) { /* selects 2nd child of h3 in class home-content */
  margin-bottom: 2rem;
}

span {
  color: #ac466a;
}

.home-content h1 {
  color: rgb(100, 114, 194);
  font-size: 5.6rem;
  font-weight: 800;
  line-height: 1.3;
  font-family: "Gravitas One", serif;
  font-style: normal;
}

.home-content p {
  font-size: 1.2rem;
}

.social-media a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background: transparent;
  border: .2rem solid #d347a7;
  border-radius: 50%;
  font-size: 2rem;
  color: rgb(211, 71, 160);
  margin: 1.5rem 1.5rem 1.5rem 0;
  transition: .5s ease;
}

.social-media a:hover {
  background: var(--main-color);
  color: white; 
  box-shadow: 0 0 1rem var(--main-color);
  border: .185rem solid white;
}

.btn1 {
  display: inline-block;
  padding: 1rem 2.8rem;
  background: #d347a7;
  border-radius: 4rem;
  box-shadow: 0 0 .69rem #d347a7;
  font-size: 1.5rem;
  color: var(--second-bg-color);
  letter-spacing: .1rem;
  font-weight: 650;
  transition: .3s ease;
}

.btn1:hover {
  background: var(--main-color);
  color: white;
  box-shadow: 0 0 1.4rem var(--main-color);
}

.about {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  background: #1b2337;
}

.about-img img {
  width: 27vw;
  height: 35vw;
  border: .5rem solid #63434f;
  border-radius: 4rem;
}

.heading {
    text-align: center;
  font-size: 4.5rem;
}

.about-content h2 , span {
  text-align: left;
  line-height: 1.2;
  font-weight: 650;
  font-family: "Young Serif", serif;
  font-style: normal;
}

.about-content h3 {
  font-size: 2.3rem;
  font-weight: 600;
}

.about-content p {
  font-size: 1.6rem;
  line-height: 2.3rem;
  margin: 2rem 0;
}

.btn2 {
  display: inline-block;
  padding: 1rem 2.8rem;
  background: #F96167;
  border-radius: 4rem;
  box-shadow: 0 0 .69rem #F96167;
  font-size: 1.5rem;
  color: #f6ffd1;
  letter-spacing: .1rem;
  font-weight: 650;
  transition: .3s ease;
}

.btn2:hover {
  background: #a02655;
  color: rgb(241, 214, 214);
  box-shadow: 0 0 1.4rem #a02655;
}

del {
  text-decoration: line-through solid rgb(180, 15, 15);
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-style: normal;
}
.skills h2 {
  margin-bottom: 5rem;
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.skills-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.skills-container .skills-box {
  flex: 1 1 30rem;
  background: #1e1831;
  padding: 2rem;
  border-radius: 2rem;
  text-align: center;
  border: .2rem solid #1e1831;
  transition: .3s ease;
}

.skills-container .skills-box:hover {
  border-color: #a63f43;
  transform: scale(1.02)
}
.skills-box i {
  font-size: 5rem;
  color: var(--alpha-text-color);
}

.skills-box h3 {
  font-family: "DM Serif Display", serif;
  font-style: normal;
  font-size: 2.2rem;
  font-weight: bolder;
  margin: .1rem 0 .5rem;
}

.skills-box p {
  font-size: 1.2rem;
  line-height: 1.8rem;
  margin: 1.3rem 0 2rem;
}

.obsessions {
  background: #20223a
}

.obsessions h2 {
  margin-bottom: 4rem;
}

.obsessions-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: center;
  gap: 2.5rem;
}

.obsessions-container .obsessions-box {
  position: relative;
  border-radius: 2rem;
  box-shadow: 0 0 1rem white;
  overflow: hidden;
  display: flex;
  }