/*#region Default Screen*/

/*#region Base*/

*
{
    scrollbar-width: 1rem;    
    scrollbar-color: rgb(255, 255, 255) #080815;
    font-family: 'Courier New', Courier, monospace;
    color:white;

    margin:0;
    box-sizing: border-box;
    overflow-x: hidden;
}

body
{
    background-color: #080910;
    color:white;
}

header
{
    display:grid;
    position:fixed;
    grid-template-columns: 8em 4.5fr 3fr;

    padding-bottom:1rem;
    padding-top:1rem;
    padding-left:8rem;
    padding-right:8rem;

    background-color:#06070a;

    position:fixed;
    z-index: 100;
    top:0;

    left: 0;
    right: 0;
}

section:not(.SmallSection)
{   
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 1.5rem;

    padding-top:12rem;
    padding-bottom: 5rem;

    width:90%;
    box-sizing: border-box;

    justify-self: center;
    align-self: center;
}

footer
{
    bottom: 0;
    background-color:rgb(28, 32, 45);

    padding-left:2%;
    padding-right:2%;
    padding-top:2%;    
    padding-bottom:2%;

    margin-top:2%;
}

img, button
{
    position:relative;
    display: block;
    width: 100%;
    top:0;
}

button img:not(.GameInfoLogo, .GameLinkImg)
{
    width:100%;
    height:100%;
    border-style: hidden;
    filter:blur(0.5px) grayscale(20%);
}

game-card
{
    border-style:solid;
    border-width:0.1rem;
    border-color:rgb(153, 91, 102);
    box-shadow: 0px 0 10px black;
    transition: transform 0.1s ease-out;
    transform: translateY(0px);
    border-radius: 0.1em;
}

button
{
    padding:1rem;
    width:100%;
    height:100%;
    background-color: rgb(23, 23, 26);
    border-style:hidden;
    cursor: pointer;
}

button h2
{
    overflow: hidden;
    color:pink;
    font-size:1.6rem;
    font-weight: bolder;
    letter-spacing: -0.1rem;
}

button h3
{
    overflow: hidden;
    color:rgb(188, 250, 189);
    font-size:120%;
}

article
{
    display:block;
    position:absolute;
    bottom:0;
    justify-self: center;
    padding-left:1rem;
    width:100%;
    background-color: rgba(0, 0, 0, 0.677);
    text-align: left;
}

education-card
{
    cursor: pointer;
    display:block;
    grid-column: span 3 / span 3;
    grid-template-rows: auto;
    justify-items: center;
    justify-self: center;
    background-color: rgb(18, 19, 22);

    padding-top:3rem;
    padding-left:1rem;
    padding-right:1rem;
    margin:0;

    transition:0.2s ease-out;
    width:90%;

    border-style: solid;
    border-width:0.1rem;
    border-color:rgb(153, 91, 102);
    border-radius: 0.1em;

}

technical-exp:not(.ButtonLink)
{
    cursor: default;
    padding-left:5rem;
    padding-right:5rem;
    grid-column: span 3/ span 3;
    display: inline-block;
    justify-self: center;
    margin-top:-3em;
}

contacts-link
{
    display: flex;

    text-align: right;
    justify-content: right;
}

p
{
    display: inline-block;
    box-sizing: border-box;

    font-size:1.4em;
    margin-top:1em;
    margin-bottom:1em;
    padding-right:0.3em;
    padding-left:0.3em;
}

technical-exp .Exp
{
    transition:0.2s;
    color:white;
    background-color:rgb(18, 19, 22);
    border-color: rgb(153, 91, 102);
    border-style: solid;
    border-radius: 0.1em;
    border-width: 0.07em;
    font-size:2rem;
}

h1
{
    font-size:3em;
}

h2
{
    font-size : 5%;
    letter-spacing: -0.05em;
}

h3
{
    font-size : 1.8em;
    text-align: left;
}

h4
{
    font-size:2em;
}

h5
{
    margin-top:0.8em;

    margin-bottom:1em;
    font-size: 1.1em;
}

.ButtonLink p, a
{
    text-decoration: none !important;
}

/*#endregion Base*/

/*#region Ids*/

#CV p
{
    text-align: center;
    font-size:1.5rem;
    margin-right: auto;
    padding-right:auto;
}

#ProjectsButton
{
    display: block;
    width: fit-content;
    margin: 2em auto;

    text-align : center;
}

#ProfileImg
{
    transition: 0.2s ease-out;
    border-radius: 50%;

    width: 7.5em;
    height: 8em;
}

#GamePage
{
    margin:3em;

    left:0;
    right:0;
    top:0;
    bottom:0;

    position:fixed;
    background-color: rgb(15, 16, 18);
}

#GamePageClosing
{
    margin:1em;
    font-size: 1.8em;

    display: inline-block;
    background-color: transparent;

    width: auto;
    height:auto;
}

#Contacts
{
    gap:1rem;
    display: block;
    justify-content: end;
    padding-bottom:1rem;
    align-items:center;
    background-color: transparent;
}

#Contacts a
{
    color:transparent;
    background-color: transparent;
}

/*#endregion Ids*/

/*#region Classes*/

.EducationContext
{
    display: block;
    justify-items: center;
}

.EducationContext h3
{
    font-size:2rem;
    font-weight: bolder;
}

.EducationContext h5
{
    font-weight: lighter;
    font-size:1.5rem;
}

.Arrow
{
    aspect-ratio: 0.7rem;
    position: relative;
    margin-left:100%;
    margin-top:2rem;
    width:1.5rem;
    visibility: collapse;
}

