* {
    font-family: 'pixelify sans';
}
/* color scheme 404ad6 f5c9fe 0045b5 bea8ff 7a52f4*/

body{
    background-image: url(media/bg.jpg);
    background-size: cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.tv-container {
    position: relative;
}

.content-container {
    display: inline-flex;
    position: absolute;
    background-color: #CDCDCD;
    top: 18.5%; 
    left: 16.5%; 
    width: 66.5%; 
    height: 63.5%; 
    z-index: -1;
    align-items: center;
    justify-content: center;
}

#mail-container {
    aspect-ratio: 375/300;
    width: 25%;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

.mail:active {
    transform: scale(.9) !important;
}

#opened-mail {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: none;
}

#opened-mail:hover{
    content: url(media/icons/open_envelope.png);
    left: 0;
    bottom: 0;
    width: 100%;
    cursor: pointer;
    transform: rotate(0deg);
}

#noti {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 113%;
}

.noti-animate {
    animation-name: noti;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

@keyframes noti {
    5%, 15% {transform: rotate(10deg);}
    10%, 20% {transform: rotate(-10deg);}
    25%  {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
}

#noti:hover{
    content: url(media/icons/open_envelope.png);
    left: 0;
    bottom: 0;
    width: 100%;
    cursor: pointer;
    transform: rotate(0deg);
}

.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    /* width: 100vw; */
    height: 100vh;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.x-container {
    position: absolute;
    top: -20px;
    right: 10px;
    width: 100%;
    display: flex;
    justify-content: end;
}

.x-icon {
    width: 5%;
}

.x-icon:hover {
    cursor: pointer;
}

.x-icon:active {
    transform: scale(.9) !important;
}

.letter-container {
    position: relative;
    text-align: center;
}

.letter {
    width: 100%;
}

.arrow-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10px; 
    padding: 0 10px;
}

.arrow {
    width: 10%; 
}

.arrow:active {
    transform: scale(.9) !important;
}

.arrow:hover {
    cursor: pointer;
}