/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* the navbar-brand has two <span> children. The first contains the 'C'. The second contains the 'utespot' */
/* target the siblings of the first span in .navbar-brand */
.navbar-brand span + span {
	margin-left: 5px;
	/* we change the letter spacing to negative, so that the letters bunch up on top of each other. We use 'em' so that the spacing is relative to the element's font-size */
	letter-spacing: -0.52em;
	/* make it disappear */
	opacity: 0;
	/* we want it to animate -- just means move. when a css attribute changes, it will 'tween' between its old value and its new */
	/* we could target the transition to just work on opacity and letter-spacing, but 'all' is quick here*/
	transition: all 0.3s ease-out;
}

.navbar-brand:hover span + span {
	/* on hover, we spread the letters out again */
	/* since we set the transition (animate) to apply to all attributes, this change in letter-spacing will be animated (from its old value of -0.52em to its new of 0.1em) */
	letter-spacing: 0.1em;
	/* make it visible -- the transition:all will also apply to the opacity, so the opacity will also animate between its old value (0 - transparent) and its new (1 - opaque)*/
	opacity: 1;
}

element::after {
	/* ::before and ::after are pseudo-elements, and require a content attribute to exist. Often, we make it empty, because we are using these pseudo-elements to do funky little visual UI tricks, that have no content within. Also, mixing content and style feels wrong. */
	content: "";
	/* border on the bottom */
	border-bottom: 1px solid black;

	/* All the following is positioning stuff. It is absolute, so it is out of the flow, and we can put it wherever we want. We are putting it at the bottom of its (relative) parent, and we position its left-side 50% across the width of its parent (from the left). */
	position: absolute;
	width: 60%;
	bottom: 0;
	left: 50%;
	/* THEN we use the transform:translate to move it back to the left, but this time, just 50% of its OWN width. The effect of moving it right 50% of its parent, and left 50% of its own width, centers it in its parent. magic! */
	transform: translate(-50%, 0);
}

img {
	transition: all ease 500ms;
}

img:hover {
	transform: scale(1.25);
	opacity: 0.7;
}

//SIMPLE SANS SERIF FONT
body {
 font-family: 'Lato', sans-serif;
 font-weight: 300;
}
//https://fonts.google.com/specimen/Lato?query=lato
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Prata&display=swap" rel="stylesheet"> 

// CLASSIC SERIF VERY DIGNIFIED
h1, h2, h3, h4, h5, h6 {
 font-family: 'Prata', serif;
}
//https://fonts.google.com/specimen/Prata
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet">