/* WHOLE */
html {
    background-image: url(https://img.freepik.com/premium-photo/gradient-abstract-background-smooth-soft-warm-bright-multicolor-gradient-app-web-design-web-pages-banners-greeting-cards-vector-illustration-design_744423-24817.jpg?semt=ais_hybrid&w=740&q=80);
    background-size: cover;
}
body {
    margin: 10;
}
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    column-gap: 10px;
    border: #ff5500 3px solid;
    border-radius: 15px;
    height: 850px;
    width: 1000px;
    padding: 10px;
    background-color:#121235;
    margin: auto;
}

/* TOP */
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    border: #ff5500 3px solid;
    border-image: linear-gradient(to top right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 150px;
    width: 1000px;
    padding: 15px;
    background-color:#121235;
}
.stamps {
    border: #ff5500 3px solid;
    border-image: linear-gradient(to top right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    height: 20px;
    width: 1000px;
    padding: 10px;
    background-color:#0e082b; 
}

/* LEFT */
.nav {
    border: #ff5500 3px solid;
    border-image: linear-gradient(to top right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    border-radius: 15px;
    height: 530px;
    width: 120px;
    padding: 0px;
    background-color:#0e082b;
}
.nav a {
    background-color: #121235;
    border:solid 2px gold;
    color: #ffffff;
    display: block;
    padding: 0px;
    text-decoration: none;
    font-family: "DotGothic16", 'Comic Sans MS', sans-serif;
    font-size: 15px;
}

/* MIDDLE */
.body {
    display: flex;
    flex-wrap: wrap;
    border: #ff5500 3px solid;
    border-image: linear-gradient(to top right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    border-radius: 15px;
    height: 500px;
    width: 580px;
    padding: 15px;
    background-image: url(https://img.freepik.com/premium-photo/gradient-abstract-background-smooth-soft-warm-bright-multicolor-gradient-app-web-design-web-pages-banners-greeting-cards-vector-illustration-design_744423-24817.jpg?semt=ais_hybrid&w=740&q=80);
}
.banner {
    height: 220px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color:#121235;
    padding: 10px;
}
.icon {
    float: left;
    height: 200px;
    width: 200px;
}
.oc-feature {
    height: 200px;
    width: 200px;
    text-align: center, bottom;
    background-color:transparent;
    border: solid 5px #121235;
    border-radius: 15px;
    margin-right: 10px;
}
.blog {
    height: 220px;
    width: 340px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color:#121235;
    padding: 10px;
    overflow-y: scroll;
}

/* RIGHT */
.updates {
    display: flex;
    flex-wrap: wrap;
    border: #ff5500 3px solid;
    border-image: linear-gradient(to top right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    border-radius: 15px;
    height: 500px;
    width: 200px;
    padding: 15px;
    background-color:#121235;
}
.status {
    border: #ff5500 3px solid;
    border-image: linear-gradient(to top right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    border-radius: 15px;
    height: 200px;
    width: 160px;
    padding: 15px;
    background-color:#121235;
}
.friends {
    border: #ff5500 3px solid;
    border-image: linear-gradient(to top right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    border-radius: 15px;
    height: 200px;
    width: 160px;
    padding: 15px;
    background-color:#121235;
}

/* BOTTOM */
.footer {
    border: #ff5500 3px solid;
    border-image: linear-gradient(to top right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    border-radius: 15px;
    width: 900px;
    padding: 15px;
    background-color:#0e082b;
}

/* TEXT */
p {
    font-family: "DotGothic16", 'Comic Sans MS', sans-serif;
    color: white;
    font-size: 13px;
}
h1 {
    font-family: "DotGothic16", 'Comic Sans MS', sans-serif;
    letter-spacing: 5px;
    color: white;
    font-size: 50px;
}
h2 {
    font-family: "DotGothic16", 'Comic Sans MS', sans-serif;
    letter-spacing: 3px;
    color: white;
    font-size: 20px;
}