body{
    margin:0;
    background:#1790d0;
    font-family:"MS Gothic", monospace;
    color:#003560;
}

/* bordas laterais */

body::before,
body::after{
    content:"";
    position:fixed;
    top:0;
    width:180px;
    height:100%;
    background:url("img/pattern.png");
    z-index:-1;
}

body::before{
    left:0;
}

body::after{
    right:0;
}

.layout{
    width:720px;
    margin:auto;
}

.logo{
    text-align:center;
    margin-top:20px;
    width: 50%;
    max-width: 100px;
    height: auto;
}

.logo h1{
    font-size:110px;
    margin:0;
    font-weight:normal;
    color:white;
}

.iconbar{
    background:#ececec;
    border:1px solid black;
    text-align:center;
    padding:20px;
    margin-bottom:10px;
}

.iconbar img{
    margin:0 10px;
}

.content{
    display:flex;
    gap:10px;
}

.left,
.right{
    width:150px;
    background:#ececec;
    border:1px solid black;
    padding:10px;
}

main{
    flex:1;
    background:#ececec;
    border:1px solid black;
    padding:20px;
}

.flower{
    text-align:center;
}

.section-title{
    background:#25b74d;
    color:white;
    text-align:center;
    font-weight:bold;
    margin:10px 0;
}

ul{
    list-style:none;
    padding:0;
    margin:0;
}

li{
    margin:4px 0;
}

.welcome{
    background:#2b93cb;
    color:white;
    text-align:center;
    padding:20px;
    font-size:30px;
    margin-bottom:20px;
}

.intro{
    display:flex;
    gap:15px;
    align-items:center;
}

.intro img{
    width:150px;
}

.blog{
    margin-top:20px;
}

.blog h2{
    text-align:center;
}

.blog-scroll{
    height:250px;
    overflow-y:auto;
    background:white;
    padding:10px;
}

.status{
    background:#ddd;
    padding:10px;
    text-align:center;
}

.mascot{
    display:block;
    margin:auto;
    width:120px;
}

footer{
    background:#ececec;
    border:1px solid black;
    margin-top:10px;
    text-align:center;
    padding:10px;
}