@font-face {
    font-family: Dyslexic;
    src: url(../OpenDyslexic-Regular.otf);
}

body {
    background-image: url('../images/bg.png');
    background-size: 100px 100px;
    font-family: Dyslexic;
    font-size: 10.5px;
    display: flex;
    justify-content: center;
    margin-left: 720px;
    margin-right: 720px;
    }

.back {
    position:absolute;
    z-index: 1;
    top: 30px;
    margin-left: -1050px;
}
.border {
    position: absolute;
    margin-top: 80px;
    margin-left: 20px;
}
.bg {
    top: 150px;
    width: 800px;
    height: 650px;
}
div.scroll {
    position: absolute;
    scrollbar-width: thin;
    top: 155px;
    width: 990px;
    height: 650px;
    overflow-x: hidden;
    overflow-y: auto;
    
}
.warning {
    margin-top: 100px;
    margin-left: 191px;
    margin-right: 182px;
    margin-bottom: 10px;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}
.box {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 200px 400px;
    grid-gap: 10px;
    height: 300px;
    width: 600px;
}
.portrait {
    height: 300px;
    width: 200px;
    border-radius: 2px;
    
}
.infobox {
    border-radius: 2px;
    display: grid;
    grid-template-rows: 40px 90px 50px;
}
.title {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    padding-left: 10px;
    padding-top: 5px;
    text-align: center;
}
.stats {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr;
    padding: 10px;
    grid-gap: 15px
}
.stat-text {
    text-align: right;
}
.bio {
    padding-top:8px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    text-align: justify;

}
.bottom-grid {
    display:grid;
    grid-template-columns: 298px 68px 68px 68px 68px;
    grid-gap: 10px;
    height: 68px;
}
.quote-box {
    border-radius: 2px;
    padding-top:10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom:10px;
    max-height: 68px;
    font-size:8px;
    text-align: justify;
}
.mood-pic {
    margin-top: 1px;
    height: 68px;
    width: 68px;
    object-fit: cover;
}

.gallery {
    margin-top:100px;
    margin-left: 65px;
    margin-right: 100px;
    margin-bottom: 100px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px
}

.gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
}

.imageWrapper {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    display:none;
    top: 0;
    left: 0;
    z-index: 100;
    justify-content: center;
}
.imageWrapper img {
    max-height: 100%;
    margin: 50px;
}
.imageWrapper span {
    width:100%;
    height:100%;
    position:fixed;
}

.reportWrapper {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    display:none;
    top: 0;
    left: 0;
    z-index: 100;
    justify-content: center;
}
.reportWrapper img {
    height: 500px;
    margin: 50px;
}
.reportWrapper span {
    width:100%;
    height:100%;
    position:fixed;
}

.report {
    position: fixed;
    border-style: double;
    border-width: 6px;
    top: 70px;
    width: 600px;
    height: 345px;
    padding: 50px;
    color:brown;
}

.grades {
    display: grid;
    grid-template-columns: 1fr;
    font-size:medium;
    margin-top: 20px;
    margin-left:auto;
    margin-right:auto;
    width: 400px;
    grid-gap: 20px;
}

.row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    border-style: dotted;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    line-height: 20px;
}

.signature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    line-height: 25px;
    margin-left: -20px;
    margin-top: 50px;
    margin-right: -20px;
    border-style: solid;
    border-width: 2px;
    border-top: 0;
    border-right: 0;
    border-left: 0;
}