/* Ok vro */
body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: white;
    background-image: url(img/bodybg.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}
a {
    color: #243b6e;
    text-decoration: none;
}
a:visited {
    color: #4d246e;
}
h2 {
    margin: 8px 0px;
}
.fun p {
    color: #696969;
    font-size: 12px;
    margin: 4px 0px;
}
.fade-in {
  opacity: 0;
  animation: fadeIn ease-in 1;
    animation-duration: 0s;
    animation-fill-mode: none;
  animation-fill-mode: forwards;
  animation-duration: 1s; }

main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.content {
    background-color: transparent;
    width: 640px;
    height: 360px;
    display: flex;
}
.lefts {
    width: 250px;
    background-color: transparent;
}
.rights {
    width: 390px;
    align-content: center;
    max-height: 100%;
}

.window {
    margin: 2px 10px;
    border: 2px #cccbda solid;
}
.tab {
    color: black;
    border: none;
  cursor: pointer;
  padding: 6px;
  width: 100%;
  text-align: left;
  outline: none;
  font-weight: bold;
    background-color: white;
}
.con {
  border-top: 2px #cccbda solid;
  padding: 0 12px;
  max-height: 0;
  overflow: auto;
  transition: max-height 0.2s ease-out;
  background-color: #eeeeee;
}


.pic {
    margin: auto;
    height: 334px;
    width: 230px;
position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: url("img/bgnight.jpg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-clip: padding-box;
    box-shadow: 0 2px 3px rgb(100, 100, 100);
}
.pic::after {
 position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(rgb(101, 104, 109), rgb(62, 62, 73));
    content: '';
    z-index: -1;
    border-radius: 16px;
}
.lefts p {
    margin: 6px;
    font-size: 10px;
}

@keyframes fadeIn { from { opacity:0; } to { opacity:1; }}

            .fade-in-title {
              opacity:0;
              animation:fadeIn ease-in 1;
              animation-fill-mode:forwards;
              animation-duration:0.5s;      
            }

            .fade-in {
                opacity:0;
                animation:fadeIn ease-in 1;
                animation-fill-mode:forwards;
                animation-duration:0.3s;      
              }