@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap');

:root {
    --white: #eeebd8;
    --red: #e83a3b;
    --blue: #9acfd3;
    --black: #121413;
    --wall: #f7f7f9;

    --rotation: 7deg;
    --row-left-offset: -10px;
    --row-width: 120%;

    --header-padding-offset: 180px;
}


* {
    padding: 0px;
    margin: 0px;
}

html,body {
    background-color: var(--wall);
    color: var(--white);
    font-family: 'Rajdhani', sans-serif;
    height: 100%;
}
a {
    color: var(--black);
}

h1 {
    background-color: var(--red);
    color: var(--white);
    text-align: right;
    padding-right: var(--header-padding-offset);
}

.mainText h2 {
    font-size: 2em;
    background-color: var(--red);
    padding: 0px 5px;    
}

.mainText h3 {
    background-color: var(--blue);
    padding: 0px 5px;
    color: var(--black);
    font-weight: 400;
}

.mainText p {
    padding: 10px;
    margin-top: 3px;
    max-width: 36ch;    
    font-family: 'Comfortaa', cursive;
    text-shadow: 0px 0px 5px black;
}

.mainText a {
    color: var(--blue);
}


.mainText hr {
    margin-top: 3px;
}

header h3 {
    background-color: var(--white);
    color: var(--red);
    text-align: right;
    padding-right: var(--header-padding-offset);
    font-weight: 400;
    margin-bottom: -1px;
}

header h6 {
    background-color: var(--blue);
    color: var(--black);
    text-align: right;
    padding-right: var(--header-padding-offset);

}

main {
    z-index: 1;
}

.root {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: calc(100% - 50px);
    min-width: 200px;
    max-width: 920px;
    margin: 10px auto 20px auto;
    top: 0px;
    position: relative;
    border: solid 10px white;
    overflow: hidden;
    background-color: var(--black);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.91);
}

header {
    transform: rotate(var(--rotation));
    width: var(--row-width);
    left: var(--row-left-offset);
    position: relative;
    padding-top: 50px;
    top: -50px;
    margin-bottom: -60px;
    background-color: var(--red);
    font-size: 1.2em;
    z-index: 2;
}

footer {
    position: relative;
    content: ' ';
    color: var(--white);
    font-size: 10px;
    background-color: var(--red);
    transform: rotate(var(--rotation));
    width: var(--row-width);
    left: var(--row-left-offset);
    height: 100px;
    margin-bottom: -90px;    
}

.intro {
    margin: 50px auto 70px auto;
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    height: 250px; 
}

.mainRow {
    content: ' ';
    transform: rotate(var(--rotation));
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(var(--red) 98%, rgba(255,255,255,0) 0%);
    background-position: left;
    background-size: 25px 150px;
    background-repeat: repeat-y;
    width: var(--row-width);
    top: 2px;
    position: relative;
}

.mainImg {
    display: block;
}

.thumb {
    margin: 0px auto;
    width: 300px;
    height: 200px;
    border: solid 3px var(--blue);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    place-content: center;
}

.mainText {
    
}

.rowBreak {
    width: var(--row-width);
    left: var(--row-left-offset);
    position: relative;
    transform: rotate(var(--rotation));
    background-color: var(--white);
    border: solid 2px var(--white);
    z-index: 2;
}

h4 {
    position: relative;
    transform: rotate(var(--rotation));
    background-color: var(--blue);
    width: var(--row-width);
    left: var(--row-left-offset);
    padding-left: 20px;
    margin-bottom: 2px;
    color: var(--black);
    font-size: 27px;
}


.cardHolder {
    padding-left: 30px;
    width: 75%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 5px 0px 20px 0px; 
}

.card {
    font-size: 2rem;
    padding: 1rem;
    border: solid 2px var(--blue);
    border-radius: 10px;
    width: 150px;
    height: 150px;
    cursor: pointer;
    transition: transform 200ms linear;
    margin: 10px;
    background-color: var(--black);
    color: var(--blue);
    display: flex;
    flex-direction: column;
    position: relative;
}

.card:hover {
    color: var(--white);
    border-color: var(--white);
}

.selected {
    color: var(--white);
    border-color: var(--red);
    
}
.selected .smThumb {
    filter: saturate(100%);
}

