/* html elements */
body {
    background: repeating-linear-gradient(45deg, #77039d, #58026e 100px), radial-gradient(black, transparent);
}

img {
    max-width: 100%;
}

iframe {
    height: 300px;
    width: 100%;
}

.fa{
    font-size: 2.5em;
}

/* bootstrap class changes */
.navbar {
    background: #9042c0;
    color: black;
}

.navbar-dark .navbar-nav .nav-link {
    color: #ffffff
}

.navbar-dark .navbar-nav .active>.nav-link {
    color: rgba(255,255,255,.5)#4ac4bf;
}

.nav-item.active > .nav-link {
    /* font-weight: 800; */
    /* text-decoration: underline; */
    background: radial-gradient(#490544, #888cff87);
    border-radius: 100%;
    /* background-size: 10em; */
    background-repeat: no-repeat;
    background-size: 10em;
    background-position: center;
}

.nav-item {
    text-align: center;
    
}

.navbar-text {
    padding: 0;
    text-align: center;
}

.navbar-dark .navbar-text {
    columns: white;
}

.container {
    margin-top: 100px;
    margin-bottom: 100px;
}

.jumbotron {
    background-color: #4a075f;
    border-radius: 0;
    color: #d6bcf6;
}

.list-group-item {
    background-color: transparent;
}

.card {
    background-color: #e9c7ff;
    margin-bottom: 50px;
    border-radius: 50%;
}


/* Dice elements */
#diceView {
    /* width: 80%; */
    /* height: 80%; */
    /* margin: 100px; */
    /* perspective: 600px; */
    /* position: fixed; */
}

#dice {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 500ms ease-out;
    /* display: none; */
}



.diceFace {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    /* line-height: .9em; */
    font-size: 1.3em;
    /* font-size: 20em; */
    border: 2px solid rgb(0, 0, 0);
    /* overflow: scroll;
    overflow-x: auto;
    overflow-y: auto; */
    color: #2e0d54;
    background-color: #bf96f6;
}

.scroll {
    overflow: scroll;
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

input[type="radio"] {
    transform: scale(2, 2);
    margin: 10px;
    color: rgb(0, 0, 0);
}

/* my classes */
.displayDocument {
    width: 800px;
    height: 1100px;
    ;
}

.separator {
    border-bottom: black 2px solid;
}

#email {
    color: white;
}