body{
    background-image:url("website pictures.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-color:#5f8de4;

    margin:0;
    padding:0;
    font-family:Georgia, serif;
    color:#111;
}

.frame{
    width:980px;
    height:980px;

    position:absolute;
    top:45px;
    left:50%;
    transform:translateX(-50%);

    background-image:url("Frame.png");
    background-size:100% 100%;
    background-repeat:no-repeat;

    padding:43px 38px 210px 38px;
    box-sizing:border-box;
}

.website{
    width:100%;
    height:100%;

    background:white;
    overflow:auto;

    border:1px solid #b8b8b8;
}

.banner{
    height:120px;
    background-image:url("Green top fav.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    justify-content:center;
    align-items:center;

    border-bottom:1px solid #c9c9c9;
}

.banner h1{
    background:rgba(255,255,255,.82);
    padding:8px 18px;
    margin:0;
    font-size:25px;
}

.navigation{
    display:flex;
    gap:28px;
    padding:9px 14px;

    background:#fafafa;
    border-bottom:1px solid #ccc;

    font-size:13px;
    font-weight:bold;
}

.navigation a{
    color:black;
    text-decoration:none;
}

.navigation a:hover{
    color:#0055d6;
    text-decoration:underline;
}

.main-layout{
    display:grid;
    grid-template-columns:155px 1fr 250px;
    gap:10px;

    padding:10px;
    background:#f8f8f8;
}

.profile-card{
    text-align:center;
    border:1px solid #8ca9c7;
    background:white;
    padding:8px;
    margin-bottom:10px;
}

.profile-card img{
    width:125px;
    height:125px;
    object-fit:cover;

    border:1px solid #aaa;
    background:white;
    padding:5px;
}

.profile-card h2{
    margin:6px 0 2px 0;
    font-size:22px;
}

.profile-card p{
    margin:3px 0;
    font-size:12px;
}

.mini-box{
    border:1px solid #8ca9c7;
    background:white;
    margin-bottom:10px;
    font-size:12px;
}

.mini-title,
.panel-title{
    background:linear-gradient(#dceeff,#8fc1ec);
    border-bottom:1px solid #6d98bd;

    padding:5px 8px;

    font-size:14px;
    font-weight:bold;
}

.mini-box a{
    display:block;
    padding:6px 8px;

    border-bottom:1px solid #ddd;

    color:#111;
    text-decoration:none;
    font-weight:bold;
}

.mini-box a:hover{
    background:#eef6ff;
    color:#0055d6;
}

.mini-box ul{
    margin:0;
    padding:8px 8px 8px 22px;
}

.welcome-box{
    border:1px solid #8ca9c7;
    background:white;
    padding:10px;
    margin-bottom:10px;
}

.welcome-box h2{
    margin:0 0 8px 0;
    font-size:22px;
}

.welcome-box p{
    margin:8px 0;
    line-height:1.45;
    font-size:13px;
}

.panel{
    border:1px solid #8ca9c7;
    background:white;
    margin-bottom:10px;
}

.panel p,
.panel ul{
    padding:8px;
    margin:0;

    font-size:12px;
    line-height:1.35;
}

.panel li{
    margin-left:16px;
    margin-bottom:4px;
}

.skills-list{
    columns:2;
}

.album{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:8px;
}

.album img{
    width:100%;
    height:85px;
    object-fit:contain;

    border:1px solid #ccc;
    background:white;

    padding:5px;
    box-sizing:border-box;
}

iframe{
    display:block;
    width:100%;
    height:175px;
    border:0;
}