/*
#011A27
Dark Navy
#063852 
Blueberry
#F0810F
Tangerine
#E6DF44
Daffodil

text #FFCD94


----

#1E0000
Dark
#500605
Wine
#9D331F
Clay
#BC6D4F
Dusty Rose

*/

body {
    /*
    background-color: #faf0eb;
    */
    background-color: #1e0000;
}

.nav-pills {
    padding-left: 15px;
}

.old {
    border-radius: 10px;
    /*
    background-color: #f8d7c6;
    */
    background-color: #500605;
    padding-bottom: 10px;
}

.centered-text {
    text-align: center;
}

.justify {
    text-align: justify;
    text-justify: inter-word;
}

.bold {
    font-weight: bold;
}

.book,
.gridbook,
.linebook {
    padding-bottom: 10px;
    padding-left: 5px;
    padding-top: 10px;
    border-radius: 5px;
    font-family: "URW Chancery L", "cursive";
    background-color: #9d331f;
}

.book {
    padding: 5px;
    color: #f0810f;
    margin-left: 5px;
    margin-right: 5px;
    font-style: oblique;
}

.gridbook {
    overflow-x: scroll;
    color: #e6df44;
    border: 2px dashed rgb(95, 94, 92);
    box-shadow: 0 0 0 3px #1e0000;
    background-size: 20px 20px;
    background-image: linear-gradient( to right, rgba(128, 128, 128, 0.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(128, 128, 128, 0.25) 1px, transparent 1px);
}

.linebook {
    overflow-x: scroll;
    border: 2px dashed #1e0000;
    box-shadow: 0 0 0 3px #1e0000;
    background-size: 20px 20px;
    background-image: linear-gradient( to bottom, rgba(128, 128, 128, 0.25) 1px, transparent 1px);
    color: #e6df44;
}

img {
    width: 100%;
    border-radius: 5px;
}

.zoom {
    transition: all 0.5s;
}

.zoom:hover {
    transform: scale(2, 2);
    position: static;
    /* or absolute */
    top: 50%;
    left: 50%;
}

.zoom25 {
    transition: all 0.5s;
}

.zoom25:hover {
    transform: scale(1.5, 1.5);
    position: static;
    /* or absolute */
    top: 50%;
    left: 50%;
}

p {
    margin-left: 20px;
    margin-right: 20px;
}

h1 {
    font-family: "Times New Roman", Times, serif;
    text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-right: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6,
td,
p,
th,
li {
    /*
    color: #fbcb7b;
    color: #f77604;
*/
    color: #ffcd94;
}

a {
    color: #ff6141;
}

a:hover {
    color: #cf2300;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
    color: #1e0000;
    background: radial-gradient( circle, rgba(63, 94, 251, 0) 47%, rgba(255, 205, 148, 1) 100%);
    background-color: rgba(255, 205, 148, 0.425);
}

.nav-pills>li>a:hover {
    background: radial-gradient( circle, rgba(255, 205, 148, 0) 12%, rgba(255, 205, 148, 0.5494572829131652) 100%);
    background-color: transparent;
}

h2 {
    margin-left: 10px;
}

h3 {
    margin-left: 20px;
}

h4 {
    margin-left: 30px;
}

h5 {
    margin-left: 40px;
}

h6 {
    margin-left: 50px;
}

.biggerOnHover {
    transition: margin 0.5s;
}

.biggerOnHover:hover {
    margin-left: 5%;
    margin-right: 5%;
}

.cardOnHover {
    transition: all 0.5s;
}

.cardOnHover:hover {
    margin-left: 5%;
    margin-right: 5%;
    font-size: x-large;
    transition: all 0.5s;
}

.halfSize {
    margin-left: 25%;
    margin-right: 25%;
}

.halfSizeLeft {
    margin-left: 10%;
    margin-right: 40%;
}

img.halfSize,
img.halfSizeLeft,
img.halfSizeRight {
    width: 50%;
}

.halfSizeRight {
    margin-left: 40%;
    margin-right: 10%;
}

.threeQuartersSize {
    margin-left: 12.5%;
    margin-right: 12.5%;
}

img.threeQuartersSize {
    width: 75%;
}

.textsmaller {
    font-size: smaller;
}

.textsmall {
    font-size: small;
}

.textnormal {
    font-size: medium;
}

.textlarge {
    font-size: large;
}

.textLarge {
    font-size: x-large;
}

.textLARGE {
    font-size: xx-large;
}

.cropAlin {
    padding-left: 12.5%;
    padding-right: 12.5%;
    object-position: 45% 13%;
    height: 400px;
    object-fit: cover;
    transition: all 0.5s;
}

.cropAlin:hover {
    padding-left: 0%;
    padding-right: 0%;
    object-position: 45% 0px;
    height: 1819px;
}

.object-fit-cover {
    object-position: 100% 0%;
    object-fit: cover;
}

.circle {
    border-radius: 100%;
    object-position: 50% 0%;
    object-fit: cover;
    width: 23em;
    height: 23em;
    transition: all 0.5s ease;
}

.circle:hover,
.round:hover {
    object-fit: contain;
    border-radius: 0%;
    object-position: 50% 50%;
    transition: all 0.5s ease;
}

.token {
    border-radius: 100%;
}

.round {
    border-radius: 100%;
    object-position: 50% 0%;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease;
}

.spotify {
    border-radius: 20px;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    transition: all 0.5s ease;
    transform: translate(-90px);
    margin-top: -80px;
    z-index: 100;
}

@media only screen and (max-width: 1120px) {
    .spotify {
        transform: translate(0);
        margin-top: 0;
        opacity: 0.5;
        width: 100%;
    }
}

@media only screen and (min-width: 1120px) {
    .spotify:hover {
        width: 40%;
    }
}

.spotify:hover {
    height: 240px;
    margin-bottom: -160px;
    opacity: 1;
}

.torn {
    /*clip-path: polygon( 3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);*/
    clip-path: polygon( 3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);
}

.clipZoom {
    clip-path: circle(20%);
    transition: all 0.5s;
    transform: scale(2, 2);
    position: static;
    /* or absolute */
    top: 50%;
    left: 50%;
}

.clipZoom:hover {
    clip-path: circle(200%) !important;
    transition: all 2s;
}