@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

body {

  background-color: #000000;
  background-size: cover;
  background-repeat: no-repeat;
  
  color: aliceblue;

  font-family: "Lexend",sans-serif;

}

p{
  text-align: center;
  margin: 10px 10%;

  /*
  animation-name: fade;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  */
}

hr{
    /*
    animation-name: fade;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    */
}

h1{
    
    animation-name: fade2;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    

    
    text-shadow: 0px 0px 10px aquamarine;
    
}

.row {
  display: flex;
}

.column {
  flex: 50%;
}

#main-content{
    /*
    margin: 0px 5px;
    background-color: #70809055;
    */
}

/*  */
#link-back{
    /*
    margin-left: 10px;
    margin-top: 10px;

    color: #001323;
    font-size: medium;
    */

}

.screenshot-section{
    display: grid;
    row-gap: 50px;
    grid-template-columns: auto auto auto;

    margin: 32px;

    height: 100%;
}

.screenshot{
    width: 95%;

    align-self: center;
    justify-self: center;
    margin: auto;

    /*
    animation-name: fade;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;

    border-radius: 5px;

    opacity: 0%;
    */
}

/* Animated items */
#title{
  justify-self: center;
  margin: auto;

  /*
  animation-name: popup;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  padding-top: 25px;
  opacity: 0%;
  */
}

#main-image{
    width: 50%;
    margin: 5px;

    /*
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    padding-top: 25px;
    opacity: 0%;
    */
}

#description{
    margin: 50px 15% 10px;

    /*
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    padding-top: 25px;
    opacity: 0%;
    */
}

#header-section{
    background-image: url('LukasBirthdayPartypfp.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    
    
    border-image: url("/images/fade-border-gradient.png");
    border-image-slice: 30;
    border-image-width: 50%;

    min-height: 320px;
}

#content-section{
    align-content: center;
    margin: 20px 25px;
}

#footer-section{
    background-image: url('/images/DbtemGradient.png');
    background-size: contain;
    background-repeat: repeat-x;
}

#roles-section{
    background-color: gainsboro; 
    background-image: linear-gradient(0deg, gainsboro, #aeaeae); 
    border-radius: 5px; 
    border-color: lightgray;

    display: flex; 

    width: 50%; 
    justify-self: center;

    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    padding-top: 25px;
    opacity: 0%;
}

/* Button variations */
.itch-button{
    justify-self: center;
    align-self: center;
    text-justify: center;
    text-align: center;

    width: 30%;
    max-height: 64px;
    min-height: 32px;
    border-radius: 5px;

    background-color: black;
    border-color: lightsalmon;
    color: whitesmoke;
    font-family: "Lexend",sans-serif;
    box-shadow: 2px 2px 2px orange;
    
    display:block;

    cursor: pointer;
}

#yt-button{
    justify-self: center;
    align-self: center;
    text-justify: center;
    text-align: center;

    width: 30%;
    margin-left: 5%;
    max-height: 64px;
    min-height: 32px;
    border-radius: 5px;

    background-color: orange;
    border-color: lightsalmon;
    color: whitesmoke;
    font-family: "Lexend",sans-serif;

    cursor: pointer;

    /* Anim */
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    padding-top: 25px;
    opacity: 0%;
}

#other-button{
    justify-self: center;
    align-self: center;
    text-justify: center;
    text-align: center;

    width: 30%;
    margin-left: 5%;
    max-height: 64px;
    min-height: 32px;
    border-radius: 5px;

    background-color: lightseagreen;
    border-color: teal;
    color: whitesmoke;
    font-family: "Lexend",sans-serif;

    cursor: pointer;

    /* Anim */
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    padding-top: 25px;
    opacity: 0%;
}

#button-unavailable{
    justify-self: center;
    align-self: center;
    text-justify: center;
    text-align: center;

    width: 30%;
    margin-left: 5%;
    max-height: 64px;
    min-height: 32px;
    border-radius: 5px;

    background-color: gray;
    border-color: slategray;
    color: black;
    font-family: "Lexend",sans-serif;

    cursor: not-allowed;

    /* Anim */
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    padding-top: 25px;
    opacity: 0%;
}

/* Animations */
@keyframes popup{
    from {opacity: 0%; padding-top: 25px;}
    to {opacity: 100%; padding-top: 0px;}
}

@keyframes fade{
    from {opacity: 0%; padding-left: 40%; padding-right: 40%;}
    to {opacity: 100%; padding-left: 0px; padding-right: 0px;}
}

@keyframes fade2{
    0%{opacity: 0%; text-shadow: 0px 0px 0px aquamarine;}
    50%{opacity: 100%; text-shadow: 0px 0px 30px aquamarine;}
    100%{opacity: 100%; text-shadow: 0px 0px 5px aquamarine;}
}

/* Mobile-friendlyness */
  @media screen and (max-width: 800px) {

    /*
    #main-image{
        justify-self: center;
        width: 90%;
    }
    */


    #screenshot-section{   
        display: grid;
        row-gap: 50px;
        grid-template-columns: auto auto;

        margin: 20px;
    }
}