@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');

* {
    transition: all ease .3s;
    box-sizing: border-box;
    font-family: "Rethink Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

body {
    background-color: rgb(241, 240, 222);
    color: black;
}

main {
    max-width: 1000px;
    padding: 0 50px;
    margin: 50px auto;
}

#projects {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

#projects > a, #social > a {
    text-decoration: inherit;
    color: inherit;
}

#projects > a {
    display: block;
    position: relative;
    transition: all ease .3s;
    border: 1px solid black;
    border-radius: 15px;
    padding: 10px 20px 35px 20px;
    font-size: 13px;

}

#projects > a:hover{
    transform: translateY(-3px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

#projects > a > .name {
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 19px;
}

#projects > a > .desc {
    opacity: 80%;
    padding: 5px 10px;
    background-color: black;
    color: rgb(241, 240, 222);
    display: inline;
    border-radius: 10px;
}


#projects > a > .desc{
    right: 5px;
    top: 2px;
}

#projects > a > .roles{
    position: absolute;
    right: 8px;
    bottom: 2px;
}

#social{
    width: 100%;
}

#social > a {
    margin-right: 10px;
}

#social > a > img {
    height: 30px;
}



#randomT{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.randomT-div {
    border: 1px solid black;
    padding: 10px 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.randomT-div > .data {
    font-size: 20px;
    font-weight: 600;
}


#quote {
    margin-top: 30px;
    padding: 10px;
    width: 100%;
    text-align: center;
    font-size: 15px;
}

#quote > #movie-name {
    font-size: 12px;
    font-style: italic;
}


.hidden {
    opacity: 0;
}


control > img {
    height: 40px;
    position: fixed;
    bottom: 10px;
    cursor: pointer;
    transition: all ease .3s;
}

control > #tryme {
    right: 42px !important;
    bottom: 45px !important;
    bottom: 10px;
    cursor: default !important;
    animation: trymeRotate 1.5s infinite ease;
}

@keyframes trymeRotate {
    0% {
        rotate: -10deg;
    }
    50% {
        rotate: 0deg;
    }
    100% {
        rotate: -10deg;
    }
}

control > #rightContrl:hover, #leftContrl:hover {
    opacity: 1;
}

#rightContrl {
    right: 8px;
    opacity: .6;
}

#leftContrl {
    left: 8px;
    opacity: .6;
}

#diceContrl {
    width: 40px;
    margin: 20px;
    float: right;
    cursor: pointer;
    user-select: none;
    transition: all ease .3s;
}

#rightContrl:hover, #leftContrl:hover, #diceContrl:hover {
    transform: scale(1.1);
}

#rightContrl:active, #leftContrl:active, #diceContrl:active {
    transform: scale(0.9);
}


themeInfo {
    color: black !important;
    padding: 15px 25px;
    border-radius: 15px;
    background-color: white;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 80px);
    bottom: 0;
    border: 1px solid black;
    transition: all ease .5s !important;
}

themeInfo.active {
    transform: translate(-50%, -30px);
    transition: all ease .5s !important;
}

#liveIcon {
    position: relative;
    width: 5px;
    height: 5px;
    background-color: red;
    border-radius: 50%;
}



#liveIcon::after {
    content: "";
    position: absolute;
    right: 50%;
    left: 50%;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    display: block;
    border-radius: 50%;
    background-color: red;
    animation: liveIconAnim 1s infinite ease;
    -webkit-animation: liveIconAnim 1s infinite ease;
}

@keyframes liveIconAnim {
    0% {
        width: 5px;
        height: 5px;
        opacity: 1;
    }
    100% {
        width: 15px;
        height: 15px;
        opacity: 0;
    }
}

@-webkit-keyframes liveIconAnim { /* safari */
    0% {
        width: 5px;
        height: 5px;
        opacity: 1;
    }
    100% {
        width: 15px;
        height: 15px;
        opacity: 0;
    }
}

#lastSong{
    z-index: 99999999;
    position: fixed;
    top: 10px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #212121;
    border: 1px solid black;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    padding: 10px 30px;
    border-radius: 10px;
    text-decoration: inherit;
    color: white;
    transition: all ease .2s;
}

#lastSong:hover{
    transform: scale(1.05);
}

#songDiv{
    display: flex;
    align-items: center;
    gap: 10px;
}

#songImg{
    height: 60px;
    width: 60px;
    border-radius: 5px;
    border: 1px solid rgba(00, 00, 00, 0.5);
    background: url(/src/img/song.jpg) no-repeat center center / cover !important;
}

