body, html {
height: 100%;
margin: 0;
padding: 0;
}

.site-wrapper {
max-width: 1080px;
margin: 40px auto 0 auto;
background: #fff;
border-radius: 22px;
box-shadow: 0 2px 32px 0 rgba(0,0,0,0.09);
padding: 0 0 32px 0;
min-height: 700px;
}

header {
background: #007C41;
padding: 10px 0 5px 0;
border-bottom: 4px solid #F6C700;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
margin-bottom: 0;
}

.site-title {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
letter-spacing: 1px;
margin-bottom: 4px;
}
.site-subtitle {
font-size: 0.6rem;
color: #F6C700;
font-weight: 500;
margin-top: 2px;
margin-bottom: 0;
}

#main-content {
max-width: 100%;
margin: 0 auto;
padding: 5px;
background: none;
border-radius: 0;
box-shadow: none;
}

#network {
width: 100%;
height: 1000px;
/* border-radius: 12px;
border: 2px solid #007C41;
background: #f7f9fb;
margin: 0 auto 36px auto;
box-shadow: 0 2px 14px rgba(0,0,0,0.03);
position: relative;*/
}

#preview {
position: absolute;
top: 100px;
right: 24px;
width: 620px;
min-height: 360px;
z-index: 10;
border: 2px solid #007C41;
border-radius: 15px;
background: #fff;
box-shadow: 0 8px 32px rgba(0,124,65,0.12);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 18px 16px 18px;
font-family: inherit;
transition: box-shadow .2s;
}

#preview-label {
margin-bottom: 10px;
font-weight: bold;
font-size: 1.25em;
color: #007C41;
letter-spacing: .5px;
text-align: center;
}

#preview-img {
max-width: 96vw; 
max-height: 340px;  
display: none;
margin-bottom: 12px;
border-radius: 9px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
border: 1px solid #eee;
transition: max-width 0.18s, max-height 0.18s;
}

#preview-desc {
color: #444;
font-size: 1em;
text-align: center;
margin: 0 0 2px 0;
line-height: 1.55;
padding: 0 6px;
}

#preview-close {
position: absolute;
top: 6px;
right: 14px;
background: #F6C700;
border: none;
border-radius: 20px;
width: 25px;
height: 25px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background .15s;
color: #007C41;
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

#preview-close:hover {
background: #007C41;
color: #fff;
}

#preview-img:hover {
max-width: 700px;
max-height: 400px;
box-shadow: 0 6px 36px rgba(0,124,65,0.12);
transition: max-width 0.18s, max-height 0.18s, box-shadow 0.22s;
z-index: 10;
}
.ualberta-btn {
display: inline-block;
padding: 9px 30px;
margin-top: 12px;
font-size: 1.1em;
color: #fff;
background: #007C41;
border: none;
border-radius: 24px;
font-weight: 600;
letter-spacing: .5px;
transition: background .2s;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,124,65,0.11);
}

.ualberta-btn:hover {
background: #006230;
color: #F6C700;
}

@media (max-width: 900px) {
#main-content { padding: 8px; }
#network { height: 520px; }
#preview { width: 99vw; left: 1vw; right: auto; min-width: 0; }
#preview-img { max-width: 98vw; }
}
@media (max-width: 600px) {
header { padding: 16px 0 12px 0; }
.site-title { font-size: 1.5rem; }
#main-content { margin: 10px 0 0 0; padding: 0; }
#network { height: 340px; }
}
@media (min-width: 900px) {
#preview-img {
    max-width: 540px;
    max-height: 340px;
}
}