In the style sheet, we are going to decide on the appearance of our web page. Since our main goal is to show the AR, we will keep it simple for now. The Glitch style.css file will already have some code in it. Let's modify this file and adapt it to our needs. Follow these steps to do so:

1. We are going to leave the body brackets as they are:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

Here, we specify the font we are going to use for the web page and the margins of the body element.

2. Next, we're going to modify the h1 title element:

h1 {
 text-align: center;
 color: #000000;
 font-style: bold;
}

Now, the title will be centered, black, and in bold.

3. Let's add some class elements:

.box{
  max-width: 600px;
  margin: 4em auto;
  border-radius: 8px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
  text-align: center;
  overflow: hidden;
}

This class will encapsulate the 3D models when they are displayed over the web page (not in AR). They will appear inside a box, with rounded borders and a soft shadow on it. The text we will add will be centered inside the box and the overflow: hidden parameter will prevent the content from overflowing from the box.

4. Now, we'll add another class for the CC BY message of the models, which is required for these types of models:

.cc{
  display: flex;
  justify-content: flex-start;
  margin: 0.5em;
  font-style: italic;
}

Here, we are locating the content on the left-hand side and with italic text.

5. We'll also change the appearance of the cc class' images:

.cc img{
 height: 1em;
 opacity: 0.6;
}

With these two lines, we are selecting the height of the images inside this class and making them a little bit transparent.

6. Finally, we are going to modify the <model-viewer> Component's style:

model-viewer {
  width: 100%;
  height: 580px;
}

With this, we will make the model viewer take the width of the container box and set its height.

Now that the style sheet is ready, we can create our page.