@font-face {
  font-family: power;
  src: url(../assets/power\ clear.ttf);
}

:root {
    --bgcolor:#F8F8F8;
    --text:#283028;
    --accent:#70b038;
}

body {
    font-family:"power";
    background-image:url(../assets/HGSS_Ilex_Forest-Day.png);
    background-size:cover;
    background-attachment: fixed;
    image-rendering: pixelated;
    color:var(--text);
    font-size:1.2rem;
}

.maindiv {
    max-width:800px;
    padding:30px;
    margin:2vh auto;
    border-radius:20px;
    border-image: url(../assets/oureen.png) 16 / 15px / 2px stretch;
    filter: drop-shadow(0 0 5px rgba(119, 119, 153, 0.5));
    background-color:var(--bgcolor);
    position:relative;
}

.titletext {
    font-weight:bold;
    font-style: italic;
}

hr {
    border:2px solid var(--accent);
    opacity:100%;
    margin:10px 0px;
}

h2 {
    font-weight: bold;
}

.team {
    width:100%;
    display:flex;
    gap:15px;
    justify-content: center;
    flex-wrap:wrap;
}

.mon {
    width:200px;
    height:200px;
    text-align: center;
    border:5px solid var(--accent);
    border-radius:6px;
    background-color: #fff;
    outline:3px solid var(--text);
}

.mon img {
    width:100%;
    filter: drop-shadow(0px -0px 2px gray);
}

.desc {
    width:400px;
    height:200px;
    border:5px solid var(--accent);
    border-radius:6px;
    background-color: #fff;
    outline:3px solid var(--text);
    padding:10px;
}