* {
    box-sizing: border-box;
}

.grid-container {
    display: grid;
    margin: 0 auto;
    grid-template-columns: 450px 380px 250px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'top top top'
        'mid now time'
        'mid now prof'
        'marq marq ring'
        'marq marq ring';
    column-gap: 20px;
    row-gap: 20px;
    
}

.webring {
    display: grid;
    margin: 0 auto;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        'prev random next';
    column-gap: 0px;
}

#prev {
    grid-area: prev;
}

#random {
    grid-area: random;
}

#next {
    grid-area: next;
}


@media only screen and (max-width:768px) {
    .grid-container {
        display: grid;
        margin: 0 auto;
        padding: 0px 25px;
        grid-template-columns: auto;
        grid-template-rows: 480px auto;
        grid-template-areas:
            'top'
            'upd'
            'now'
            'mid'
            'prof'
            'marq'
            'ring'
            'time'; }

    .top .nav {
        position: relative;
        top: 0px;
        left: -20px;
        width: fit-content;
    }

    .top .upd {
        position: relative;
        top: -80px;
        left: 0px;
        width: auto;
    }

    .now {
    grid-area: now;
    height: 600px;

    }

    .webring {
    display: grid;
    margin: 0 auto;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        'prev' 
        'random' 
        'next';
    column-gap: 0px;
}


}

.top {
    grid-area: top;
    color: white;
    border: 1px solid white;
    box-shadow: 5px 5px #2daa91;    
    background: url(/assets/splatback.gif);
    background-size: cover;
    background-position-y: 63%;
    border-radius: 20px;
    height: 250px;

}