#songInfo{
    display: flex;
    flex-direction: column;
    gap: 0;
}

#lastSong > #songDiv > #songInfo > p#song{
    font-size: 16px;
    font-weight: 500;
    color: white;
}

#lastSong > #songDiv > #songInfo > p#artist{
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5)
}

#songExplain{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

#lastSong > #songDiv > #songInfo > p, #songExplain{
    padding: 0;
    margin: 0;
}


@media (max-width: 550px) {
    #lastSong{
        position: inherit !important;
    }
}


@media (max-width: 950px) and (min-width: 769px) {
    #projects, #randomT {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    #projects, #randomT {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 20px;
    }
}


/* THEMES.. */


/* Windows XP */

@font-face {
    font-family: Trebuc;
    src: url(/src/fonts/trebuc.ttf);
}
@font-face {
    font-family: Perfect-DOS-VGA-437;
    src: url(/src/fonts/Perfect-DOS-VGA-437.ttf);
}

body.windowsXp * {
    font-family: 'Trebuc' !important;
}

body.windowsXp {
    background-image: url(/src/img/windowsxp-bg.jpg) !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: none;
    color: black;
}

body.windowsXp main {
    background-color: rgba(255, 255, 255, .5);
    max-width: 1000px;
    padding: 65px 35px;
    margin: 50px auto;
}

body.windowsXp a {
    color: #0046d5;
}

body.windowsXp h2 {
    background-image: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
    border-top: 1px solid #0831d9;
    border-left: 1px solid #0831d9;
    border-right: 1px solid #001ea0;
    border-top-left-radius: 8px;
    border-top-right-radius: 7px;
    text-shadow: 1px 1px #0f1089;
    color: white !important;
    padding: 10px 30px 10px 10px !important;
    font-weight: 400;
    position: relative;
    margin-bottom: 0;
}

body.windowsXp h2::after {
    content: "";
    background-image: url(/src/img/xp-close-button.svg);
    background-color: #D1D0C9;
    color: black;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    right: 5px;
    height: 22px;
    width: 22px;
}

body.windowsXp h2:hover::after {
    background-image: url(/src/img/xp-close-hover.svg) !important;
}

body.windowsXp h2:active::after {
    background-image: url(/src/img/xp-close-click.svg) !important;
}

body.windowsXp #projects, body.windowsXp #social, body.windowsXp #randomT {
    background: linear-gradient(180deg, #fcfcfe, #f4f3ee) !important;
    padding: 15px !important;
    box-shadow: inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee, inset -3px -3px #003bda, inset 3px 3px #0855dd !important;
}

body.windowsXp #projects > a {
    border: 1px solid #919b9c;
    box-shadow: inset 1px 1px #fcfcfe, inset -1px -1px #fcfcfe, 1px 2px 2px 0 rgba(208, 206, 191, .75) !important;
}

body.windowsXp #projects > a:hover{
    transform: translateY(-1px);
    box-shadow: inset 1px 1px #fcfcfe, inset -1px -1px #fcfcfe, 1px 2px 2px 0 rgba(208, 206, 191, .75) !important;
}

body.windowsXp #projects > a > .name {
    font-weight: 400;
}

body.windowsXp #projects > a > .desc {
    background-image: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
    color: white;
}

body.windowsXp .randomT-div {
    border: 1px solid #919b9c;
    box-shadow: inset 1px 1px #fcfcfe, inset -1px -1px #fcfcfe, 1px 2px 2px 0 rgba(208, 206, 191, .75) !important;
}

body.windowsXp .randomT-div > .data {
    font-weight: 400;
}


body.windowsXp #quote > p {
    font-family: 'Perfect-DOS-VGA-437' !important;
}

body.windowsXp #leftContrl, body.windowsXp #rightContrl {
    background-color: white;
    border-radius: 50%;
}






body.windowsXp #lastSong{
    padding: 0 !important;
    color: black !important;
    background: linear-gradient(180deg, #fcfcfe, #f4f3ee) !important;
    box-shadow: inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee, inset -3px -3px #003bda, inset 3px 3px #0855dd !important;
}


body.windowsXp #songDiv{
    padding: 10px 30px;
}

body.windowsXp #lastSong > #songDiv > #songInfo > p#song{
    color: black !important;
}

body.windowsXp #lastSong > #songDiv > #songInfo > p#artist{
    color: rgba(0, 0, 0, 0.5) !important;
}

