* {
    box-sizing: border-box;
}

h1 {
    font-family: Ubuntu, sans-serif;
    color: #012A4A;
}

h2 {
    font-family: Ubuntu, sans-serif;
    color: #012A4A;
}

h6 {
    font-family: Ubuntu, sans-serif;
    color: #012A4A;
}

p {
    font-family: "Courier New", monospace;
    color: #012A4A;
    max-width: 85%;
}

a {
    font-family: 'Courier New', Courier, monospace;
    color: #013A63;
}

body {
    margin: 0;
    background-image: url(/testinggroudn/imagesandmore/matt-hardy.jpg);
    background-size: cover;
}

ul {
    font-family: "Courier New", monospace;
    color: #013A63;
    max-width: 85%;
}
.gradtext{
         background: linear-gradient(to top, #013A63 2%, #89C2D9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
   }
  #linetext:hover{ 
  text-decoration-line: underline;
  text-decoration-style: wavy;
}    
.flex-container {
    display: flex;
    flex-direction: row;
}


/* Left and right column */
.right {
    width: 25%;
}

.left {
    width: 15%;
}

/* Middle column */
.middle {
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.row::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

    .right,
    .left,
    .middle,
    .article,
    .sidenav,
    #dio,
    .icon {
        width: 100%;
    }

}

/*sidenav and dropdown*/
.sidenav {
    list-style-type: none;
    background-image: url(/testinggroudn/imagesandmore/resul-mentes.jpg);
    background-size: cover;
    position: fixed;
    height: 100%;
    width: 14%;
    overflow: auto;
    text-align: center;
}

.sidenav a {
    display: block;
    color: #013A63;
    padding: 8px 16px;
    text-decoration: none;
}

.sidenav a.active {
    background-color: #61A5C2;
    color: #013A63;
}

.sidenav a:hover:not(.active) {
    background-color: #61A5C2;
    color: #013A63;
}

#panel,
#panel1,
#panel2,
#panel3,
#panel4,
{
padding: 10px;
text-align: center;
margin: auto;
cursor: pointer;
}

.flip {
    padding: 10px;
    text-align: center;
    color: #012A4A;
    margin: auto;
    cursor: pointer;
}

#panel,
#panel1,
#panel2,
#panel3,
#panel4 {
    display: none;
    cursor: auto;
}


article {
    float: right;
    width: 100%;
    background-color: #ebf4fd;
    border-color: #023047;
    border-left-style: solid;
    border-width: 10px;
    padding: 10px;
    margin-top: 1%;
    max-width: 1000px;
    z-index: 1;
}

.icon {
    position: absolute;
    right: 0;
    width: 40%;
}


/* page doll stuff */
#dio {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: -1;
}

/* scroller stuff*/

.scroller {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
}

.scrollercontenticon {
    display: inline-block;
    padding-left: 100%;
    animation-name: scroll-left;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.scrollercontenticon img {
    height: 80px;
    margin-right: 10px;
    vertical-align: middle;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.scrollercontenticon:hover {
    animation-play-state: paused;
}

.scrollercontentblink {
    display: inline-block;
    padding-left: 100%;
    animation-name: scroll-left;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.scrollercontentblink img {
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.scrollercontentblink:hover {
    animation-play-state: paused;
}

/*highlite*/
::selection {
background-color:#468FAF;
color:#012A4A;
}

/* music player rtest*/