body {
  margin:30px;
  padding:20px;
  background-image: url("berri.png");
}

@font-face {
    font-family: "Courier Prime";
    src: URL('Courier Prime/Courier Prime.ttf') format('truetype');
}

@font-face {
    font-family: 'New Romantics';
    src: URL("new_romantics/ROMANTIC.TTF") format("truetype");
}

@font-face {
    font-family: 'Starborn';
  src: URL('starborn/Starborn.ttf') format('truetype'),
       URL('starborn/Starborn.otf') format('opentype');
}

@font-face {
    font-family: 'Billo';
  src: URL('billo/BILLO___.TTF') format('truetype');
}

@font-face {
    font-family: 'Gimmicky';
  src: URL('gimmicky/GIMMICKY.TTF') format('truetype');
}

@font-face {
  font-family: 'Silence';
  src: URL('tf-silence-demo/TF%20Silence%20DEMO.ttf') format('truetype'),
      url("tf-silence-demo/TF%20Silence%20DEMO.otf") format("opentype");
}

p {
  font-family: 'Courier Prime';
  color: #3da1aa;
}

p1 {
  font-family: 'Billo';
  color: #3da1aa;
} 

p2 {
  font-family: 'Gimmicky';
  color: #3da1aa;
}

p3 {
  font-family: 'Silence';
  color: #3da1aa;
}

h1 {
  font-family: 'New Romantics';
  color: #3da1aa;
  letter-spacing: 2px;
}

h2 {
  font-family: 'Starborn';
  color: #3da1aa;
}

h4 {
  font-family: 'Starborn';
  font-size: 14px;
  color: #3da1aa;
}

a:link {
  color: #3da1aa;
  font-weight: bold;
}

a:visited {
  color: #6FC6CC;
  font-weight: bold;
}

a:hover {
  color: #28738A;
  font-weight: bold;
}

a:active {
  color: blue;
  font-weight: bold;
}

::selection {
  background: #86876F; /* WebKit/Blink Browsers */
  color: #255D63;
}

::-moz-selection {
  background: #86876F; /* Gecko Browsers */
  color: #255D63;
}

.date {
  text-decoration-line: underline;
  text-decoration-style: double;
  font-weight: bold;
}

.heading-center {
  text-align: center;
}

.divider { 
  margin:5px;
  margin-bottom: 8px;
  padding-left: 5px;
  
  text-shadow: 0 0 3px #3da1aa;
  text-align: center;
  
  color:#1d2830;
  
  border-radius: 50px;
  border:solid 2px #6EB9C0;
  
  background: linear-gradient(180deg,
                              #236377 0%, 
                              #5193a0 45%, 
                              #236377 47%, 
                              #236377 60%, 
                              #6EB9C0 100%);  
  
  filter:drop-shadow(0 0.5px 0 #6EB9C0) 
         drop-shadow(0 0.5px 0 #6EB9C0) 
         drop-shadow(0 0.5px 0.5px #6EB9C0) 
         drop-shadow(0.5px 0.5px 1px #6EB9C0)
         drop-shadow(-0.5px 0.5px 0 #236377) 
         drop-shadow(0 0.5px 0 #236377) 
         drop-shadow(0 0.5px 0 #236377) ;
}

.scroll-main {
  border:5px solid #3da1aa;
  border-radius: 15px;
  overflow:auto; 
  padding:5px;
  
  background-image: url("berri.png");
  
  width: 700px;
  max-width: fit-content;
  height: 150px;
  
  margin-left: auto;
  margin-right: auto;
}

.scroll-side {
  border:5px solid #3da1aa;
  border-radius: 15px;
  overflow:auto; 
  padding:5px;
  
  background-image: url("berri.png");
  
  min-width: fit-content;
  min-height: 84px; 
  max-height: 248px;
  
  margin-left: auto;
  margin-right: auto;
}
  
.main {
  padding: 20px;
}  

.sidebar {
  border: 3px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 3px solid;
  outline-color: #1E3F50;
}

.container1 {
  border: 6px solid;
  border-color: #1e3f50;
  border-radius: 35px;
  
  margin: auto;

  
  z-index: 1;
  
  background-image: url("berri.png");
}

.container {
  border: 3px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 3px solid;
  outline-color: #1E3F50;
  
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 90px;
  
  padding: 25px;
  width: 1125px;
  
  background-color: #1d2b35;
}

.container {
  display: grid;
  min-height: 100vh;
  gap: 25px;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas: 
    "hd hd hd"
    "sd-l main sd-r"
    "ft ft ft";
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "hd"
      "sd-l"
      "main"
      "sd-r"
      "ft";
  }
}

header { 
  grid-area: hd; 
  background-image: url("banny.png");
  
  padding: 10px; 
  
  border: 4px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 4px solid;
  outline-color: #1E3F50;
  
  height: 105px;
}

main { 
  grid-area: main; 
  margin-top: 55px;
  /* background-image: url("banny.png");
  
  padding: 10px; 
  
  border: 6px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 6px solid;
  outline-color: #1d2830; */
}

.sidebar-l { 
  grid-area: sd-l; 
  background-image: url("banny.png");
  text-wrap: hi;
  
  padding: 10px; 
  margin-top: 55px;
  
  border: 4px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 4px solid;
  outline-color: #1E3F50;
}

.sidebar-r { 
  grid-area: sd-r; 
  background-image: url("banny.png");
  
  padding: 10px; 
  margin-top: 55px;
  
  border: 4px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 4px solid;
  outline-color: #1E3F50;
}

footer { 
  grid-area: ft;
  background-image: url("banny.png");
  
  padding: 10px; 
  
  border: 4px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 4px solid;
  outline-color: #1E3F50;
  
  height: 70px;
}

.torso {
  display: flex;
  
  flex-direction: column;
  flex-wrap: nowrap;
  
  justify-content: space-between;
  
  align-items: center;
  align-content: stretch;
  
  gap: 45px;
}

.item-divider {
  align-self: center;
  flex-shrink: 1;
  flex-basis: 358;
}  

.item-1 {
  align-self: center;
  flex-shrink: 1;
  flex-basis: 358;
  
  background-image: url("banny.png");
  
  padding: 10px; 
  
  border: 4px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 4px solid;
  outline-color: #1E3F50;
}

.item-2 {
  align-self: center;
  flex-shrink: 1;
  flex-basis: 358;
  
  background-image: url("banny.png");
  
  padding: 10px; 
  
  border: 4px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 4px solid;
  outline-color: #1E3F50;
}

.item-3 {
  align-self: center;
  flex-shrink: 1;
  flex-basis: 358;
  
  background-image: url("banny.png");
  
  padding: 10px; 
  
  border: 4px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 4px solid;
  outline-color: #1E3F50;
}

.item-4 {
  align-self: center;
  flex-shrink: 1;
  flex-basis: 358;
  
  background-image: url("banny.png");
  
  padding: 10px; 
  
  border: 4px ridge;
  border-color: #3da1aa;
  border-radius: 15px;
  
  outline: 4px solid;
  outline-color: #1E3F50;
}

.bunting {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  overflow:hidden;
  /* margin-top:30px; */
  z-index:2;
}