/* ------------------------ COLOR VARIABLES AND FONTS ------------------------ */
:root {
  --white: #dce0d9;
  --pink: #ff2e74;
  --purple: #31081f; 
  --red: #6b0f1a;
  --lightpurple: #54428e;
}

@font-face {
  font-family: roboto-mono;
  src: url(RobotoMono-VariableFont_wght.ttf);
}

body {
  background-color: var(--white);
  font-family: roboto-mono;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
/* ------------------------ HTML AND BODY DESIGN ------------------------ */
/* --- images --- */
img {
  border-radius: 20%;
  width: 200px;
}

/* --- button --- */
button {
  background-color: var(--pink);
  color: var(--white);
  border: none;
  border-radius: 15px;
  font-size: 20px;
  padding: 10px;
  width: 30%;
  overflow: visible;
}

button:hover {
  background-color: var(--lightpurple);
  color: var(--white);
}

/* --- text --- */
.h1 {
  font-size: 36px;
  font-weight: bold;
}

.h3 {
  font-size: 26px;
  font-weight: bold;
}


/* --- link color attributes --- */
a {
  color: var(--pink);
  text-decoration: none;
}

/* --- emphasis --- */
i {
  color: var(--pink);
}

mark {
  background-color: var(--pink);
  color: var(--white);
}

.pink {
  color: var(--pink);
}

.red {
  color: var(--red);
}

.purple {
  color: var(--purple);
}

.lightpurple {
  color: var(--lightpurple);
}

/* ------------------------ GRID LAYOUT ------------------------ */

.grid-container {
  display: grid;
  grid-template-areas:
    "back back back back"
    "icon title title title"
    "links links links links"
    "infoL infoL infoR infoR"
    "xinfo xinfo xinfo xinfo"
    "images images images images"
    "more more more more"
    "more2 more2 more2 more2"
    "more3 more3 more3 more3";
}

.grid-container > div {
  padding: 15px;
}

/* --- G1 // back --- */
.g1 {
  grid-area: back;
}

/* --- G2 // icon --- */
.g2 {
  grid-area: icon;
  text-align: center;
}

/* --- G3 // title --- */
.g3 {
  grid-area: title;
}

/* --- G4 // links --- */
.g4 {
  grid-area: links;
  text-align: center;
  border: 1px solid var(--pink);
  border-radius: 20px;
}

/* --- G5 // left info --- */
.g5 {
  grid-area: infoL;
}

/* --- G6 // right info --- */
.g6 {
  grid-area: infoR;
  text-align: right;
}

/* --- G7 // about/extra info --- */
.g7 {
  grid-area: xinfo;
  text-align: left;
}

/* --- G8 // images --- */
.g8 {
  grid-area: images;
}

/* --- G9 // more 1 --- */
.g9 {
  grid-area: more;
}

/* --- G10 // more 2 --- */
.g10 {
  grid-area: more2;
  border: 2px solid var(--pink);
  border-radius: 20px;
}

/* SPECIAL --- G11 // CREDITS --- */
.g11 {
  grid-area: more3;
}



/* ------------------------ OTHER CLASSES ------------------------ */
.links {
  padding: 5px;
  margin: 20px;
  text-decoration: underline;
  color: var(--pink)
}

.previewcontainer {
  text-align: center;
}

.previewimg {
  padding: 3px;
  width: 350px;
  border-radius: 10px;
}

.wrapper {
  width: 100%;
  overflow: hidden;
  margin: 20px;
}

.square-pink {
  height: 160px;
  width: 160px;
  padding: 3px;
  border-radius: 20%;
  float: left;
  background-color: var(--pink);
}

.square-red {
  height: 160px;
  width: 160px;
  padding: 3px;
  border-radius: 20%;
  float: left;
  background-color: var(--red);
}

.square-purple {
  height: 160px;
  width: 160px;
  padding: 3px;
  border-radius: 20%;
  float: left;
  background-color: var(--purple);
}

.square-lightpurple {
  height: 160px;
  width: 160px;
  padding: 3px;
  border-radius: 20%;
  float: left;
  background-color: var(--lightpurple);
}

.column {
  margin: 0px 10px 0px;
}

.credits {
  text-align: center;
  font-size: 11px;
}

.stamp {
  height: auto;
  width: auto;
  margin: 10px 13px 10px;
  border-radius: 0%;
}

.bbutton {
  height: auto;
  width: auto;
  border-radius: 0%;
  margin: 0px 0px -10px;
}

.buttons {
  height: auto;
  width: auto;
  border-radius: 0%;
  margin: 10px;
}

.project-buttons {
  height: 159px;
  width: 251px;
  margin: 10px;
  padding: 5px;
  border-radius: 10px;
  border: 2px solid var(--pink);
}

.normal-img {
  width: 200px;
  border-radius: 0%;
  margin: 10px;
  border: 2px solid var(--pink);
  border-radius: 10px;
}

.icon-img {
  border-radius: 20%;
  width: 200px;
}