@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=El+Messiri:wght@400;600&display=swap');

body { background:#F5F5F5; font-family:'Trebuchet MS',arial,sans-serif; }
a { text-decoration:none;color:#222; }

#container { width:1000px;max-width:100%;margin:25px auto 0;font-size:11px;line-height:1.7;color:#222; }

h1 { font-family:'Cinzel',serif; font-size:2rem; text-align:center; }

.container-house { margin:0 0 50px; }

.header { font-family:'Cinzel',serif; height:40px;padding:10px;background:#F5F5F5;cursor:pointer;display:flex;border-radius:20px; }
.header-line { width:100%; height:20px; border-bottom:1px solid #BBB; text-align:center; }
.header-text { display:inline-block; margin:0; background-color:#F5F5F5; padding:0 10px; font-size:24px; font-weight:600; letter-spacing:3px; text-transform:uppercase; }

.container-description { padding:0 2rem 2rem; font-family:arial,sans-serif; font-size:1.2em; text-align:justify; }
.container-description .image { max-width:40%; background-color:#FFF; border:1px solid #CCC; margin:0 20px 10px 0; line-height:1; padding:10px; float:left; }
.container-description .image.right { margin:0 0 10px 20px; float:right; }
.container-description .image img { width:250px; max-width:100%; line-height:1; }

.container-floor .floor-name { font-family:'Cinzel',serif; font-size:2em; text-align:center; }
.container-dorms { display:flex; flex-wrap:wrap; justify-content:center; align-content:center; }
.container-dorms .dorm { display:flex; width:300px; margin:10px; line-height:1; }
.container-dorms .dorm .room { width:100px; border:1px solid #CCC; }
.container-dorms .dorm .room .student { display:flex;align-items:center;justify-content:center;text-align:center; padding:10px; min-height:4em; text-shadow:0.5px 0.5px 1px #FFF; text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0 2px #FFF; }
.container-dorms .dorm .common { position:relative; display:flex;align-items:center;justify-content:center;text-align:center; width:50px; padding:10px; background:#DDD; border-top:1px solid #CCC;border-bottom:1px solid #CCC; font-style:italic; }
.container-dorms .dorm .common::before { content:""; width:4px; height:26px; background:#BBB; position:absolute; left:-2px; }
.container-dorms .dorm .common::after { content:""; width:4px; height:26px; background:#BBB; position:absolute; right:-2px; }

.container-characters { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; text-align:center; padding:0 20px; }
.character { position:relative; width:calc((100% / 4) - 30px); min-width:130px; margin:45px 10px 10px; padding:0 10px 10px 10px; border:1px solid #ddd; box-sizing:border-box; }

.container-icon { position:relative; padding:0 10px; margin-top:-45px; }
.icon { width:80px;height:80px;background:#fff;border:1px solid #ccc;padding:5px;box-shadow:2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:100%; }
.container-icon a { position:relative; }

.principle { letter-spacing:5px;font-size:10px;text-transform:uppercase; }
.pb { display:block;border-top:1px solid #ddd;margin:5px 0 0 0;padding:5px 0 0 0; }

.badge {
  font-family:'Cinzel',serif;
  position:absolute; top:-20px; right:-4px; height:24px; width:24px; line-height:24px; border-radius:50%; border:1px solid #CCC; font-size:10px; font-weight:bold;
  background:#FFF; background:radial-gradient(circle, #FFF 45%, #CCC 100%);
  }

.name { font-family:'El Messiri',sans-serif; min-width:80px; text-align:center; font-size:clamp(15px,4vw,18px); font-weight:bold; margin:2px 0 0; line-height:1; } /*  word-break:break-word; */