body.windowsXp #songExplain{
    position: relative !important;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7) !important;

    background-image: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
    border-top: 1px solid #0831d9;
    border-left: 1px solid #0831d9;
    border-right: 1px solid #001ea0;
    border-top-left-radius: 8px;
    border-top-right-radius: 7px;
    text-shadow: 1px 1px #0f1089;
    color: white !important;
    padding: 10px 30px 10px 10px !important;
    font-weight: 400;
    position: relative;
    margin-bottom: 0;
}

@media (max-width: 950px) and (min-width: 769px) {

    body.windowsXp h2 {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    body.windowsXp h2 {
        font-size: 18px;
    }

}
/* Windows XP */






/* Pinkie */
body.pinkie {
    background-color: rgb(209, 73, 211);
    color: white;
}

body.pinkie main {
    max-width: 1000px;
    padding: 0 50px;
    margin: 50px auto;
}

body.pinkie p > a {
    color: black;
    font-weight: 900;
    transition: all ease .3s;
}

body.pinkie p > a:hover {
    color: white;
}

body.pinkie #projects > a {
    display: block;
    position: relative;
    transition: all ease .3s;
    border: 1px solid white;
    border-radius: 15px;
    padding: 10px 20px 35px 20px;
    font-size: 13px;

}

body.pinkie #projects > a:hover{
    transform: translateY(-10px) rotate(10deg);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

body.pinkie #projects > a > .desc {
    opacity: 80%;
    padding: 5px 10px;
    background-color: white;
    color: rgb(209, 73, 211);
    font-weight: 800;
    display: inline;
    border-radius: 10px;
}

body.pinkie #social:hover{
    background-color: rgba(255, 255, 255, 1);
}

body.pinkie #social{
    width: auto;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 20px;
    border-radius: 10px;
    transition: all ease .3s;
}

body.pinkie .randomT-div{
    border: 1px solid white !important;
}



body.pinkie #lastSong{
    background-color: #FB6A2C;
    border: none !important;
    box-shadow: none !important;
    transform: rotate(-2deg) !important;
}

body.pinkie #songImg{
    border: none !important;
}

body.pinkie #lastSong > #songDiv > #songInfo > p#song{
    color: rgb(255, 255, 255) !important;
}

body.pinkie #lastSong > #songDiv > #songInfo > p#artist{
    color: rgba(255, 255, 255, 0.7) !important;
}

body.pinkie #songExplain{
    color: rgba(255, 255, 255, 0.9) !important;
}
/* Pinkie */






/* Biggg */
body.biggg {
    background-color: rgb(241, 240, 222);
    color: black;
}

body.biggg h1 {
    font-size: 50px;
}

body.biggg h2 {
    font-size: 30px;
}

body.biggg p {
    font-size: 20px;
}

body.biggg #projects {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 20px;
}

body.biggg #projects > a {
    display: block;
    position: relative;
    transition: all ease .3s;
    border: 1px solid black;
    border-radius: 15px;
    padding: 10px 20px 35px 20px;
    font-size: 18px;

}

body.biggg #projects > a:hover{
    transform: translate(-3px, -3px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    background-color: black;
    color: rgb(241, 240, 222);
}

body.biggg #projects > a > .name {
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 25px;
}

body.biggg #projects > a > .desc {
    opacity: 100%;
    padding: 5px 0;
    background-color: rgb(241, 240, 222);
    color: inherit;
    display: inline;
    border-radius: 10px;
}

body.biggg #projects > a:hover > .desc {
    background-color: black;
}

body.biggg  #social > a > img {
    height: 50px;
    transition: all ease .3s;
}

body.biggg  #social > a > img:hover {
    transform: scale(1.3);
}

body.biggg  #social > a > img:active {
    transform: scale(1.5);
}




body.biggg #lastSong{
    gap: 10px;
}

body.biggg #lastSong > #songDiv > #songInfo > p#song{
    font-size: 18px;
}

body.biggg #lastSong > #songDiv > #songInfo > p#artist{
    font-size: 16px;
}

body.biggg  #songExplain{
    font-size: 15px;
}

@media (max-width: 550px) {
    body.biggg #songImg{
        height: 120px !important;
        width: 120px !important;
    }
}


@media (max-width: 950px) and (min-width: 769px) {
    body.biggg #projects {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    body.biggg #projects {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 20px;
    }
}
/* Biggg */