body{margin:0;font-family: 'Montserrat', sans-serif;background-color:#404040;color:#fff;}
a{text-decoration:none;color:white;}
.navbar{padding:3px;display: grid;gap: 5px;background-color: #000;grid-template-columns: repeat(3, 1fr);}
.navbar > a {background-color:#000;border: 1px solid black;text-align: center;font-size: 1rem;padding:0.5rem;}
.navbar > a:hover {background-color:#666;}
.mainframe {margin:2rem;}
.noticebar {padding:3px;text-align:center;text-decoration:underline;}
.box{background-color:#666;padding:10px;border:1px solid black;}
.button {padding:0.5rem;border:1px solid black}
.black {color:black;}

.db {position:absolute;}
.f1 {width:20%;}
.f2 {width:70%;right:2rem;;margin-bottom:2rem;}
.f3 {width:20%;right:2rem;}
.f4 {width:70%;margin-bottom:2rem;}
.f5 {width:45%;}
.f6 {width:45%;right:2rem;margin-bottom:2rem;}

.card {display:inline-block; width:200px; margin-bottom:2rem;overflow:hidden;}
.cardimg {width:200px;height:200px;margin:0;padding:0;border-bottom:1px solid black;}
.cardimg {width:200px;height:200px;margin:0;padding:0;}

.bg-blue {background-color:#55f;}
.bg-red {background-color:#f55;}
.bg-green {background-color:#5f5;}
.bg-yellow {background-color:#ff5;}
.bg-pink {background-color:#5f5;}
.bg-cyan {background-color:#5ff;}