/*
 *  Copyright (C) 2023-2024 TheRealOne78 <bajcsielias78@gmail.com>
 *
 *  This file is part of the 'TheRealOne78's Browser Homepage' project
 *
 *  'TheRealOne78's Browser Homepage' is free software: you can redistribute it
 *  and/or modify it under the terms of the MIT License as published by the
 *  Massachusetts Institute of Technology.
 *
 *  'TheRealOne78's Browser Homepage' is distributed in the hope that it will be
 *  useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the MIT License for
 *  more details.
 *
 *  You should have received a copy of the MIT License along with 'TheRealOne78's
 *  Browser Homepage'. If not, see <https://mit-license.org/>.
 */

html, body {
    background-color: #000;
    color: #fff;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "VT323";
}

a {
    background: transparent;
    color: #fff;
    text-decoration-style: dashed;
}
a:hover { text-decoration: underline; }

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.content-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 27px;
    padding: 0 3%;
    width: 66vw;
}

.item-text-container { max-width: 680px; }

.img-container {
    display: flex;
    flex-direction: column;
    max-width: 34vw;
    align-items: center;
    text-align: center;
}
@media screen and (max-width: 1200px) {
    .img-container { display: none; }
}

#img { margin: 15px 0; }

#fun-fact { text-align: justify; }

.item-title {
    font-family: 'VT323', monospace;
    font-size: 40px;
    padding: 15px 0;
}

.welcome-msg { text-align: center; }

.infinite-cursor { animation: infinite-cursor 1.75s infinite; }
@keyframes infinite-cursor {
    0%   { background-color: #000; }
    50%  { background-color: #000; }
    51%  { background-color: currentColor; }
    100% { background-color: currentColor; }
}

.no-script-notice {
    color: black !important;
    text-align: center;
    font-size: 27px;
    animation: no-script-notice 3s infinite;
}
@keyframes no-script-notice {
    0%   { background-color: #C19C00; }
    50%  { background-color: #C19C00; }
    51%  { background-color: #C50F1F; }
    100% { background-color: #C50F1F; }
}