@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");



body {

background-color: #303030;

background-image: url("/bg2.gif");

background-size: cover;

margin: 0;

font-family: 'Roboto', sans-serif;

text-align: left;

}



.simple-panel {

/* Define the size */

width: 300px;

height: 150px;



/* Give it a boundary */
border: 2px solid gray; /* A solid, dark border */

background-color: gray; /* A light background color */



 /* Center it and add space (optional) */

 margin: 20px auto;

/* Add padding for content inside */

padding: 15px;

}



header {

background:#333;

color:red;

padding:16px;

}



header h1 {

margin:0;
font-size:24px;

}



header nav a {

color:red;
 margin-right:8px;

text-decoration:none;

}



header nav a:hover {

text-decoration:underline;

}

.image-container {
  position: relative;
  display: inline-block;        /* fits content */
  margin: 20px auto;            /* centers container horizontally */
  border: 5px solid purple;    /* single border */
  padding: 0;                   /* remove extra padding */
  box-sizing: border-box;       /* includes border in size */
}

.small-img {
  width: 300px;                 /* fixed width */
  height: auto;
  display: block;
}

.image-text {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: red;
  font-size: 24px;
  font-weight: bold;
}