/*Body*/
body{
    background-image:url("/media/bgsea.jpeg");
    background-size:1360px;
    background-repeat: repeat;
}

/*Assets*/
.star{
    position: absolute;
    z-index:2;
    top:50px;
}
#main-left-star{
    left: 5%;
}
#main-right-star{
    right: 5%;
}

/*Flex container*/
main {
    display:flex;
    width:90%;
    margin: auto;
}

/*HEADER*/
header {
    width: 90%;
    background-color: black;
    padding:5px;
    text-align:center;
    overflow-wrap: break-word;
    margin: auto;
}

/*Navbar*/
nav{
    background-color: rgba(0,0,0,0.9);
    width: 90%;
    text-align: center;
    margin:auto;
    font-size:18px;
}
nav a{
  color:#8899ff;
}
/*Content*/
.content {
    width: 75%;    
    padding:15px;
    background-color: #dfdfdf;
    background-size: 100%;
    border-left:solid 2px black;
    border-right:solid 2px rgb(53, 53, 53);
}
.content a {
    color:#dd0055;
}
.content a:hover {
    color:#ff0000;
}
#welcome {
    color:#5c0a33;
    font-size: 30px;
}

/*Buttons*/
span, span *{
    padding:0;
}

/*Sidebar*/
.sidebar{
    width:25%;
    background-color: #b296ff;
    padding:15px;
    border-right:solid 2px rgb(53, 53, 53);
}
.sidebar a{
    color:#ff0020;
}
/*Footer*/
footer {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 90%;
    background-color:#1b0163;
    color:white;
    padding: 15px;
    margin: auto;
}
footer a {
    color:#bf84e6;
}
footer a:hover {
    color:#cdd000;
}

/*Responsiveness*/
@media screen and (max-width:600px) {
    nav{
        padding-left:30px;
        padding-right: 30px;
    }
    .sidebar{
        display:none;
    }
    .content{
        width:100%;
    }
}