@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap');

body {
    background-image: url(/imgs/bgdarkanim.gif);
    background-attachment: fixed;
    color: #3C1E73;
    font-family: 'Comic Sans MS','Comic Relief';
    text-align: center;
}

.main {
    margin: auto;
    width:50%
}


.left {
    float: left;
    position: sticky;
    top: 50px;
    width: 23%;
   
}

.left #scrollable {

    height:290px;
    overflow-y: scroll;

}



.box {
    background-color: #B89CF0;
    width:100%;
    padding: 10px;
    border-radius: 15px;
    border-style: solid;
    border-color: white;
    margin-top: 50px;
    box-shadow: 0 0 10px #420077;
    transition: .3s;
}

    .box:hover {
        margin-top: 45px;
        box-shadow: 0 0 15px #420077;
        transition: .3s;
    }


    .box img {
        max-width: 300px;
    }

.linkbox {
    background-color: #B89CF0;
    width:100%;
    padding: 10px;
    border-radius: 15px;
    border-style: solid;
    border-color: white;
    margin-top: 50px;
    box-shadow: 0 0 10px #420077;
    transition: .3s;
}

    .linkbox:hover {
        margin-top: 45px;
        box-shadow: 0 0 15px #420077;
        transition: .3s;
    }


    .linkbox img {
        width:35%;
    }

    .linkbox img:hover {
        
        box-shadow: 0 0 10px #420077;
        
        transition: .3s;
    }

.innerbox {
    background-color: #3C1E73;
    color: white;
    width: auto;
    margin: auto;
    padding: 5px 0px;
    border-radius: 15px;
}

.row {
  display: flex;
}

.column {
    background-color: #3C1E73;
    color: white;
    width: auto;
    flex:50%;
    padding: 5px 15px;
}

.roblos-army {
    height: 100px;
    padding: 10px;
    width: auto;
    overflow: hidden;
}

    .roblos-army img {
        padding: 10px 0 0 0;
        transition: 0.5s;
        margin-top: 0;
    }

        .roblos-army img:hover {
            padding: 0 0 10px;
            transition: 0.05s;
        }

button {
    background-color: #3C1E73;
    color: white;
    border-style: none;
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 15pt;
    transition: 0.1s;
}

    button:hover {
        background-color: white;
        color: #3C1E73;
        padding: 10px 15px;
        transition: 0.2s;
    }

    button img {

        border-radius: 10px;

    }

.test {
    background-color: white;
    height: 10px;
    overflow: hidden;
    transition: 1s;
}

    .test:hover {
        background-color: #B89CF0;
        height: 100px;
        overflow: hidden;
        transition: 0.5s;
    }

.roblos-friend:hover {
    transform: rotate(360deg);
    transition: .5s;
}

.topnav {
  overflow: hidden;
  background-image:url('imgs/bglight.png');
  position: relative;
  display:none;

  padding:10px;
  border-radius:10px;
  margin:auto;
  text-align:right;
}

    .topnav #links {
    display: none;
    text-align:center;
    }

    .topnav img:hover {
        
        box-shadow: 0 0 10px #420077;
        
        transition: .3s;
    }

.credit {

       display:none; 
    }

@media screen and (max-width: 1000px) {

    .main {
        width:90%;
    }

    .left {
        display:none;
    }

    .topnav {
        display:block;
    }

    .credit {

       display:block; 
    }

}

#gallery {

    background-color:#9274cf;
    border-radius:10px; 

}
    #gallery img {

        border-radius:10px;
        width:32%; 

    }