@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");

body {
  margin: 0;
  padding: 0;
}

.floats {
  color: #d9c59f; /* makes dark theme */
  background-color: #877c7c;
  background-image: url("../images/background/droplets_mirror.png");
  background-blend-mode: multiply;
  background-size: 100%;
  background-repeat: repeat-y;
  /* the bottom of the page not having background is intended. there will be different sections with different background. (for full page background, move it to body element) */

  overflow: hidden;
  padding: 10px;
}

.floats > h2 > p {
  text-align: center;
  border: solid 5px blue;
  border-radius: 10px;
  width: max-content;
  margin: auto;
  padding: 5px;
  background-color: #c71818;
}

p {
  font-size: 1.5rem;
}

.lebron {
  width: 300px;
  height: 300px;
  box-shadow: 0 0 20px 20px #fff;
  border-radius: 20px;
}

.blackAvatar {
  width: 300px;
  height: 300px;
  box-shadow: 0 0 20px 20px #665445;
  border-radius: 20px;
}

.blueText {
  color: rgb(56, 103, 255);
  text-decoration: underline rgb(56, 103, 255);
}

.columns {
  overflow: hidden;
  padding: 10px;

  font-family: "Archivo Black", sans-serif;
  background-image: url("../images/background/clouds_blue.jpg");
  background-repeat: repeat-y;
  background-size: 100%;
}

.columns h2 {
  text-align: center;
  font-size: 3em;
  margin: 1rem 0;
}

.columnsMain {
  columns: 3 300px; /* 3 columns with minimum of 300px each if not, it will lower column number */
}

.columnImage {
  width: 80%;
  display: block;
  margin: auto;
  border-radius: 20px;
}

.floatLeft {
  float: left;
  margin: 2em 2em 2em 0em;
}

.floatRight {
  float: right;
  margin: 2em 0em 2em 2em;
}

.clearBoth {
  clear: both; /* makes the text not wrap around float image. */
}

.clearLeft {
  clear: left; /* makes the text not wrap around float images on the left */
}

.clearRight {
  clear: right; /* makes the text not wrap around float images on the right */
}