.end {
    grid-area: end;
    height: 65px;
    color: white;
    border-right: 1px solid white;
    background: repeating-linear-gradient(
    45deg,
    #5f5f61,
    #646468 10px,
    #4d4d4d 10px,
    #454546 20px)

}


.prof {
    grid-area: prof;
    color: white;
    border: 1px solid white;
    border-radius: 20px;
    text-align: left;
    font-size: 16px;
    
}

.now {
    grid-area: now;

}

.name {
    position: relative;
    top: -120px;
    left: -80px;
    z-index: -97px;
    height: 290px;
}

.top .nav {
    position: relative;
    top: -105px;
    left: 15px;
    z-index: -96px;
}

.bg {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: -99;
    height: 100vh;
    background-color: black;
    background-size: 62px 62px;
    background-image:
        linear-gradient(to right, #2daa91 1px, transparent 1px),
        linear-gradient(to bottom, #2daa91 1px, transparent 1px);
    background-position: center;
    overflow: auto;

}

.bg-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -98;
    background-size: cover;
    background-image: url(/assets/paper.png);
    background-blend-mode: luminosity;
    background-repeat: repeat;
    overflow: auto;

}

@font-face {
    font-family: THE JOURNAL FONT;
    src: url(/fonts/THE\ JOURNAL\ FONT.otf);
  }

body {
    align-items: center;
    font-family: "THE JOURNAL FONT", sans-serif;
    text-shadow: 1px 1px black;
    font-size: 18px;
    text-rendering: optimizeLegibility;
   
}

.mid {
    grid-area: mid;
    background-color: #08201b;
    color: white;
    
}

.title {
    background-color: #0e352d;
    text-align: left;
    padding: 10px;
    font-size: 28px;
    border-radius: 10px;
    border-left: #2daa91 4px solid;
}


.upd {
    width: 500px;
    position: relative;
    top: -305px;
    left: 390px;
    color: white;
    text-align: center;
    font-size: 22px;
    padding: 1px;
    border: 1px solid white;
    border-radius: 20px;
    background: repeating-linear-gradient(
    45deg,
    rgba(95,95,97,.7) 10px,
    rgba(100,100,104,.7) 10px,
    rgba(77,77,77,.7) 10px,
    rgba(69,69,70,.7) 20px);

}

.upd a {
    background: #aa2d46;
    border-radius: 20px;
    padding: 4px 8px;
    color: white;
    text-decoration: underline dotted;
}

.upd a:hover {
    text-decoration: underline;
}

.head {
    background-color: #08201b;
    color: white;
    border-radius: 20px;
    border: 1px solid white;
    box-shadow: 5px 5px #2daa91;
    padding: 20px;
    text-align: center;
    
}

.button {
    background-color:#08201b;
    color: white;
    border-left: 2px solid #2daa91;
    padding: 6px;
    text-decoration: underline dotted;
    font-size: 14px;
    font-family: Candy Season;
    src: url(/fonts/Candy\ Season.otf);
}

.button a:hover {
    text-decoration: underline;
}

.nav {
    width: 850px;
    grid-area: nav;
    padding: 5px;
    border: 1px solid white;
    border-radius: 20px;
    background: repeating-linear-gradient(
    45deg,
    rgba(95,95,97,.7) 10px,
    rgba(100,100,104,.7) 10px,
    rgba(77,77,77,.7) 10px,
    rgba(69,69,70,.7) 20px);
}

.nav, .end, a {
    color: white;
    text-decoration: none;
}

table {
    border-collapse: collapse;
    width: 100%;
    }

tr {
    border-bottom: 1px dotted white;
}

td, th {
    padding: 5px;
    }



.marq {
    grid-area: marq;
    image-rendering: pixelated;
    border-radius: 0px;
    height: 53px;
    padding: 10px 0px 0px;
        background: repeating-linear-gradient(
    45deg,
    #5f5f61,
    #646468 10px,
    #4d4d4d 10px,
    #454546 20px)
}

.ring {
    grid-area: ring;
    height: auto;
}

main {
    max-height: 1300px;
    width: 100%;
    max-width: 1130px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    overflow: auto;

}

mark {
    color: white;
    background-color: #2daa91;
    padding: 2px;
}

.prof a {
    background: #aa2d46;;
    border-radius: 20px;
    padding: 2px 2px;
    color: white;
    text-decoration: underline dotted;
}

.prof a:hover {
    text-decoration: underline;
}

.social {
    padding-top: 20px;
}

.social a {
    background: none;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.old {
    width: 88px;
    height: 31px;
    margin-right: 10px;
    border: 1px solid black;
}

.hide {
    display: none;
}

.disc:hover + .hide {
    display: block;
    color: white;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  .twemoji--flag-hungary {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%239b4f96' d='M0 14h36v8H0z'/%3E%3Cpath fill='%23d60270' d='M32 5H4a4 4 0 0 0-4 4v5h36V9a4 4 0 0 0-4-4'/%3E%3Cpath fill='%230038A8' d='M4 31h28a4 4 0 0 0 4-4v-5H0v5a4 4 0 0 0 4 4'/%3E%3C/svg%3E");
  }

  .twemoji--flag-mauritius {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23fcf343' d='M32 5H4a4 4 0 0 0-4 4v2.5h36V9a4 4 0 0 0-4-4'/%3E%3Cpath fill='%23ffffff' d='M0 11.5h36V18H0z'/%3E%3Cpath fill='%239c59d1' d='M0 18h36v6.5H0z'/%3E%3Cpath fill='%23000000' d='M0 24.5V27a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4v-2.5z'/%3E%3C/svg%3E");
  }

.tooltip {
    position: relative;
    display: inline-block;
}
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: rgba(4, 27, 23, .9);
    color: #fff;
    text-align: center;
    padding: 5px;
    border: 2px #2daa91 solid;
    border-radius: 0px;
    top: 20px;
    left: -40%;
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

@media only screen and (max-width:768px) {
     .tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: rgba(4, 27, 23, .9);
    color: #fff;
    text-align: center;
    padding: 5px;
    border: 2px #2daa91 solid;
    border-radius: 0px;
    top: 0px;
    left: 2%;
    position: absolute;
    z-index: 1;
  }

}

  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    width: 150px;
    background-color: rgba(4, 27, 23, .9);
    color: #fff;
    text-align: center;
    padding: 5px;
    border: 2px #2daa91 solid;
    border-radius: 0px;
    top: 10px;
    left: -27%;
    z-index: 1;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }

  .nav .dropdown-context a {
    display: contents;
  }