* {
  font-family: 'Roboto', sans-serif;
  margin: 1;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  /*border: none;*/
  text-transform: none;
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  src: url(robotolight.ttf);
}

@font-face {
  font-family: Fashion;
  font-style: normal;
  font-weight: normal;
  src: url(fashionfetishlight.ttf);
}



root {
  --main-radius: 5px;
  --main-padding: 5px;
}
:root{

  --white: #fefefe;
  --dark-gray: #ababab;
  --light-gray: #808080;
  --dark-bg: #020021;
  --light-bg: #e3e2ff;
  --yellow: #caa006;
  --orange: #ff8400;
}

html, body { 
  margin:0; 
  padding:0; 
  height: 1lh; 
}

body {
  font-family: "Roboto", sans-serif;
  background: linear-gradient(-150deg, #ffffff 0%, #e3e2ff 100%);
}

html::-webkit-scrollbar {
  width: 1rem;
}

html::-webkit-scrollbar-track {
  background: var(--white);
}

html::-webkit-scrollbar-thumb {
  background: var(--light-bg);
}

.clickable-img {
    cursor: pointer;
  }

.container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.05fr 1fr 1fr 1fr;
  grid-template-areas:
    "topbuffer topbuffer topbuffer topbuffer topbuffer"
    "content1 content2 content3 content4 content5"
    "content6 content7 content8 content9 content10"
    "botbuffer botbuffer botbuffer botbuffer botbuffer";
  grid-gap: 2rem;
  color: #004d40;
  text-align: center;
  background: linear-gradient(-150deg, #ffffff 0%, #e3e2ff 100%);
  justify-content: center;
  align-items: center;
}

.overlay-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

.popup-box {
    background: #fff;
    padding: 24px;
    border-radius: 48px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
    width: 50%;
    height: 90%;
    text-align: center;
    opacity: 1;
}

#popupImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#topbuffer {
  grid-area: topbuffer;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content1 {
  grid-area: content1;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content2 {
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content3 {
  grid-area: content3;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content4 {
  grid-area: content4;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content5 {
  grid-area: content5;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content6 {
  grid-area: content6;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content7 {
  grid-area: content7;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content8 {
  grid-area: content8;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content9 {
  grid-area: content9;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content10 {
  grid-area: content10;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#botbuffer {
  grid-area: botbuffer;
  padding-bottom: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
}

a {
  color: var(--orange);
  text-decoration: none;
  transition: 0.6s linear;
}

a:hover {
  color: var(--yellow);
}