.box {
    border: solid 2px black;  
    border-radius: 5px;
    box-shadow: 2px 4px;
    padding: 10px;
    background: #d0d4f5;
    margin:auto;
}

.unsel {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  border: 2px solid #0C4170;
  background-color: #000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #1A470F;
  width: 92%;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #700C0E;
}

#flexCont{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#tagline{
    padding: 10px;
    background: #d0d4f5;
   border-radius: 5px;
}

#about{
    padding: 10px;
    background: #cee5c7;
    border: solid 2px black;  
   border-radius: 5px;
}



#flexCont table {
    border: solid 2px black;  
   border-radius: 5px;
   padding: 10px;
  background: #cee5c7;
   margin:auto;
   width: 100%; 
   box-sizing: border-box;
        overflow-wrap: break-word;

        position: relative;

       flex: 70%    

}

#flexCont img{
    flex: 20%;
    border: solid 2px black;  
   border-radius: 5px;
   /* box-shadow: 2px 4px; */
       width: 25%;
}

th,td, #item {
padding: 10px;
border:1px solid black;
border-radius: 15px;

}

#intro {
    border: dotted 2px rgb(1, 6, 71);
    border-radius: 5px;
    padding: 10px;
    cursor: help;
    position: relative;
    width: 50%; 
    background: #d0d4f5;
    margin:auto;
}



footer{
    text-align: center;
}

h1{
    text-align: center;
    
}

#scroll {
    padding-top: 15px;
    margin: auto;

}

body {
    padding: 4px;
    /* font-family: "Times New Roman", Times, serif; */
    font-family: Helvetica, sans-serif;

    color: #222;
    background: linear-gradient(90deg, rgba(125,136,232,1) 0%, rgba(208,212,245,1) 35%, rgba(157,164,226,1) 100%);
    /* background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='97' height='97' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform=''%3E%3Crect width='100%25' height='100%25' fill='rgba(128, 138, 232,1)'/%3E%3Cpath d='M-20 17l20-20l20 20l20-20l20 20l20-20l20 20v-14l-20-20l-20 20l-20-20l-20 20l-20-20l-20 20zM-20-23l20-20l20 20l20-20l20 20l20-20l20 20v-14l-20-20l-20 20l-20-20l-20 20l-20-20l-20 20zM-20 57l20-20l20 20l20-20l20 20l20-20l20 20v-14l-20-20l-20 20l-20-20l-20 20l-20-20l-20 20z ' fill='rgba(178, 184, 240,1)' filter='url(%23filter-doodad-1)'/%3E%3Cpath d='M-16 38l20-20l20 20l20-20l20 20l20-20l20 20v-16l-20-20l-20 20l-20-20l-20 20l-20-20l-20 20zM-16-2l20-20l20 20l20-20l20 20l20-20l20 20v-16l-20-20l-20 20l-20-20l-20 20l-20-20l-20 20zM-16 78l20-20l20 20l20-20l20 20l20-20l20 20v-16l-20-20l-20 20l-20-20l-20 20l-20-20l-20 20z ' fill='rgba(208, 212, 245,1)' filter='url(%23filter-doodad-2)'/%3E%3Cpath d='M-20 37l20-20l20 20l20-20l20 20l20-20l20 20v-14l-20-20l-20 20l-20-20l-20 20l-20-20l-20 20zM-20-3l20-20l20 20l20-20l20 20l20-20l20 20v-14l-20-20l-20 20l-20-20l-20 20l-20-20l-20 20zM-20 77l20-20l20 20l20-20l20 20l20-20l20 20v-14l-20-20l-20 20l-20-20l-20 20l-20-20l-20 20z ' fill='rgba(178, 184, 240,1)' filter='url(%23filter-doodad-1)'/%3E%3C/pattern%3E%3Cfilter id='filter-doodad-1'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='0.2'/%3E%3C/filter%3E%3Cfilter id='filter-doodad-2'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='1.2'/%3E%3C/filter%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ") */
}


a {
    color: #0033cc;
    cursor: pointer;
}

.box img {
    margin: auto;
    display: block;
}

img {
    margin: auto;
    width: 100%;
    border: solid 1px black;
}

.tagline {
    color: rgb(58, 58, 58);
    margin-top: -10px;
}

a:link {
color: blue;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: blueviolet;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: slateblue;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: orange;
background-color: transparent;
text-decoration: underline;
}



#return{
    background: #cee5c7;
    margin: auto; 
    padding: 10px; 
    margin-top: 10px;
    border-radius: 5px;
    text-align: center;
    color: black;
    font-weight: bolder;
    font-size: 15px;
    text-decoration: none;
    border: solid 1px black;
    box-shadow: 2px 4px;


}

@media only screen and (max-width: 600px) {
    img {
        width: 100%;
        margin: auto;
    }

    .box, #intro {
        width: 100%;
    }

    body {
        width: 88%;
    }

    .theme-toggle {
        display: none;
    }

    .toHide{
        display: none;
    }
    #return{
        width: 100%; 
    }

    #flexCont img{
        margin-top:10px;
    }
}

@media only screen and (min-width: 600px) {
    img {
        width: 50%;
    }

    .box, #intro {
        width: 50%;
    }

    .toHide{
        display: inline;
    }

    #return{
        width: 50%; 
    }

    #flexCont img{
        margin-left: 10px;
    }
}