:root {
    --light-blue: rgb(234, 250, 255);
    --dark-blue: rgb(179, 216, 246);
    --darkest-blue: rgb(129, 175, 240);
    --drop-shadow: rgb(65, 125, 205);
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--light-blue); }
::-webkit-scrollbar-thumb { background: var(--dark-blue); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--darkest-blue); }

* {
    cursor: url("CEILING-CURSOR.PNG"), auto;
    
}

body {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /*background-color: black;*/
    background-size: 100px;
    background-image: linear-gradient(rgba(230, 245, 252, 0.627), rgba(163, 209, 245, 0.627)), url(ceilings.jpg);
}

p {
    margin: 0px;
    display: inline;
}

.boldtext {
    font-weight: 500;
    color: var(--drop-shadow);
}

#browser {
    box-sizing: border-box;
    background-color: var(--darkest-blue);
    padding: 5px 5px 0px;
    /*border: 2px solid black;*/
    width: 700px;
    margin: 50px auto;
    vertical-align: top;
}

.box {
    background-image: linear-gradient(45deg, var(--dark-blue), var(--light-blue));
    box-sizing: border-box;
    /*border: 2px solid black;*/
    width: 99.9%;
    background-color: var(--light-blue);
}

#titlebar {
    background-image: linear-gradient(45deg, var(--darkest-blue), var(--dark-blue));
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    text-shadow: 1.5px 1.5px 0px var(--drop-shadow);
}

#browserbar {
    background-image: linear-gradient(to bottom, var(--light-blue), var(--dark-blue));
    padding: 8px 5px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#urlbar {
    color: rgb(51, 66, 82);
    flex: 1;
    padding-left: 4px;
    background: white;
    border: 2px inset var(--darkest-blue);
}

#filebar {
    background-image: linear-gradient(to bottom, var(--dark-blue), var(--light-blue));
    padding: 4px 5px;
    margin-top: 3px;
    text-align: center;
}

#infoblock1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: 450px;
    padding: 0px 5px;
    margin-top: 3px;
}

.infoblock {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.infoheader {
    margin: 5px 0px;
    display: flex;
    align-items: flex-end;
    background-color: var(--darkest-blue);
    width: 100%;
    box-sizing: border-box;
}

.infoheader b {
    color: white;
    text-shadow: 1.5px 1.5px 0px var(--drop-shadow);
    padding: 5px;
    background-color: var(--darkest-blue);
}

.infotext {
    /*display: flex;*/
    /*align-items: flex-end;*/
}

#extratext {
    display: inline-block;
}

#boldtext {
    display: inline-block;
}

img {
    margin-top: 20px;
    max-width: 100%;
}

.dniimage {
    display: flex;
    justify-content: space-between;
}

.dniimage img {
    margin-top: 5px;
    max-width: 49%;
}

.dislikeimg {
    align-self: center;
}

.dislikeimg img {
    margin-top: 5px;
    max-height: 100px;
    width: auto;
}

#insertbar {
    background-image: linear-gradient(135deg, var(--dark-blue), var(--darkest-blue));
    padding: 8px 5px;
    margin-top: 3px;
    overflow: hidden;
    white-space: nowrap;
    color: white;
    text-shadow: 1.5px 1.5px 0px var(--drop-shadow);
}

#insertbar .scrolltrack {
    display: inline-block;
    animation: marquee 18s linear infinite;
}
@keyframes marquee {
    0% {transform: translateX(120%);}
    100% {transform: translateX(-100%);}
}

#imgblock {
    display: flex;
    margin-top: 3px;
    align-items: center;
    justify-content: center;
}

#imgblock img {
    margin-top: 0px;
    height: 75px;
    width: auto;
}

#infoblock2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0px 5px;
    height: 360px;
    margin-top: 3px;
}

.findimg {
    margin-top: 5px;
    align-self: center;
}

.findimg img {
    margin-top: 0px;
    height: 118px;
}

.footer {
    color: white;
    text-shadow: 1.5px 1.5px 0px var(--drop-shadow);
    text-align: center;
    padding: 5px 0px;
}