.GameGif
{
    object-fit: cover;
    display: block;

    overflow: hidden !important;
    aspect-ratio: 1.7;

}

.SmallSection
{
    display:grid;
    grid-template-rows: auto;
    grid-gap: 1.5rem;

    width:90%;

    justify-self: center;
    align-content: center;
}

.SectionTitle
{
    justify-self: left;
    grid-column: 1/-1;

    margin:1em;
}

.GameCardInfos
{
    justify-items: left;
    margin:2em;
}

.GameLink
{
    text-align: left;
    display: grid;
    width:100%;
    grid-template-columns: 6fr 0.5fr;
}

.GameLinkImg
{
    justify-self: right;
    width:1rem;
    height:1.5rem;
}

.GameCardContext
{
    position:relative;
    margin:0;
    padding:0;
}

.GameInfoLogo
{
    display: inline-block;
    margin-top:1.6em;
    margin-bottom:1.6em;
    width:1em;
    height:1em;
}

.ContactLogos
{
    background-color: transparent;
    display:inline-block;
    justify-items: center;
    align-items: center;
    padding:0.5em;

    transition: 0.2s;
    width:5rem;
    height:5rem;
}
/*#endregion Classes*/

/*#region Animations*/

technical-exp .Exp:hover, a:not(.ButtonLink)
{
    background-color: rgb(13, 14, 15);
    transition:0.2s;
    border-color:greenyellow;
    scale:110%;
}

education-card:hover
{

    background-color:rgb(13, 14, 15);
    transition:0.2s ease-out;
    width:100%;
    border-style:solid;
    border-width:0.1rem;
    border-color:greenyellow;
    box-shadow: 0px 0 10px black;
}

#ProfileImg:hover
{
    transition: 0.2s ease-out;
    border-radius: 25%;
}

.ContactLogos:hover
{
    background-color: transparent;
    display:inline-block;
    transition: 0.2s;
    width:6em;
    height:6em;
}

button:hover img:not(.GameLinkImg)
{
    transition:0.2s;
    filter:blur(0px) grayscale(0%);
}

game-card:hover
{
    transition:0.2s;
    border-style:solid;
    border-width:0.1rem;
    border-color:greenyellow;
    transition: transform 0.1s ease-out;
    transform: translateY(-20px);
    box-shadow: 0px 0 10px black;
}


button:hover
{
    transition:0.2s;
    background-color: rgb(13, 14, 15);
}

button:hover h2
{
    transition:0.2s;
    color:rgb(255, 128, 149);
}

button:hover h3
{
    transition:0.2s;
    color:rgb(94, 186, 95);
}

button:hover article
{
    animation-name: Disparition;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;  
}

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

/*#endregion Animations*/

/*#endregion Default Screen*/



/*#region Mid Screen*/

@media screen and (max-width: 1500px) 
{
    .ContactLogos
    {
        width:4rem;
        height:4rem;
    }

    .ContactLogos:hover
    {
        width:5rem;
        height:5rem;
    }

    section:not(.SmallSection)
    {
        grid-template-columns: repeat(2, 1fr);
        width:80%;
    }

    button
    {
        filter:blur(0px) grayscale(0%);
    }

    button h2
    {
        color:rgb(255, 128, 149);
    }

    button h3
    {
        color:rgb(94, 186, 95);
    }

    button:hover img:not(.GameLinkImg)
    {
        filter:blur(0px) grayscale(0%);
    }

    button img:not(.GameInfoLogo, .GameLinkImg)
    {
        filter:none;
    }
}

/*#endregion Mid Screen*/



/*#region Small Screen*/

@media screen and (max-width: 1000px) 
{

    button h2
    {
        color:rgb(255, 128, 149);
    }

    button h3
    {
        color:rgb(94, 186, 95);
    }

    button:hover img:not(.GameLinkImg)
    {
        filter:blur(0px) grayscale(0%);
    }

    button img:not(.GameInfoLogo, .GameLinkImg)
    {
        filter:none;
    }

    section:not(.SmallSection)
    {
        grid-template-columns: repeat(1, 1fr);
        width:70%;
    }

    header
    {
        padding-left:5em;
        padding-right:5em;
    }
 
    h1
    {
        font-size: 2.2em;
    }

    h3
    {
        font-size: 1.4em;
    }
}

/*#endregion Small Screen*/



/*#region Mini Screen*/

@media screen and (max-width: 800px) 
{
    section:not(.SmallSection)
    {
        grid-template-columns: repeat(1, 1fr);
        width:90%;
    }

    header
    {
        padding-left:1em;
        padding-right:1em;
    }

    button
    {
        filter:blur(0px) grayscale(0%);
    }

    h1
    {
        font-size: 2em;
    }

    h3
    {
        font-size: 1.2em;
    }

    button h2
    {
        color:rgb(255, 128, 149);
    }

    button h3
    {
        color:rgb(94, 186, 95);
    }

    button:hover img:not(.GameLinkImg)
    {
        filter:blur(0px) grayscale(0%);
    }

    button img:not(.GameInfoLogo, .GameLinkImg)
    {
        filter:none;
    }
}

/*#endregion Mini Screen*/



/*#region Giant Screen*/

@media screen and (min-width: 2000px) 
{
    section:not(.SmallSection)
    {
            grid-template-columns: repeat(4, 1fr);
            width:90%;
    }
}


/*#endregion Giant Screen*/



/*#region Enormous Screen*/
@media screen and (min-width: 3000px)
{
    section:not(.SmallSection)
    {
            grid-template-columns: repeat(5, 1fr);
            width:90%;
    }
}

/*#endregion Enormous Screen*/