| body{ |
| color: cornsilk; |
| background-color: black; |
| font-size: x-large; |
| margin-left: 0.5em; |
| margin-right: 0.5em; |
| } |
|
|
| header{ |
| color: khaki; |
| font-size: 2em; |
| text-align: justify; |
| } |
| .Heading{ |
| color: coral; |
| font: 4em sans-serif; |
| font-style: italic; |
| text-align: center; |
| } |
| strong{ |
| color: burlywood; |
| font-family: monospace; |
| text-decoration: underline; |
| font-size: xx-large; |
| } |
| .Description, main{ |
| font-size: 30px; |
| text-indent: 1em; |
| } |
|
|
| .gallery{ |
|
|
| |
| opacity: 80%; |
| outline: auto; |
| border-radius: 16px; |
| cursor: pointer; |
| width: 100%; |
| transition: opacity 0.3s ease; |
|
|
|
|
| display: block; |
| margin-bottom: 16px; |
| } |
|
|
| .image-container{ |
| columns: 250px; |
|
|
| margin-right: 32px; |
| margin-left: 32px; |
| } |
|
|
| img:hover { |
| opacity: 1; |
|
|
| } |
|
|
| .circle-container { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
|
|
| .webp { |
| display: block; |
| width: 300px; |
| margin-left: -60px; |
| border-radius: 150px; |
| outline: auto; |
| } |
|
|
| footer{ |
| background-color:coral; |
| text-align: center; |
| font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; |
| font-style: italic; |
| outline: auto; |
| border-radius: 10px; |
| } |
|
|
| iframe{ |
| background-color: cadetblue; |
| border-radius: 20px; |
| width: 100%; |
| height: 100vh; |
| border: none; |
| } |
|
|
| li{ |
| word-wrap: break-word; |
| |
| } |
|
|
| #last{ |
| padding-top: 1em; |
| } |
|
|
| |
|
|
| |
| @media (max-width: 540px) { |
| |
|
|
| .webp:nth-child(3) { |
| margin-left: 0; |
| } |
| |
| .webp.first { |
| display: none; |
| } |
| .webp.second { |
| display: none; |
| } |
| .webp.third { |
| display: block; |
| } |
| } |
|
|
| |
| @media (min-width: 541px) and (max-width: 768px) { |
| |
|
|
| .webp:nth-child(2) { |
| margin-left: 0; |
| } |
| |
| .webp.first { |
| display: none; |
| } |
| .webp.second { |
| display: block; |
| } |
| .webp.third { |
| display: block; |
| } |
| } |
|
|
| |
| @media (min-width: 769px) { |
| |
|
|
| .webp:nth-child(1) { |
| margin-left: 0; |
| } |
| |
|
|
| .webp.first { |
| display: block; |
| } |
| .webp.second { |
| display: block; |
| } |
| .webp.third { |
| display: block; |
| } |
| } |
|
|
|
|
|
|
|
|
