@font-face {
  font-family: "icecream";
  src: url("myfonts/icecream.otf") format('opentype'); 
}

@font-face {
  font-family: "titles";
  src: url("myfonts/titles.otf") format('opentype'); 
}

h1, h2, h3 {
    font-family: "titles";
}
p, li, a, figure {
    font-family: "icecream";

}

a{
    color:#500f6d;
    text-decoration: none;
}

a:hover {
  color: #0b772b;
}


.container {
    display: grid;
    align-content: center;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 40px;
    padding: 20px;
    margin: auto;
}

.nav {
    grid-column: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 1;
border-width: 7px;
border-style: solid; 
border-image: url("https://i.imgur.com/3pzGJd7.png") 7 fill round;
height:auto; border-radius:10px;
    display: flex; 
  justify-content: space-between; 
  align-items: center;
    padding: 10px;
}

.leftbar {
    grid-row: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 2;
    border-width: 7px;
    padding: 10px;
border-style: solid; 
border-image: url("https://i.imgur.com/3pzGJd7.png") 7 fill round;
    text-align: center;
}

.leftalign {
    text-align-last: left;
}

.rightbar {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
    grid-row-start: 2;
   border-width: 7px;
    padding: 10px;
    text-align: center;
border-style: solid; 
border-image: url("https://i.imgur.com/3pzGJd7.png") 7 fill round;

}

.main {
    grid-column: span 3 / span 3;
    grid-row: span 4 / span 4;
    grid-column-start: 2;
    grid-row-start: 2;
    border-width: 7px;
border-style: solid; 
border-image: url("https://i.imgur.com/3pzGJd7.png") 7 fill round;
height:auto;border-radius:10px;
    padding: 10px;
    text-align-last: center;
}

.scrollbox-inner::-webkit-scrollbar {
  width: 10px;
  background: #68aa69;
}
.scrollbox-inner::-webkit-scrollbar-thumb {
  background: #684c2c;
  border-radius: 0px;
}
.scrollbox-inner::-webkit-scrollbar-track {
  background: #68aa69;
  border-radius: 0px;
}

 

.zoom {

transition: transform .35s;

}

.zoom:hover {

transform: scale(1.04);

}

.popbig {

transition: transform .35s;

}

.popbig:hover {

transform: scale(2);

}