.card h7 {
    font-size: 10px;
    font-family: 'Comfortaa', cursive;
}

.card span {
    display: none;
}

.smThumb {    
    filter: saturate(0%) blur(1px);
    width: 150px;
    height: 150px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 200ms linear;
    margin: 10px auto 0px auto;
}

#blockAttack .smThumb {
    background-image: url("/images/blockattack/high-res-icon2.png");
}

#simcity .smThumb {
    background-image: url("/images/simcity/simcity-icon.png");
}

#chronoblade .smThumb {
    background-image: url("/images/chronoblade/chronoblade-icon.png");
}

#cloneWars .smThumb {
    background-image: url("/images/clonewars/cwa-icon.png");
}

#freerealms .smThumb {
    background-image: url("/images/freerealms/freerealms-icon.png");
}

#grass .smThumb {
    background-image: url("/images/grass/grass-icon.png");
}

#flightTracker .smThumb {
    background-image: url("/images/flighttracker/tracker-icon.png");
}

#laserDefender .smThumb {
    background-image: url("/images/laserDefender/main-icon-512.png");
}

#asteroids .smThumb {
    background-image: url("/images/asteroids/main-icon.png");
}

#plantMonitor .smThumb {
    background-image: url("/images/plantMonitor/main-icon.png");
}

#ledAnimator .smThumb {
    background-image: url("/images/ledAnimator/main-icon.png");
}

#mu3rt0Bot .smThumb {
    background-image: url("/images/mu3rt0Bot/main-icon.png");
}

.card:hover .smThumb {
    filter: saturate(100%);
}

.verticalDash1 {
    width: 20px;
    height: var(--row-width);
    position: absolute;
    top: -100px;
    left: 72px;
    transform: rotate(27deg);
    border-left: solid var(--red) 4px;
    border-right: solid var(--blue) 4px;
    opacity: 50%;
    background-image: linear-gradient(var(--white) 95%, rgba(255,255,255,0) 0%);
    background-position: center;
    background-size: 12px 150px;
    background-repeat: repeat-y;
    z-index: 0;
}

.verticalDash2 {
    width: 20px;
    height: var(--row-width);
    position: absolute;
    top: -100px;
    left: 327px;
    transform: rotate(27deg);
    opacity: 20%;
    background-image: linear-gradient(var(--blue) 80%, rgba(255,255,255,0) 0%);
    background-position: center;
    background-size: 12px 100px;
    background-repeat: repeat-y;
    z-index: 0;
}

.verticalDash3 {
    width: 20px;
    height: var(--row-width);
    position: absolute;
    top: -100px;
    left: 572px;
    transform: rotate(27deg);
    border-right: solid var(--red) 4px;
    border-left: solid var(--blue) 4px;
    opacity: 50%;
    background-image: linear-gradient(var(--white) 95%, rgba(255,255,255,0) 0%);
    background-position: center;
    background-size: 12px 150px;
    background-repeat: repeat-y;
    z-index: 0;
}

.finishRow {
    transform: rotate(var(--rotation));
    width: var(--row-width);
    height: 25px;
    position: relative;
    left: var(--row-left-offset);
    border-top: solid 5px var(--blue);
    border-bottom: solid 5px var(--blue);
    display: grid;    
    grid-template-rows: 1fr 1fr;
    content: ' ';
}

.checker1 {
    background-image: linear-gradient(to right, var(--blue) 50%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 25px 100%;
    background-repeat: repeat-x;
}

.checker2 {
    background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, var(--blue)  0%);
    background-position: bottom;
    background-size: 25px 100%;
    background-repeat: repeat-x;
}


.card:before {
    content: '';
    background: linear-gradient(45deg, var(--blue), var(--white), var(--red), var(--blue), var(--white), var(--blue), var(--white));
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(7px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 10s linear infinite;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
    border-radius: 10px;
}

.card:hover:before {
    opacity: 1;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@media only screen and (max-width: 600px) {
    :root {
        --rotation: 0deg;
        --row-width: 100%;
        --row-left-offset: 0px;
        --header-padding-offset: 0px;
    }

    .mainRow {
        background-image: none;
    }

    h1, h3, h6 {
        text-align: center !important;
    }

    .cardHolder {
        padding-left: 0px;
    }

}