:root {
    --escuro: #222522;
    --ciano: #00E4EC;
}
@font-face {
    font-family: toxigenesis;
    src: url("./fonts/toxigenesis.otf");
}
@font-face {
    font-family: montserrat;
    src: url("./fonts/montserrat.ttf");
}
body {
    background-color: var(--escuro);
    color: var(--ciano);
    margin: 0;
}
header {
    font-family: toxigenesis;
    border-bottom: solid var(--ciano) 2pt;
    padding-left: 10pt;
    padding-right: 10pt;
}
#welcome {
    display: flex;
    margin: auto;
    margin-top: 20pt;
    margin-bottom: 0;
    width: fit-content;
    font-family: montserrat;
    gap: 20pt;
    flex-wrap: wrap;
}
#welcome video {
    width: 300pt;
}
h2 {
    font-family: toxigenesis;
}
#welcome > :last-child{
    max-width: 400pt;
    display: flex;
    flex-direction: column;
}
#welcome > :last-child > :last-child {
    display: flex;
    gap: 10pt;
    margin: auto;
    margin-left: 0;
}
#downloadButton, #repositoryButton {
    font-family: montserrat;
    cursor: pointer;
    padding: 10pt;
    transition: 250ms;
}
#downloadButton {
    background-color: var(--ciano);
    border: none;
    padding-left: 50pt;
    padding-right: 50pt;
}
#repositoryButton {
    background: none;
    border: solid var(--ciano) 2pt;
    padding-left: 30pt;
    padding-right: 30pt;
    color: var(--ciano);
}
#downloadButton:hover, #repositoryButton:hover {
    text-decoration: underline;
    box-shadow: 0 0 30pt var(--ciano);
}
#reasons {
    margin: auto;
    margin-bottom: 0;
    margin-top: 50pt;
    width: fit-content;
    align-items: center;
    display: flex;
    font-family: montserrat;
    flex-direction: column;
}
#reasons > div {
    display: flex;
    gap: 10pt;
    flex-wrap: wrap;
}
.reason {
    max-width: 250pt;
}
.reason i {
    font-size: 40pt;
    display: flex;
    align-items: center;
}
#howToUse {
    display: flex;
    width: fit-content;
    margin: auto;
    margin-top: 50pt;
    margin-bottom: 0;
    flex-direction: column;
    align-items: center;
}
#howToUse > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10pt;
    justify-content: center;
}
#howToUse > div > div {
    display: flex;
    font-family: montserrat;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 300pt;
    text-align: center;
}
.examples {
    height: 125pt;
    border-radius: 10pt;
    position: relative;
    transition: 250ms;
    top: 0;
}
.examples:hover {
    top: -5pt;
}
#dev {
    border: solid var(--ciano) 2pt;
    font-family: montserrat;
    display: flex;
    margin: auto;
    margin-top: 50pt;
    margin-bottom: 25pt;
    padding: 10pt;
    gap: 10pt;
    width: fit-content;
    justify-content: center;
}
#dev > div:first-of-type {
    width: fit-content;
    display: flex;
    flex-direction: column;
}
#dev > div > p {
    width: fit-content;
}
#dev > div strong {
    font-size: 14pt;
}
#dev > div > div {
    display: flex;
    gap: 10pt;
}
#devPic {
    width: 100pt;
    border-radius: 50%;
}
#dev i {
    font-size: 40pt;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    top: 0;
    transition: 250ms;
}
#dev i:hover {
    top: -5pt;
}

@media (max-width: 1023px) {
    #welcome {
        margin-left: 10pt;
        margin-right: 10pt;
    }
    #welcome video {
        width: 150pt;
    }
    #welcome p {
        font-size: 10pt;
    }
    h2 {
        font-size: 14pt;
    }
    #welcome > :last-child {
        max-width: 350pt;
    }
    #downloadButton {
        padding-left: 30pt;
        padding-right: 30pt;
    }
    #repositoryButton {
        padding-left: 15pt;
        padding-right: 15pt;
    }
    #reasons {
        margin-right: 10pt;
        margin-left: 10pt;
    }
    .reason {
        min-width: 225pt;
    }
    #howToUse {
        margin-left: 10pt;
        margin-right: 10pt;
    }
    #howToUse > div {
        gap: 20pt;
    }
    .examples {
        height: auto;
        width: 100%;
    }
    #howToUse > div > div {
        max-width: 200pt;
    }
    #dev i:hover {
        top: 0;
    }
    #dev {
        margin-left: 10pt;
        margin-right: 10pt;
        flex-wrap: wrap;
        justify-content: left;
    }
}

@media (max-width: 599px) {
    #dev > div > div {
        flex-wrap: wrap;
    }
    .reason i, #dev i {
        font-size: 30pt;
    }
    #downloadButton, #repositoryButton {
        padding-top: 5pt;
        padding-bottom: 5pt;
    }
}