* {
    margin: 0;
    padding: 0;
}

body {
    background: #092756;
    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -ms-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
}


/* Beginning code For cursor inside a circle */

.circle {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
}

.circle::before {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    border: 1.5px solid #105ed3;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    animation: pulse 300ms ease-in-out alternate infinite
}

@keyframes pulse {
    from {
        transform: translate(-50%, -50%) scale(.8);
    }
    to {
        transform: translate(-50%, -50%) scale(1.5);
    }
}


/* End of code For cursor inside a circle */

.can {
    text-align: center;
    margin-top: 30px;
}

.producer {
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid black;
    border-image: auto;
    letter-spacing: 2px;
}

h6 {
    text-align: right;
    letter-spacing: 2px;
    font-size: 15px;
    color: #fff;
    font-family: sans-serif;
    font-style: italic;
    text-decoration-line: underline;
    margin-top: 10px;
}

h6:hover {
    text-transform: uppercase;
    color: #f1f0ff;
    margin-top: 12px;
}

#link {
    color: #fff;
    letter-spacing: 3px;
    text-align: right;
    margin-top: 10px;
}

#link:hover {
    font-size: 25px;
    cursor: crosshair;
    color: #a6d9dd;
}

a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}

a:hover {
    color: #d3c7e7;
    background: transparent;
    font-size: bolder;
}

@media screen and (max-width: 991px) {
    #canvas {
        width: 100%;
    }
    .container {
        line-height: 10px;
    }
    .pre {
        margin-bottom: 25px;
        margin-top: 35px;
    }
}