CM1-E DESIGN REFERENCES

<style>

body {
margin: 0px;
padding: 0;
font-family: Google Sans, Noto, Roboto, Helvetica Neue, sans-serif;
/*color: #244376;*/
color: black
}

#blankcard {
margin: 1em; 
display: flex; 
justify-content: flex-start; 
max-width: 400px; 
min-height: 300px;  
overflow: hidden;
}


#card {
margin: 1em;
display: flex;
/*flex-direction: column;*/
 justify-content: flex-start;
max-width: 400px;
min-height: 300px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
overflow: hidden;
}

model-viewer {
width: 100%;
height: 300px;
/*background-color: #F4F5F7;*/
/*background-color: #D0D6CE;*/
 --poster-color: #ffffff00;
}

 .attribution {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 1em;
}

.attribution h1 {
margin: 0 0 0.25em;
}

.attribution img {
opacity: 0.5;
height: 2em;
}

.attribution .cc {
flex-shrink: 0;
text-decoration: none;
}

/***** scroll export button ********/
button[data-macro-name="scroll-exportbutton"] { 
background: #D0D6CE;
border-radius: 10px;
}

/******* panel *******/

.panel, #content .panel {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}  


footer {
display: flex;
flex-direction: column;
max-width: 600px;
margin: auto;
text-align: center;
font-style: italic;
line-height: 1.5em;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}


/* Generic Link effects for the entire page - includes sidebar */
a:link {
  color: black;
  /*background-color: transparent;*/
  text-decoration: none;
}

a:visited {
  /*color: #172B4D;*/
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: black;
  background-color: transparent;
  text-decoration: none;
}



</style>

<!-- Import model-viewer -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> 
<script nomodule="" src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>